[{"data":1,"prerenderedAt":63},["Reactive",2],{"blog-post-markdown-form-validation-input-handling-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":38},"markdown-form-validation-input-handling-complete-guide","Markdown Form Validation and Input Handling: Complete Guide for Interactive Documentation with Dynamic Validation Systems","Master advanced Markdown form validation and input handling techniques for creating interactive documentation with comprehensive validation systems, real-time feedback, and user-friendly error handling that ensures data quality and user experience.","Advanced Markdown form validation and input handling systems enable interactive documentation with robust data validation, real-time user feedback, and comprehensive error handling mechanisms. By…","2025-10-23","Tutorial","Matthew Rathbone","markdown form validation, input validation markdown, form handling markdown, interactive forms markdown, markdown input validation, form validation systems, dynamic form validation, markdown user input",34,"\u003Cp>Advanced Markdown form validation and input handling systems enable interactive documentation with robust data validation, real-time user feedback, and comprehensive error handling mechanisms. By implementing sophisticated validation frameworks, dynamic input processing systems, and user-friendly feedback interfaces, technical teams can create documentation that not only informs but also collects, validates, and processes user input effectively while maintaining professional standards for data quality and user experience.\u003C/p>\n\u003Ch2 id=\"why-master-form-validation-and-input-handling\">Why Master Form Validation and Input Handling?\u003C/h2>\n\u003Cp>Professional form validation provides essential benefits for interactive documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Data Quality\u003C/strong>: Ensure user-submitted data meets requirements through comprehensive validation rules\u003C/li>\n\u003Cli>\u003Cstrong>User Experience\u003C/strong>: Provide immediate feedback and guidance to help users complete forms successfully\u003C/li>\n\u003Cli>\u003Cstrong>Security\u003C/strong>: Protect against malicious input and maintain data integrity through proper validation\u003C/li>\n\u003Cli>\u003Cstrong>Automation\u003C/strong>: Enable automated processing of validated user input for dynamic content generation\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility\u003C/strong>: Create inclusive form experiences that work across different assistive technologies\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-validation-principles\">Foundation Validation Principles\u003C/h2>\n\u003Ch3 id=\"comprehensive-input-validation-framework\">Comprehensive Input Validation Framework\u003C/h3>\n\u003Cp>Building robust validation systems that handle multiple input types and validation scenarios:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// form-validator.js - Advanced form validation system for Markdown documentation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormValidator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-comment\">// Validation configuration\u003C/span>\n            \u003Cspan class=\"hljs-attr\">validateOnInput\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateOnBlur\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">showErrorsInline\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightInvalidFields\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \n            \u003Cspan class=\"hljs-comment\">// Error display options\u003C/span>\n            \u003Cspan class=\"hljs-attr\">errorClass\u003C/span>: \u003Cspan class=\"hljs-string\">'validation-error'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">successClass\u003C/span>: \u003Cspan class=\"hljs-string\">'validation-success'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">errorSummaryId\u003C/span>: \u003Cspan class=\"hljs-string\">'validation-summary'\u003C/span>,\n            \n            \u003Cspan class=\"hljs-comment\">// Validation timing\u003C/span>\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">asyncValidationDelay\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>,\n            \n            \u003Cspan class=\"hljs-comment\">// Custom validation rules\u003C/span>\n            \u003Cspan class=\"hljs-attr\">customValidators\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \n            \u003Cspan class=\"hljs-comment\">// Internationalization\u003C/span>\n            \u003Cspan class=\"hljs-attr\">locale\u003C/span>: \u003Cspan class=\"hljs-string\">'en'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">messages\u003C/span>: {},\n            \n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationQueue\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validatedForms\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupDefaultValidators\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadValidationMessages\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupFormObserver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Markdown Form Validator initialized'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupDefaultValidators\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Basic validators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'required'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateRequired\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'minLength'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateMinLength\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'maxLength'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateMaxLength\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'pattern'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validatePattern\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'email'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateEmail\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'url'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateUrl\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'number'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateNumber\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Advanced validators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'custom'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateCustom\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'async'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateAsync\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'conditional'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateConditional\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'crossField'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateCrossField\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Content-specific validators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateMarkdown\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'codeBlock'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateCodeBlock\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'frontmatter'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validateFrontmatter\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-params\">name, validatorFunction\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customValidators\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, validatorFunction);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadValidationMessages\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> defaultMessages = {\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: \u003Cspan class=\"hljs-string\">'This field is required'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">minLength\u003C/span>: \u003Cspan class=\"hljs-string\">'Must be at least {min} characters long'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: \u003Cspan class=\"hljs-string\">'Must not exceed {max} characters'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">pattern\u003C/span>: \u003Cspan class=\"hljs-string\">'Please enter a valid value'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">email\u003C/span>: \u003Cspan class=\"hljs-string\">'Please enter a valid email address'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-string\">'Please enter a valid URL'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">number\u003C/span>: \u003Cspan class=\"hljs-string\">'Please enter a valid number'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">markdown\u003C/span>: \u003Cspan class=\"hljs-string\">'Invalid Markdown syntax'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">codeBlock\u003C/span>: \u003Cspan class=\"hljs-string\">'Code block contains syntax errors'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">frontmatter\u003C/span>: \u003Cspan class=\"hljs-string\">'Invalid YAML frontmatter'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">async\u003C/span>: \u003Cspan class=\"hljs-string\">'Validation failed'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">conditional\u003C/span>: \u003Cspan class=\"hljs-string\">'Field validation failed'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">crossField\u003C/span>: \u003Cspan class=\"hljs-string\">'Fields do not match'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span> = { ...defaultMessages, ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span> };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupFormObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Observe DOM for new forms\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutations\u003C/span>) =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutation\u003C/span>) =>\u003C/span> {\n                mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-title class_\">Node\u003C/span>.\u003Cspan class=\"hljs-property\">ELEMENT_NODE\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> forms = node.\u003Cspan class=\"hljs-property\">querySelectorAll\u003C/span> ? \n                            node.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'form[data-validate]'\u003C/span>) : \n                            [];\n                        \n                        forms.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">form\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeForm\u003C/span>(form));\n                        \n                        \u003Cspan class=\"hljs-comment\">// Check if the node itself is a form\u003C/span>\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">matches\u003C/span> && node.\u003Cspan class=\"hljs-title function_\">matches\u003C/span>(\u003Cspan class=\"hljs-string\">'form[data-validate]'\u003C/span>)) {\n                            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeForm\u003C/span>(node);\n                        }\n                    }\n                });\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Initialize existing forms\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'form[data-validate]'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">form\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeForm\u003C/span>(form);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeForm\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validatedForms\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(form)) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validatedForms\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(form);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formId = form.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">`form-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>`\u003C/span>;\n        form.\u003Cspan class=\"hljs-property\">id\u003C/span> = formId;\n        \n        \u003Cspan class=\"hljs-comment\">// Parse validation rules from data attributes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseFormValidationRules\u003C/span>(form);\n        \n        \u003Cspan class=\"hljs-comment\">// Setup form-level validation\u003C/span>\n        form.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'submit'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleFormSubmit\u003C/span>(event);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Setup field-level validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fields = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-validate]'\u003C/span>);\n        fields.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeField\u003C/span>(field, form);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Initialized form validation for \u003Cspan class=\"hljs-subst\">${formId}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeField\u003C/span>(\u003Cspan class=\"hljs-params\">field, form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName = field.\u003Cspan class=\"hljs-property\">name\u003C/span> || field.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">`field-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Parse field validation rules\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseFieldValidationRules\u003C/span>(field, form.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Setup event listeners\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">validateOnInput\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputHandler = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\n                \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(field, form),\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span>\n            );\n            \n            field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, inputHandler);\n            field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keyup'\u003C/span>, inputHandler);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">validateOnBlur\u003C/span>) {\n            field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'blur'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(field, form);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Special handling for different input types\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSpecialFieldHandling\u003C/span>(field, form);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSpecialFieldHandling\u003C/span>(\u003Cspan class=\"hljs-params\">field, form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldType = field.\u003Cspan class=\"hljs-property\">type\u003C/span> || field.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (fieldType) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'file'\u003C/span>:\n                field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateFileField\u003C/span>(field, form);\n                });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'radio'\u003C/span>:\n                field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(field, form);\n                });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select-one'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select-multiple'\u003C/span>:\n                field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(field, form);\n                });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Special handling for Markdown editors\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-editor'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupMarkdownEditorValidation\u003C/span>(field, form);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupMarkdownEditorValidation\u003C/span>(\u003Cspan class=\"hljs-params\">field, form\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle various Markdown editor implementations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> editorType = field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-editor-type'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (editorType) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'codemirror'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCodeMirrorValidation\u003C/span>(field, form);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ace'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAceEditorValidation\u003C/span>(field, form);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'simple'\u003C/span>:\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-comment\">// Standard textarea handling\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseFormValidationRules\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formId = form.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rules = {\n            \u003Cspan class=\"hljs-attr\">fields\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">crossFieldRules\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">customRules\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Parse form-level validation rules\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formRules = form.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-validate'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (formRules) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsed = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(formRules);\n                rules.\u003Cspan class=\"hljs-property\">crossFieldRules\u003C/span> = parsed.\u003Cspan class=\"hljs-property\">crossField\u003C/span> || [];\n                rules.\u003Cspan class=\"hljs-property\">customRules\u003C/span> = parsed.\u003Cspan class=\"hljs-property\">custom\u003C/span> || [];\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to parse form validation rules:'\u003C/span>, error);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(formId, rules);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseFieldValidationRules\u003C/span>(\u003Cspan class=\"hljs-params\">field, formId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName = field.\u003Cspan class=\"hljs-property\">name\u003C/span> || field.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rules = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Parse validation rules from data attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationData = field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-validate'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validationData) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsed = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(validationData);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(parsed)) {\n                    rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...parsed);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(parsed);\n                }\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-comment\">// Try parsing as simple rule list\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> simpleRules = validationData.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n                rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...simpleRules.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rule\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> [name, ...params] = rule.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: name.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                        \u003Cspan class=\"hljs-attr\">params\u003C/span>: params.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? params.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>) : \u003Cspan class=\"hljs-literal\">undefined\u003C/span>\n                    };\n                }));\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add HTML5 validation attributes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addHtml5ValidationRules\u003C/span>(field, rules);\n        \n        \u003Cspan class=\"hljs-comment\">// Store rules\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formRules = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(formId);\n        formRules.\u003Cspan class=\"hljs-property\">fields\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(fieldName, rules);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addHtml5ValidationRules\u003C/span>(\u003Cspan class=\"hljs-params\">field, rules\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Required attribute\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'required'\u003C/span>)) {\n            rules.\u003Cspan class=\"hljs-title function_\">unshift\u003C/span>({ \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'required'\u003C/span> });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Min/max length\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'minlength'\u003C/span>)) {\n            rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'minLength'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">params\u003C/span>: field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'minlength'\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'maxlength'\u003C/span>)) {\n            rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'maxLength'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">params\u003C/span>: field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'maxlength'\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Pattern\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'pattern'\u003C/span>)) {\n            rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'pattern'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">params\u003C/span>: field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'pattern'\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Type-specific validations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'email'\u003C/span>:\n                rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'email'\u003C/span> });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'url'\u003C/span>:\n                rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'url'\u003C/span> });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>:\n                rules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'number'\u003C/span> });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(\u003Cspan class=\"hljs-params\">field, form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formId = form.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName = field.\u003Cspan class=\"hljs-property\">name\u003C/span> || field.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formRules = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(formId);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldRules = formRules?.\u003Cspan class=\"hljs-property\">fields\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(fieldName) || [];\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationResult = {\n            \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">errors\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">field\u003C/span>: fieldName,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(field)\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Run validation rules\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> ruleConfig \u003Cspan class=\"hljs-keyword\">of\u003C/span> fieldRules) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> ruleName = ruleConfig.\u003Cspan class=\"hljs-property\">rule\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> params = ruleConfig.\u003Cspan class=\"hljs-property\">params\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customValidators\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(ruleName);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator) {\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">validator\u003C/span>(validationResult.\u003Cspan class=\"hljs-property\">value\u003C/span>, params, field, form);\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!result.\u003Cspan class=\"hljs-property\">valid\u003C/span>) {\n                        validationResult.\u003Cspan class=\"hljs-property\">valid\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                        validationResult.\u003Cspan class=\"hljs-property\">errors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                            \u003Cspan class=\"hljs-attr\">rule\u003C/span>: ruleName,\n                            \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatErrorMessage\u003C/span>(ruleName, params, result.\u003Cspan class=\"hljs-property\">message\u003C/span>),\n                            params\n                        });\n                        \n                        \u003Cspan class=\"hljs-comment\">// Stop on first error if configured\u003C/span>\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (ruleConfig.\u003Cspan class=\"hljs-property\">stopOnError\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>) {\n                            \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                        }\n                    }\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (result.\u003Cspan class=\"hljs-property\">warnings\u003C/span>) {\n                        validationResult.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...result.\u003Cspan class=\"hljs-property\">warnings\u003C/span>);\n                    }\n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Validation error for rule \u003Cspan class=\"hljs-subst\">${ruleName}\u003C/span>:`\u003C/span>, error);\n                    validationResult.\u003Cspan class=\"hljs-property\">valid\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                    validationResult.\u003Cspan class=\"hljs-property\">errors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: ruleName,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Validation failed due to internal error'\u003C/span>,\n                        params\n                    });\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Store validation result\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${formId}\u003C/span>.\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span>`\u003C/span>, validationResult);\n        \n        \u003Cspan class=\"hljs-comment\">// Update UI\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFieldValidationUI\u003C/span>(field, validationResult);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> validationResult;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">checked\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'radio'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = field.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'form'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> radioGroup = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> radio \u003Cspan class=\"hljs-keyword\">of\u003C/span> radioGroup) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (radio.\u003Cspan class=\"hljs-property\">checked\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">return\u003C/span> radio.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                    }\n                }\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'file'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">files\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select-multiple'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(field.\u003Cspan class=\"hljs-property\">selectedOptions\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">option\u003C/span> =>\u003C/span> option.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Validation rule implementations\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">validateRequired\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isEmpty = value === \u003Cspan class=\"hljs-literal\">null\u003C/span> || value === \u003Cspan class=\"hljs-literal\">undefined\u003C/span> || \n                       (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> && value.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span>) ||\n                       (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(value) && value.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) ||\n                       (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span> && !value);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">valid\u003C/span>: !isEmpty,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: isEmpty ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">required\u003C/span> : \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateMinLength\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> minLength = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(params);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> length = \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> ? value.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = length >= minLength;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">minLength\u003C/span>.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'{min}'\u003C/span>, minLength)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateMaxLength\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxLength = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(params);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> length = \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> ? value.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = length <= maxLength;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">maxLength\u003C/span>.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'{max}'\u003C/span>, maxLength)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validatePattern\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }; \u003Cspan class=\"hljs-comment\">// Pattern validation only applies to non-empty strings\u003C/span>\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> pattern = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(params);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">pattern\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateEmail\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> emailPattern = \u003Cspan class=\"hljs-regexp\">/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = emailPattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">email\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateUrl\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">URL\u003C/span>(value);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">url\u003C/span>\n            };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateNumber\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || value === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> num = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(num) && \u003Cspan class=\"hljs-built_in\">isFinite\u003C/span>(num);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">number\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateMarkdown\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> warnings = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check for common Markdown syntax issues\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateMarkdownSyntax\u003C/span>(value, errors, warnings);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">valid\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? errors[\u003Cspan class=\"hljs-number\">0\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: warnings\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateMarkdownSyntax\u003C/span>(\u003Cspan class=\"hljs-params\">content, errors, warnings\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for unmatched brackets\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> openBrackets = (content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[/g\u003C/span>) || []).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> closeBrackets = (content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\]/g\u003C/span>) || []).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (openBrackets !== closeBrackets) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Unmatched square brackets in Markdown links'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for unmatched parentheses in links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkPattern = \u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\(([^)]+)\\)/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = linkPattern.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(content)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkUrl = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!linkUrl.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                warnings.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Empty URL in link: "\u003Cspan class=\"hljs-subst\">${match[\u003Cspan class=\"hljs-number\">1\u003C/span>]}\u003C/span>"`\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for code block consistency\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlockMatches = content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```/g\u003C/span>) || [];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (codeBlockMatches.\u003Cspan class=\"hljs-property\">length\u003C/span> % \u003Cspan class=\"hljs-number\">2\u003C/span> !== \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Unmatched code block delimiters (```)'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for heading structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#+\\s+.+$/gm\u003C/span>) || [];\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> heading \u003Cspan class=\"hljs-keyword\">of\u003C/span> headings) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = heading.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#+/\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level > \u003Cspan class=\"hljs-number\">6\u003C/span>) {\n                warnings.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Heading level \u003Cspan class=\"hljs-subst\">${level}\u003C/span> exceeds maximum (6)`\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = params || \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = [];\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Basic syntax validation based on language\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (language.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'json'\u003C/span>:\n                    \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(value);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'js'\u003C/span>:\n                    \u003Cspan class=\"hljs-comment\">// Basic JS validation - check for common syntax issues\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateJavaScriptSyntax\u003C/span>(value, errors);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'yaml'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'yml'\u003C/span>:\n                    \u003Cspan class=\"hljs-comment\">// Basic YAML validation\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateYAMLSyntax\u003C/span>(value, errors);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${language}\u003C/span> syntax error: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">valid\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? errors[\u003Cspan class=\"hljs-number\">0\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateJavaScriptSyntax\u003C/span>(\u003Cspan class=\"hljs-params\">code, errors\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Basic bracket matching\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> brackets = { \u003Cspan class=\"hljs-string\">'('\u003C/span>: \u003Cspan class=\"hljs-string\">')'\u003C/span>, \u003Cspan class=\"hljs-string\">'['\u003C/span>: \u003Cspan class=\"hljs-string\">']'\u003C/span>, \u003Cspan class=\"hljs-string\">'{'\u003C/span>: \u003Cspan class=\"hljs-string\">'}'\u003C/span> };\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stack = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < code.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> char = code[i];\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (brackets[char]) {\n                stack.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(char);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(brackets).\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(char)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> last = stack.\u003Cspan class=\"hljs-title function_\">pop\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!last || brackets[last] !== char) {\n                    errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Mismatched bracket at position \u003Cspan class=\"hljs-subst\">${i}\u003C/span>`\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (stack.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Unclosed brackets'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateYAMLSyntax\u003C/span>(\u003Cspan class=\"hljs-params\">yaml, errors\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = yaml.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i];\n            \n            \u003Cspan class=\"hljs-comment\">// Check for tabs (YAML should use spaces)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (line.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'\\t'\u003C/span>)) {\n                errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Line \u003Cspan class=\"hljs-subst\">${i + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>: YAML should use spaces, not tabs`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Check for basic key-value format\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (line.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() && !line.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>) && \n                !line.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>) && !line.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'-'\u003C/span>)) {\n                errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Line \u003Cspan class=\"hljs-subst\">${i + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>: Invalid YAML syntax`\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateAsync\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field, form\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Example async validation (e.g., check if username is available)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(params);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(config.\u003Cspan class=\"hljs-property\">url\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">method\u003C/span>: config.\u003Cspan class=\"hljs-property\">method\u003C/span> || \u003Cspan class=\"hljs-string\">'POST'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">headers\u003C/span>: {\n                    \u003Cspan class=\"hljs-string\">'Content-Type'\u003C/span>: \u003Cspan class=\"hljs-string\">'application/json'\u003C/span>,\n                    ...config.\u003Cspan class=\"hljs-property\">headers\u003C/span>\n                },\n                \u003Cspan class=\"hljs-attr\">body\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({ value, \u003Cspan class=\"hljs-attr\">field\u003C/span>: field.\u003Cspan class=\"hljs-property\">name\u003C/span> })\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">valid\u003C/span>: result.\u003Cspan class=\"hljs-property\">valid\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: result.\u003Cspan class=\"hljs-property\">message\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">async\u003C/span>\n            };\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Validation service unavailable'\u003C/span>\n            };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateConditional\u003C/span>(\u003Cspan class=\"hljs-params\">value, params, field, form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> condition = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(params);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetField = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${condition.field}\u003C/span>"]`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!targetField) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }; \u003Cspan class=\"hljs-comment\">// Skip if target field not found\u003C/span>\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(targetField);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldValidate = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.evaluateCondition(targetValue, condition);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!shouldValidate) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }; \u003Cspan class=\"hljs-comment\">// Skip validation\u003C/span>\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Run nested validation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nestedRule = condition.\u003Cspan class=\"hljs-property\">rule\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nestedParams = condition.\u003Cspan class=\"hljs-property\">params\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customValidators\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(nestedRule);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title function_\">validator\u003C/span>(value, nestedParams, field, form);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Conditional validation error'\u003C/span>\n            };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">evaluateCondition\u003C/span>(\u003Cspan class=\"hljs-params\">value, condition\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (condition.\u003Cspan class=\"hljs-property\">operator\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'equals'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> value === condition.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'not_equals'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> value !== condition.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'greater_than'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value) > \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(condition.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'less_than'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value) < \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(condition.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'contains'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> && value.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(condition.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'not_empty'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> value !== \u003Cspan class=\"hljs-literal\">null\u003C/span> && value !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span> && value !== \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateFieldValidationUI\u003C/span>(\u003Cspan class=\"hljs-params\">field, validationResult\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove existing validation classes\u003C/span>\n        field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">errorClass\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">successClass\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Remove existing error messages\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingErrors = field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.field-error'\u003C/span>);\n        existingErrors.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\u003C/span> =>\u003C/span> error.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>());\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validationResult.\u003Cspan class=\"hljs-property\">valid\u003C/span>) {\n            field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">successClass\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">errorClass\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">showErrorsInline\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayFieldErrors\u003C/span>(field, validationResult.\u003Cspan class=\"hljs-property\">errors\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Display warnings\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validationResult.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayFieldWarnings\u003C/span>(field, validationResult.\u003Cspan class=\"hljs-property\">warnings\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update global validation summary\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateValidationSummary\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displayFieldErrors\u003C/span>(\u003Cspan class=\"hljs-params\">field, errors\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        errorContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'field-error'\u003C/span>;\n        \n        errors.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n            errorElement.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'error-message'\u003C/span>;\n            errorElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = error.\u003Cspan class=\"hljs-property\">message\u003C/span>;\n            errorElement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'alert'\u003C/span>);\n            errorContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(errorElement);\n        });\n        \n        field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(errorContainer, field.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displayFieldWarnings\u003C/span>(\u003Cspan class=\"hljs-params\">field, warnings\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> warningContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        warningContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'field-warning'\u003C/span>;\n        \n        warnings.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">warning\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> warningElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n            warningElement.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'warning-message'\u003C/span>;\n            warningElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = warning;\n            warningContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(warningElement);\n        });\n        \n        field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(warningContainer, field.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">handleFormSubmit\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = event.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formId = form.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Validate all fields\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fields = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-validate]'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationPromises = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(fields).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(field, form)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">all\u003C/span>(validationPromises);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasErrors = results.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> !result.\u003Cspan class=\"hljs-property\">valid\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Run cross-field validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> crossFieldResults = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateCrossFieldRules\u003C/span>(form);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasCrossFieldErrors = crossFieldResults.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> !result.\u003Cspan class=\"hljs-property\">valid\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasErrors || hasCrossFieldErrors) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayValidationSummary\u003C/span>(form, [...results, ...crossFieldResults]);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Form is valid - proceed with submission\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleValidFormSubmission\u003C/span>(form);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateCrossFieldRules\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formId = form.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formRules = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(formId);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> crossFieldRules = formRules?.\u003Cspan class=\"hljs-property\">crossFieldRules\u003C/span> || [];\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> rule \u003Cspan class=\"hljs-keyword\">of\u003C/span> crossFieldRules) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateCrossFieldRule\u003C/span>(form, rule);\n            results.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(result);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateCrossFieldRule\u003C/span>(\u003Cspan class=\"hljs-params\">form, rule\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (rule.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'match'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateFieldsMatch\u003C/span>(form, rule);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'password_confirmation'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validatePasswordConfirmation\u003C/span>(form, rule);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date_range'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateDateRange\u003C/span>(form, rule);\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateFieldsMatch\u003C/span>(\u003Cspan class=\"hljs-params\">form, rule\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> field1 = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${rule.field1}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> field2 = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${rule.field2}\u003C/span>"]`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!field1 || !field2) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }; \u003Cspan class=\"hljs-comment\">// Skip if fields not found\u003C/span>\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value1 = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(field1);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value2 = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(field2);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = value1 === value2;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">field\u003C/span>: rule.\u003Cspan class=\"hljs-property\">field2\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : rule.\u003Cspan class=\"hljs-property\">message\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>.\u003Cspan class=\"hljs-property\">crossField\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleValidFormSubmission\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Collect form data\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formData = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FormData\u003C/span>(form);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">fromEntries\u003C/span>(formData.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Trigger custom submission handler if defined\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> submitHandler = form.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-submit-handler'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (submitHandler && \u003Cspan class=\"hljs-variable language_\">window\u003C/span>[submitHandler]) {\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>[submitHandler](data, form);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Default submission handling\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">submitFormData\u003C/span>(form, data);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">submitFormData\u003C/span>(\u003Cspan class=\"hljs-params\">form, data\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> submitUrl = form.\u003Cspan class=\"hljs-property\">action\u003C/span> || \u003Cspan class=\"hljs-string\">'#'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> method = form.\u003Cspan class=\"hljs-property\">method\u003C/span> || \u003Cspan class=\"hljs-string\">'POST'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(submitUrl, {\n                \u003Cspan class=\"hljs-attr\">method\u003C/span>: method,\n                \u003Cspan class=\"hljs-attr\">headers\u003C/span>: {\n                    \u003Cspan class=\"hljs-string\">'Content-Type'\u003C/span>: \u003Cspan class=\"hljs-string\">'application/json'\u003C/span>\n                },\n                \u003Cspan class=\"hljs-attr\">body\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(data)\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (response.\u003Cspan class=\"hljs-property\">ok\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displaySubmissionSuccess\u003C/span>(form);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displaySubmissionError\u003C/span>(form, \u003Cspan class=\"hljs-string\">'Submission failed'\u003C/span>);\n            }\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displaySubmissionError\u003C/span>(form, error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displaySubmissionSuccess\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> successMessage = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        successMessage.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'submission-success'\u003C/span>;\n        successMessage.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Form submitted successfully!'\u003C/span>;\n        successMessage.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'alert'\u003C/span>);\n        \n        form.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(successMessage, form.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        \n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            successMessage.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">5000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displaySubmissionError\u003C/span>(\u003Cspan class=\"hljs-params\">form, message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorMessage = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        errorMessage.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'submission-error'\u003C/span>;\n        errorMessage.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Submission error: \u003Cspan class=\"hljs-subst\">${message}\u003C/span>`\u003C/span>;\n        errorMessage.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'alert'\u003C/span>);\n        \n        form.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(errorMessage, form.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatErrorMessage\u003C/span>(\u003Cspan class=\"hljs-params\">ruleName, params, customMessage\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (customMessage) \u003Cspan class=\"hljs-keyword\">return\u003C/span> customMessage;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> message = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">messages\u003C/span>[ruleName] || \u003Cspan class=\"hljs-string\">'Validation failed'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (params && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> params === \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            message = message.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\{(\\w+)\\}/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, key\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> params[key] || match;\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> message;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-params\">func, delay\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeoutId;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">...args\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeoutId);\n            timeoutId = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, args), delay);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">validateForm\u003C/span>(\u003Cspan class=\"hljs-params\">formId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(formId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (form) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> submitEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'submit'\u003C/span>, { \u003Cspan class=\"hljs-attr\">cancelable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleFormSubmit\u003C/span>(submitEvent);\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFormValidationResults\u003C/span>(\u003Cspan class=\"hljs-params\">formId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, result] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${formId}\u003C/span>.`\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName = key.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(formId.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                results.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(fieldName, result);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearValidationResults\u003C/span>(\u003Cspan class=\"hljs-params\">formId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> keysToRemove = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> key \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${formId}\u003C/span>.`\u003C/span>)) {\n                keysToRemove.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(key);\n            }\n        }\n        \n        keysToRemove.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">key\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(key));\n        \n        \u003Cspan class=\"hljs-comment\">// Clear UI\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(formId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (form) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fields = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-validate]'\u003C/span>);\n            fields.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> {\n                field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">errorClass\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">successClass\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.field-error, .field-warning'\u003C/span>);\n                errors.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\u003C/span> =>\u003C/span> error.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>());\n            });\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example and initialization\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormValidator\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">validateOnInput\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">validateOnBlur\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">showErrorsInline\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \n        \u003Cspan class=\"hljs-comment\">// Custom validation messages\u003C/span>\n        \u003Cspan class=\"hljs-attr\">messages\u003C/span>: {\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: \u003Cspan class=\"hljs-string\">'This field is required for processing'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">email\u003C/span>: \u003Cspan class=\"hljs-string\">'Please provide a valid email address'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">markdown\u003C/span>: \u003Cspan class=\"hljs-string\">'Invalid Markdown syntax detected'\u003C/span>\n        }\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Add custom validators\u003C/span>\n    validator.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'githubUsername'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> githubPattern = \u003Cspan class=\"hljs-regexp\">/^[a-zA-Z0-9]([a-zA-Z0-9]|-(?=[a-zA-Z0-9])){0,38}$/\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> valid = githubPattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            valid,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: valid ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : \u003Cspan class=\"hljs-string\">'Please enter a valid GitHub username'\u003C/span>\n        };\n    });\n    \n    validator.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'markdownHeadings'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = value.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#+\\s+.+$/gm\u003C/span>) || [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check heading hierarchy\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> lastLevel = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> heading \u003Cspan class=\"hljs-keyword\">of\u003C/span> headings) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = heading.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#+/\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level > lastLevel + \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Heading level \u003Cspan class=\"hljs-subst\">${level}\u003C/span> skips levels`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            lastLevel = level;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">valid\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">message\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? errors[\u003Cspan class=\"hljs-number\">0\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownFormValidator\u003C/span> = validator;\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dynamic-input-processing-system\">Dynamic Input Processing System\u003C/h3>\n\u003Cp>Implementing real-time input processing and validation feedback:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- interactive-form-example.html - Example Markdown documentation form -->\u003C/span>\n\u003Cspan class=\"hljs-meta\"><!DOCTYPE \u003Cspan class=\"hljs-keyword\">html\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">html\u003C/span> \u003Cspan class=\"hljs-attr\">lang\u003C/span>=\u003Cspan class=\"hljs-string\">"en"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">charset\u003C/span>=\u003Cspan class=\"hljs-string\">"UTF-8"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"viewport"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"width=device-width, initial-scale=1.0"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>Interactive Markdown Documentation Form\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"form-validation-styles.css"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Example: Markdown Content Submission Form -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">form\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-content-form"\u003C/span> \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'{"crossField":[{"type":"match","field1":"email","field2":"email_confirm","message":"Email addresses must match"}]}'\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-form"\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>Submit Markdown Content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"author-name"\u003C/span>>\u003C/span>Author Name *\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"author-name"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"author"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"required"},{"rule":"minLength","params":"2"}]'\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"author-help"\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"author-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-help"\u003C/span>>\u003C/span>\n                Enter your full name as it should appear in the documentation.\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"author-email"\u003C/span>>\u003C/span>Email Address *\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"author-email"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"required"},{"rule":"email"}]'\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"email-confirm"\u003C/span>>\u003C/span>Confirm Email *\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"email-confirm"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"email_confirm"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"required"}]'\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"github-username"\u003C/span>>\u003C/span>GitHub Username\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"github-username"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"github"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"githubUsername"}]'\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"your-username"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-help"\u003C/span>>\u003C/span>\n                Optional: Link your GitHub profile for attribution.\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"content-title"\u003C/span>>\u003C/span>Content Title *\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"content-title"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"title"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"required"},{"rule":"minLength","params":"10"},{"rule":"maxLength","params":"100"}]'\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Enter a descriptive title"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"content-category"\u003C/span>>\u003C/span>Category *\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"content-category"\u003C/span> \n                    \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"category"\u003C/span> \n                    \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"required"}]'\u003C/span>\n                    \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>Select a category...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"tutorial"\u003C/span>>\u003C/span>Tutorial\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"guide"\u003C/span>>\u003C/span>Guide\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"reference"\u003C/span>>\u003C/span>Reference\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"example"\u003C/span>>\u003C/span>Example\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"content-tags"\u003C/span>>\u003C/span>Tags (comma-separated)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"content-tags"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"tags"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"pattern","params":"^[a-zA-Z0-9,-\\\\s]+$"}]'\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control"\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown, tutorial, documentation"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-content"\u003C/span>>\u003C/span>Markdown Content *\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">textarea\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-content"\u003C/span> \n                      \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"content"\u003C/span> \n                      \u003Cspan class=\"hljs-attr\">data-validate\u003C/span>=\u003Cspan class=\"hljs-string\">'[{"rule":"required"},{"rule":"minLength","params":"100"},{"rule":"markdown"},{"rule":"markdownHeadings"}]'\u003C/span>\n                      \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-control markdown-editor"\u003C/span>\n                      \u003Cspan class=\"hljs-attr\">rows\u003C/span>=\u003Cspan class=\"hljs-string\">"20"\u003C/span>\n                      \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Enter your Markdown content here...\n\n# Example Heading\n\nYour content goes here with proper **formatting** and [links](http://example.com).\n\n## Code Examples\n\n```javascript\nconsole.log('Hello, world!');\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Remember to use proper Markdown syntax!">\u003C/textarea>\u003Cbr>            \u003Cdiv class=\"form-help\">\u003Cbr>                Write your content in Markdown format. The validator will check for syntax issues and heading structure.\u003Cbr>            \u003C/div>\u003Cbr>            \u003Cdiv class=\"markdown-preview\" id=\"markdown-preview\">\u003Cbr>                \u003Ch3>Preview\u003C/h3>\u003Cbr>                \u003Cdiv class=\"preview-content\" id=\"preview-content\">\u003Cbr>                    \u003Cp>\u003Cem>Preview will appear here as you type...\u003C/em>\u003C/p>\u003Cbr>                \u003C/div>\u003Cbr>            \u003C/div>\u003Cbr>        \u003C/div>\u003C/p>\n\u003Cpre>\u003Ccode>    <div class="form-group">\n        <label for="code-language">Primary Code Language</label>\n        <select id="code-language" name="code_language" class="form-control">\n            <option value="">Not applicable</option>\n            <option value="javascript">JavaScript</option>\n            <option value="python">Python</option>\n            <option value="java">Java</option>\n            <option value="go">Go</option>\n            <option value="rust">Rust</option>\n            <option value="typescript">TypeScript</option>\n        </select>\n    </div>\n    \n    <div class="form-group">\n        <label for="code-example">Code Example</label>\n        <textarea id="code-example" \n                  name="code_example" \n                  data-validate='[{"rule":"codeBlock","params":"javascript"}]'\n                  class="form-control code-editor"\n                  rows="10"\n                  placeholder="// Optional: Provide a standalone code example\n\u003C/code>\u003C/pre>\u003Cp>function exampleFunction() {\u003Cbr>    return 'Hello, Markdown!';\u003Cbr>}">\u003C/textarea>\u003Cbr>        \u003C/div>\u003C/p>\n\u003Cpre>\u003Ccode>    <div class="form-group checkbox-group">\n        <label class="checkbox-label">\n            <input type="checkbox" \n                   id="accept-license" \n                   name="accept_license" \n                   data-validate='[{"rule":"required"}]'\n                   value="1">\n            <span class="checkmark"></span>\n            I agree to license this content under CC BY-SA 4.0 *\n        </label>\n    </div>\n    \n    <div class="form-group checkbox-group">\n        <label class="checkbox-label">\n            <input type="checkbox" \n                   id="original-content" \n                   name="original_content" \n                   data-validate='[{"rule":"required"}]'\n                   value="1">\n            <span class="checkmark"></span>\n            I confirm this is my original work or properly attributed *\n        </label>\n    </div>\n    \n    <div class="form-actions">\n        <button type="button" id="preview-btn" class="btn btn-secondary">\n            Preview Content\n        </button>\n        <button type="submit" class="btn btn-primary">\n            Submit Content\n        </button>\n        <button type="reset" class="btn btn-outline">\n            Reset Form\n        </button>\n    </div>\n    \n    <div id="validation-summary" class="validation-summary" role="alert" aria-live="polite">\n        <!-- Validation summary will appear here -->\n    </div>\n    \n</form>\n\n<!-- Advanced Form: Documentation Configuration -->\n<form id="doc-config-form" data-validate class="markdown-form config-form">\n    \n    <h2>Documentation Configuration</h2>\n    \n    <div class="form-group">\n        <label for="site-title">Site Title *</label>\n        <input type="text" \n               id="site-title" \n               name="site_title" \n               data-validate='[{"rule":"required"},{"rule":"maxLength","params":"50"}]'\n               class="form-control">\n    </div>\n    \n    <div class="form-group">\n        <label for="base-url">Base URL *</label>\n        <input type="url" \n               id="base-url" \n               name="base_url" \n               data-validate='[{"rule":"required"},{"rule":"url"}]'\n               class="form-control"\n               placeholder="https://docs.example.com">\n    </div>\n    \n    <div class="form-group">\n        <label for="theme-config">Theme Configuration (JSON)</label>\n        <textarea id="theme-config" \n                  name="theme_config" \n                  data-validate='[{"rule":"codeBlock","params":"json"}]'\n                  class="form-control code-editor"\n                  rows="15"\n                  placeholder='{\n\u003C/code>\u003C/pre>\u003Cp>  "colors": {\u003Cbr>    "primary": "#007cba",\u003Cbr>    "secondary": "#6c757d"\u003Cbr>  },\u003Cbr>  "fonts": {\u003Cbr>    "body": "Inter, sans-serif",\u003Cbr>    "heading": "Poppins, sans-serif",\u003Cbr>    "code": "JetBrains Mono, monospace"\u003Cbr>  },\u003Cbr>  "layout": {\u003Cbr>    "sidebar_width": 280,\u003Cbr>    "max_content_width": 1200\u003Cbr>  }\u003Cbr>}'>\u003C/textarea>\u003Cbr>            \u003Cdiv class=\"form-help\">\u003Cbr>                Configure theme settings in JSON format. Invalid JSON will be highlighted.\u003Cbr>            \u003C/div>\u003Cbr>        \u003C/div>\u003C/p>\n\u003Cpre>\u003Ccode>    <div class="form-group">\n        <label for="build-command">Build Command</label>\n        <input type="text" \n               id="build-command" \n               name="build_command" \n               class="form-control"\n               placeholder="npm run build"\n               value="npm run build">\n    </div>\n    \n    <div class="form-group">\n        <fieldset>\n            <legend>Features</legend>\n            <div class="checkbox-group">\n                <label class="checkbox-label">\n                    <input type="checkbox" name="features" value="search">\n                    <span class="checkmark"></span>\n                    Enable Search\n                </label>\n            </div>\n            <div class="checkbox-group">\n                <label class="checkbox-label">\n                    <input type="checkbox" name="features" value="analytics">\n                    <span class="checkmark"></span>\n                    Analytics Integration\n                </label>\n            </div>\n            <div class="checkbox-group">\n                <label class="checkbox-label">\n                    <input type="checkbox" name="features" value="comments">\n                    <span class="checkmark"></span>\n                    Comment System\n                </label>\n            </div>\n        </fieldset>\n    </div>\n    \n    <div class="form-actions">\n        <button type="submit" class="btn btn-primary">\n            Save Configuration\n        </button>\n        <button type="button" id="validate-config" class="btn btn-secondary">\n            Validate Only\n        </button>\n    </div>\n    \n</form>\n\n<script src="form-validator.js"></script>\n<script src="markdown-preview.js"></script>\n<script>\n    // Enhanced form interaction\n    document.addEventListener('DOMContentLoaded', () => {\n        // Setup markdown preview\n        const markdownContent = document.getElementById('markdown-content');\n        const previewContent = document.getElementById('preview-content');\n        \n        if (markdownContent && previewContent) {\n            markdownContent.addEventListener('input', debounce(() => {\n                updateMarkdownPreview(markdownContent.value, previewContent);\n            }, 500));\n        }\n        \n        // Preview button handler\n        document.getElementById('preview-btn')?.addEventListener('click', () => {\n            const content = markdownContent.value;\n            if (content.trim()) {\n                openMarkdownPreview(content);\n            }\n        });\n        \n        // Config validation button\n        document.getElementById('validate-config')?.addEventListener('click', () => {\n            window.markdownFormValidator.validateForm('doc-config-form');\n        });\n    });\n    \n    function updateMarkdownPreview(markdown, container) {\n        // Simple markdown to HTML conversion (in real implementation, use a proper parser)\n        let html = markdown\n            .replace(/^# (.+)$/gm, '<h1>$1</h1>')\n            .replace(/^## (.+)$/gm, '<h2>$1</h2>')\n            .replace(/^### (.+)$/gm, '<h3>$1</h3>')\n            .replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>')\n            .replace(/\\*(.+?)\\*/g, '<em>$1</em>')\n            .replace(/\\[(.+?)\\]\\((.+?)\\)/g, '<a href="$2" target="_blank">$1</a>')\n            .replace(/```([\\s\\S]*?)```/g, '<pre><code>$1</code></pre>')\n            .replace(/`(.+?)`/g, '<code>$1</code>')\n            .replace(/\\n/g, '<br>');\n            \n        container.innerHTML = html || '<p><em>Preview will appear here as you type...</em></p>';\n    }\n    \n    function openMarkdownPreview(content) {\n        const previewWindow = window.open('', '_blank', 'width=800,height=600');\n        previewWindow.document.write(`\n            <!DOCTYPE html>\n            <html>\n            <head>\n                <title>Markdown Preview</title>\n                <style>\n                    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 2rem; }\n                    code { background: #f6f8fa; padding: 0.2em 0.4em; border-radius: 3px; }\n                    pre { background: #f6f8fa; padding: 1rem; border-radius: 6px; overflow: auto; }\n                    blockquote { border-left: 4px solid #dfe2e5; margin: 0; padding-left: 1rem; color: #666; }\n                </style>\n            </head>\n            <body>\n                ${updateMarkdownPreview(content, { innerHTML: '' }).innerHTML || content}\n            </body>\n            </html>\n        `);\n    }\n    \n    function debounce(func, wait) {\n        let timeout;\n        return function executedFunction(...args) {\n            const later = () => {\n                clearTimeout(timeout);\n                func(...args);\n            };\n            clearTimeout(timeout);\n            timeout = setTimeout(later, wait);\n        };\n    }\n</script>\n\u003C/code>\u003C/pre>\u003C/body>\n\u003C/html>\n```\n\n\u003Ch2 id=\"advanced-input-processing-techniques\">Advanced Input Processing Techniques\u003C/h2>\n\u003Ch3 id=\"real-time-content-analysis\">Real-Time Content Analysis\u003C/h3>\n\u003Cp>Implementing sophisticated content analysis and validation for Markdown input:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// content-analyzer.js - Advanced content analysis for Markdown forms\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownContentAnalyzer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableReadabilityAnalysis\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableSEOAnalysis\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableAccessibilityCheck\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableContentQualityMetrics\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">realTimeAnalysis\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">analysisDebounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisCache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisHistory\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">qualityThresholds\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">readability\u003C/span>: \u003Cspan class=\"hljs-number\">60\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">seo\u003C/span>: \u003Cspan class=\"hljs-number\">70\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">accessibility\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">overall\u003C/span>: \u003Cspan class=\"hljs-number\">70\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">analyzeContent\u003C/span>(\u003Cspan class=\"hljs-params\">content, context = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!content || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> content !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createEmptyAnalysis\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cacheKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(content, context);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(cacheKey)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(cacheKey);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = {\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">content\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">length\u003C/span>: content.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">wordCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">countWords\u003C/span>(content),\n                \u003Cspan class=\"hljs-attr\">paragraphCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">countParagraphs\u003C/span>(content),\n                \u003Cspan class=\"hljs-attr\">sentenceCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">countSentences\u003C/span>(content)\n            },\n            \u003Cspan class=\"hljs-attr\">structure\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeStructure\u003C/span>(content),\n            \u003Cspan class=\"hljs-attr\">readability\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableReadabilityAnalysis\u003C/span> ? \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeReadability\u003C/span>(content) : \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">seo\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSEOAnalysis\u003C/span> ? \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeSEO\u003C/span>(content, context) : \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">accessibility\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableAccessibilityCheck\u003C/span> ? \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeAccessibility\u003C/span>(content) : \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">quality\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeContentQuality\u003C/span>(content),\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate overall score\u003C/span>\n        analysis.\u003Cspan class=\"hljs-property\">overallScore\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateOverallScore\u003C/span>(analysis);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate issues and suggestions\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateContentFeedback\u003C/span>(analysis);\n        \n        \u003Cspan class=\"hljs-comment\">// Cache the result\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(cacheKey, analysis);\n        \n        \u003Cspan class=\"hljs-comment\">// Add to history\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisHistory\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">timestamp\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">contentLength\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">content\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">score\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">overallScore\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Keep history limited\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisHistory\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisHistory\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">analysisHistory\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">50\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> analysis;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeStructure\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> structure = {\n            \u003Cspan class=\"hljs-attr\">headings\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">codeBlocks\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">links\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">images\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">lists\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">tables\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Extract headings\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingMatches = content.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/gm\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> headingMatches) {\n            structure.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">level\u003C/span>: match[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: match[\u003Cspan class=\"hljs-number\">2\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">line\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getLineNumber\u003C/span>(content, match.\u003Cspan class=\"hljs-property\">index\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Extract code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlockMatches = content.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```(\\w+)?\\n([\\s\\S]*?)```/g\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> codeBlockMatches) {\n            structure.\u003Cspan class=\"hljs-property\">codeBlocks\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">language\u003C/span>: match[\u003Cspan class=\"hljs-number\">1\u003C/span>] || \u003Cspan class=\"hljs-string\">'plain'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">code\u003C/span>: match[\u003Cspan class=\"hljs-number\">2\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">line\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getLineNumber\u003C/span>(content, match.\u003Cspan class=\"hljs-property\">index\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Extract links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkMatches = content.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\(([^)]+)\\)/g\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> linkMatches) {\n            structure.\u003Cspan class=\"hljs-property\">links\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: match[\u003Cspan class=\"hljs-number\">1\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">url\u003C/span>: match[\u003Cspan class=\"hljs-number\">2\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">isExternal\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isExternalLink\u003C/span>(match[\u003Cspan class=\"hljs-number\">2\u003C/span>]),\n                \u003Cspan class=\"hljs-attr\">line\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getLineNumber\u003C/span>(content, match.\u003Cspan class=\"hljs-property\">index\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Extract images\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> imageMatches = content.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/!\\[([^\\]]*)\\]\\(([^)]+)\\)/g\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> imageMatches) {\n            structure.\u003Cspan class=\"hljs-property\">images\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">alt\u003C/span>: match[\u003Cspan class=\"hljs-number\">1\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">src\u003C/span>: match[\u003Cspan class=\"hljs-number\">2\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">line\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getLineNumber\u003C/span>(content, match.\u003Cspan class=\"hljs-property\">index\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> structure;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeReadability\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clean content for readability analysis\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cleanContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cleanContentForAnalysis\u003C/span>(content);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> words = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">countWords\u003C/span>(cleanContent);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sentences = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">countSentences\u003C/span>(cleanContent);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> syllables = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">countSyllables\u003C/span>(cleanContent);\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate Flesch Reading Ease\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fleschScore = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateFleschScore\u003C/span>(words, sentences, syllables);\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate Flesch-Kincaid Grade Level\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> gradeLevel = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateGradeLevel\u003C/span>(words, sentences, syllables);\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze sentence complexity\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sentenceAnalysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeSentenceComplexity\u003C/span>(cleanContent);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">fleschScore\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(fleschScore),\n            \u003Cspan class=\"hljs-attr\">gradeLevel\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(gradeLevel * \u003Cspan class=\"hljs-number\">10\u003C/span>) / \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">readingLevel\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getReadingLevel\u003C/span>(fleschScore),\n            \u003Cspan class=\"hljs-attr\">averageWordsPerSentence\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>((words / sentences) * \u003Cspan class=\"hljs-number\">10\u003C/span>) / \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">averageSyllablesPerWord\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>((syllables / words) * \u003Cspan class=\"hljs-number\">100\u003C/span>) / \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">sentenceComplexity\u003C/span>: sentenceAnalysis,\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateReadabilityRecommendations\u003C/span>(fleschScore, gradeLevel)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeSEO\u003C/span>(\u003Cspan class=\"hljs-params\">content, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = {\n            \u003Cspan class=\"hljs-attr\">titleOptimization\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTitleSEO\u003C/span>(content, context),\n            \u003Cspan class=\"hljs-attr\">headingStructure\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeHeadingSEO\u003C/span>(content),\n            \u003Cspan class=\"hljs-attr\">keywordDensity\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeKeywordDensity\u003C/span>(content, context.\u003Cspan class=\"hljs-property\">keywords\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">linkAnalysis\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeLinkSEO\u003C/span>(content),\n            \u003Cspan class=\"hljs-attr\">contentLength\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeContentLengthSEO\u003C/span>(content),\n            \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: []\n        };\n        \n        analysis.\u003Cspan class=\"hljs-property\">score\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateSEOScore\u003C/span>(analysis);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> analysis;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check image alt text\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> structure = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeStructure\u003C/span>(content);\n        structure.\u003Cspan class=\"hljs-property\">images\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">image, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!image.\u003Cspan class=\"hljs-property\">alt\u003C/span> || image.\u003Cspan class=\"hljs-property\">alt\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n                issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'missing_alt_text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">line\u003C/span>: image.\u003Cspan class=\"hljs-property\">line\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Image missing alt text for screen readers'\u003C/span>\n                });\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (image.\u003Cspan class=\"hljs-property\">alt\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">125\u003C/span>) {\n                suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'long_alt_text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">line\u003C/span>: image.\u003Cspan class=\"hljs-property\">line\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Alt text is quite long - consider shortening for better accessibility'\u003C/span>\n                });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check heading hierarchy\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> lastLevel = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        structure.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">heading, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (heading.\u003Cspan class=\"hljs-property\">level\u003C/span> > lastLevel + \u003Cspan class=\"hljs-number\">1\u003C/span> && lastLevel > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'heading_hierarchy'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">line\u003C/span>: heading.\u003Cspan class=\"hljs-property\">line\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Heading level \u003Cspan class=\"hljs-subst\">${heading.level}\u003C/span> skips levels (previous was \u003Cspan class=\"hljs-subst\">${lastLevel}\u003C/span>)`\u003C/span>\n                });\n            }\n            lastLevel = heading.\u003Cspan class=\"hljs-property\">level\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check link text\u003C/span>\n        structure.\u003Cspan class=\"hljs-property\">links\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">link, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkText = link.\u003Cspan class=\"hljs-property\">text\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> genericTerms = [\u003Cspan class=\"hljs-string\">'click here'\u003C/span>, \u003Cspan class=\"hljs-string\">'read more'\u003C/span>, \u003Cspan class=\"hljs-string\">'more'\u003C/span>, \u003Cspan class=\"hljs-string\">'here'\u003C/span>, \u003Cspan class=\"hljs-string\">'link'\u003C/span>];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (genericTerms.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">term\u003C/span> =>\u003C/span> linkText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(term))) {\n                suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'generic_link_text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">line\u003C/span>: link.\u003Cspan class=\"hljs-property\">line\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Consider using more descriptive link text'\u003C/span>\n                });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">score\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateAccessibilityScore\u003C/span>(issues, suggestions),\n            issues,\n            suggestions,\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">totalIssues\u003C/span>: issues.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">highSeverityIssues\u003C/span>: issues.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">i\u003C/span> =>\u003C/span> i.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'high'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">mediumSeverityIssues\u003C/span>: issues.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">i\u003C/span> =>\u003C/span> i.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'medium'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeContentQuality\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> quality = {\n            \u003Cspan class=\"hljs-attr\">metrics\u003C/span>: {},\n            \u003Cspan class=\"hljs-attr\">scores\u003C/span>: {},\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Content depth analysis\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> structure = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeStructure\u003C/span>(content);\n        quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">structuralDepth\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateStructuralDepth\u003C/span>(structure);\n        \n        \u003Cspan class=\"hljs-comment\">// Information density\u003C/span>\n        quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">informationDensity\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateInformationDensity\u003C/span>(content);\n        \n        \u003Cspan class=\"hljs-comment\">// Code-to-text ratio (important for technical documentation)\u003C/span>\n        quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">codeToTextRatio\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateCodeToTextRatio\u003C/span>(content, structure);\n        \n        \u003Cspan class=\"hljs-comment\">// Link diversity\u003C/span>\n        quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">linkDiversity\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateLinkDiversity\u003C/span>(structure.\u003Cspan class=\"hljs-property\">links\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Content freshness indicators\u003C/span>\n        quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">freshnessIndicators\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeFreshnessIndicators\u003C/span>(content);\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate individual scores\u003C/span>\n        quality.\u003Cspan class=\"hljs-property\">scores\u003C/span>.\u003Cspan class=\"hljs-property\">depth\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scoreStructuralDepth\u003C/span>(quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">structuralDepth\u003C/span>);\n        quality.\u003Cspan class=\"hljs-property\">scores\u003C/span>.\u003Cspan class=\"hljs-property\">density\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scoreInformationDensity\u003C/span>(quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">informationDensity\u003C/span>);\n        quality.\u003Cspan class=\"hljs-property\">scores\u003C/span>.\u003Cspan class=\"hljs-property\">balance\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scoreCodeToTextRatio\u003C/span>(quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">codeToTextRatio\u003C/span>);\n        quality.\u003Cspan class=\"hljs-property\">scores\u003C/span>.\u003Cspan class=\"hljs-property\">engagement\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scoreLinkDiversity\u003C/span>(quality.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">linkDiversity\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Overall quality score\u003C/span>\n        quality.\u003Cspan class=\"hljs-property\">overallScore\u003C/span> = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(quality.\u003Cspan class=\"hljs-property\">scores\u003C/span>).\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, score\u003C/span>) =>\u003C/span> sum + score, \u003Cspan class=\"hljs-number\">0\u003C/span>) / \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(quality.\u003Cspan class=\"hljs-property\">scores\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> quality;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateContentFeedback\u003C/span>(\u003Cspan class=\"hljs-params\">analysis\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Content length feedback\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">content\u003C/span>.\u003Cspan class=\"hljs-property\">wordCount\u003C/span> < \u003Cspan class=\"hljs-number\">300\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'content_length'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Content appears quite short. Consider expanding with more details or examples.'\u003C/span>\n            });\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">content\u003C/span>.\u003Cspan class=\"hljs-property\">wordCount\u003C/span> > \u003Cspan class=\"hljs-number\">3000\u003C/span>) {\n            suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'content_length'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Content is quite lengthy. Consider breaking into multiple sections or pages.'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Heading structure feedback\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">structure\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'structure'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'No headings found. Adding headings improves readability and navigation.'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Code examples feedback\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">structure\u003C/span>.\u003Cspan class=\"hljs-property\">codeBlocks\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span> && analysis.\u003Cspan class=\"hljs-property\">content\u003C/span>.\u003Cspan class=\"hljs-property\">wordCount\u003C/span> > \u003Cspan class=\"hljs-number\">500\u003C/span>) {\n            suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'engagement'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Consider adding code examples to illustrate concepts.'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Link analysis feedback\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> externalLinks = analysis.\u003Cspan class=\"hljs-property\">structure\u003C/span>.\u003Cspan class=\"hljs-property\">links\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> link.\u003Cspan class=\"hljs-property\">isExternal\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (externalLinks.\u003Cspan class=\"hljs-property\">length\u003C/span> > analysis.\u003Cspan class=\"hljs-property\">structure\u003C/span>.\u003Cspan class=\"hljs-property\">links\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> * \u003Cspan class=\"hljs-number\">0.8\u003C/span>) {\n            suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'links'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'High ratio of external links. Consider adding internal cross-references.'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Readability feedback\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">readability\u003C/span> && analysis.\u003Cspan class=\"hljs-property\">readability\u003C/span>.\u003Cspan class=\"hljs-property\">fleschScore\u003C/span> < \u003Cspan class=\"hljs-number\">30\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'readability'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Content may be difficult to read. Consider shorter sentences and simpler words.'\u003C/span>\n            });\n        }\n        \n        analysis.\u003Cspan class=\"hljs-property\">issues\u003C/span> = issues;\n        analysis.\u003Cspan class=\"hljs-property\">suggestions\u003C/span> = suggestions;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Utility methods for analysis calculations\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">countWords\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">word\u003C/span> =>\u003C/span> word.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">countSentences\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[.!?]+/\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">sentence\u003C/span> =>\u003C/span> sentence.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">countParagraphs\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\n\\s*\\n/\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">para\u003C/span> =>\u003C/span> para.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">countSyllables\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> words = text.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[a-z]+/g\u003C/span>) || [];\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> words.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">total, word\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> syllables = word.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[aeiouy]+/g\u003C/span>) || [];\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (word.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'e'\u003C/span>)) syllables = syllables.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, -\u003Cspan class=\"hljs-number\">1\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> total + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, syllables.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateFleschScore\u003C/span>(\u003Cspan class=\"hljs-params\">words, sentences, syllables\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">206.835\u003C/span> - (\u003Cspan class=\"hljs-number\">1.015\u003C/span> * (words / sentences)) - (\u003Cspan class=\"hljs-number\">84.6\u003C/span> * (syllables / words));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateGradeLevel\u003C/span>(\u003Cspan class=\"hljs-params\">words, sentences, syllables\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\u003Cspan class=\"hljs-number\">0.39\u003C/span> * (words / sentences)) + (\u003Cspan class=\"hljs-number\">11.8\u003C/span> * (syllables / words)) - \u003Cspan class=\"hljs-number\">15.59\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getReadingLevel\u003C/span>(\u003Cspan class=\"hljs-params\">fleschScore\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fleschScore >= \u003Cspan class=\"hljs-number\">90\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Very Easy'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fleschScore >= \u003Cspan class=\"hljs-number\">80\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Easy'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fleschScore >= \u003Cspan class=\"hljs-number\">70\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Fairly Easy'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fleschScore >= \u003Cspan class=\"hljs-number\">60\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Standard'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fleschScore >= \u003Cspan class=\"hljs-number\">50\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Fairly Difficult'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fleschScore >= \u003Cspan class=\"hljs-number\">30\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Difficult'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Very Difficult'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cleanContentForAnalysis\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```[\\s\\S]*?```/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove code blocks\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/`[^`]+`/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove inline code\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\([^)]+\\)/g\u003C/span>, \u003Cspan class=\"hljs-string\">'$1'\u003C/span>) \u003Cspan class=\"hljs-comment\">// Extract link text\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/!\\[[^\\]]*\\]\\([^)]+\\)/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove images\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[#*_\\-+>]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove markdown formatting\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">' '\u003C/span>) \u003Cspan class=\"hljs-comment\">// Normalize whitespace\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(\u003Cspan class=\"hljs-params\">content, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> contextString = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(context);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${content.length}\u003C/span>-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.simpleHash(content + contextString)}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">simpleHash\u003C/span>(\u003Cspan class=\"hljs-params\">str\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> hash = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < str.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> char = str.\u003Cspan class=\"hljs-title function_\">charCodeAt\u003C/span>(i);\n            hash = ((hash << \u003Cspan class=\"hljs-number\">5\u003C/span>) - hash) + char;\n            hash = hash & hash; \u003Cspan class=\"hljs-comment\">// Convert to 32bit integer\u003C/span>\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(hash);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getLineNumber\u003C/span>(\u003Cspan class=\"hljs-params\">content, index\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, index).\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isExternalLink\u003C/span>(\u003Cspan class=\"hljs-params\">url\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> url.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'http'\u003C/span>) || url.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'//'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateOverallScore\u003C/span>(\u003Cspan class=\"hljs-params\">analysis\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scores = [];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">readability\u003C/span>) {\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">100\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, analysis.\u003Cspan class=\"hljs-property\">readability\u003C/span>.\u003Cspan class=\"hljs-property\">fleschScore\u003C/span>)));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">seo\u003C/span>) {\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">seo\u003C/span>.\u003Cspan class=\"hljs-property\">score\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">accessibility\u003C/span>) {\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">accessibility\u003C/span>.\u003Cspan class=\"hljs-property\">score\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">quality\u003C/span>) {\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">quality\u003C/span>.\u003Cspan class=\"hljs-property\">overallScore\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> scores.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \n            scores.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, score\u003C/span>) =>\u003C/span> sum + score, \u003Cspan class=\"hljs-number\">0\u003C/span>) / scores.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createEmptyAnalysis\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">content\u003C/span>: { \u003Cspan class=\"hljs-attr\">length\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">wordCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">paragraphCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">sentenceCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> },\n            \u003Cspan class=\"hljs-attr\">structure\u003C/span>: { \u003Cspan class=\"hljs-attr\">headings\u003C/span>: [], \u003Cspan class=\"hljs-attr\">codeBlocks\u003C/span>: [], \u003Cspan class=\"hljs-attr\">links\u003C/span>: [], \u003Cspan class=\"hljs-attr\">images\u003C/span>: [], \u003Cspan class=\"hljs-attr\">lists\u003C/span>: [], \u003Cspan class=\"hljs-attr\">tables\u003C/span>: [] },\n            \u003Cspan class=\"hljs-attr\">readability\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">seo\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">accessibility\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">quality\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">overallScore\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: []\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">analyzeInRealTime\u003C/span>(\u003Cspan class=\"hljs-params\">element, context = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">realTimeAnalysis\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = element.\u003Cspan class=\"hljs-property\">value\u003C/span> || element.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeContent\u003C/span>(content, context);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayAnalysisResults\u003C/span>(element, analysis);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> analysis;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displayAnalysisResults\u003C/span>(\u003Cspan class=\"hljs-params\">element, analysis\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create or update analysis display\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> analysisDisplay = element.\u003Cspan class=\"hljs-property\">nextElementSibling\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!analysisDisplay || !analysisDisplay.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'content-analysis'\u003C/span>)) {\n            analysisDisplay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            analysisDisplay.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'content-analysis'\u003C/span>;\n            element.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(analysisDisplay, element.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n        }\n        \n        analysisDisplay.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAnalysisHTML\u003C/span>(analysis);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAnalysisHTML\u003C/span>(\u003Cspan class=\"hljs-params\">analysis\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scoreClass = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getScoreClass\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">overallScore\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="analysis-summary">\n                <div class="score-indicator \u003Cspan class=\"hljs-subst\">${scoreClass}\u003C/span>">\n                    <span class="score">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.round(analysis.overallScore)}\u003C/span></span>\n                    <span class="label">Overall Score</span>\n                </div>\n                \n                <div class="metrics">\n                    <div class="metric">\n                        <span class="value">\u003Cspan class=\"hljs-subst\">${analysis.content.wordCount}\u003C/span></span>\n                        <span class="label">Words</span>\n                    </div>\n                    <div class="metric">\n                        <span class="value">\u003Cspan class=\"hljs-subst\">${analysis.structure.headings.length}\u003C/span></span>\n                        <span class="label">Headings</span>\n                    </div>\n                    <div class="metric">\n                        <span class="value">\u003Cspan class=\"hljs-subst\">${analysis.structure.links.length}\u003C/span></span>\n                        <span class="label">Links</span>\n                    </div>\n                </div>\n            </div>\n            \n            \u003Cspan class=\"hljs-subst\">${analysis.readability ? \u003Cspan class=\"hljs-string\">`\n                <div class="readability-info">\n                    <strong>Readability:</strong> \u003Cspan class=\"hljs-subst\">${analysis.readability.readingLevel}\u003C/span> \n                    (Grade \u003Cspan class=\"hljs-subst\">${analysis.readability.gradeLevel}\u003C/span>)\n                </div>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            \n            \u003Cspan class=\"hljs-subst\">${analysis.issues.length > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n                <div class="issues">\n                    <h4>Issues to Address:</h4>\n                    <ul>\n                        \u003Cspan class=\"hljs-subst\">${analysis.issues.map(issue => \u003Cspan class=\"hljs-string\">`\n                            <li class="issue \u003Cspan class=\"hljs-subst\">${issue.severity}\u003C/span>">\u003Cspan class=\"hljs-subst\">${issue.message}\u003C/span></li>\n                        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </ul>\n                </div>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            \n            \u003Cspan class=\"hljs-subst\">${analysis.suggestions.length > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n                <div class="suggestions">\n                    <h4>Suggestions:</h4>\n                    <ul>\n                        \u003Cspan class=\"hljs-subst\">${analysis.suggestions.map(suggestion => \u003Cspan class=\"hljs-string\">`\n                            <li class="suggestion">\u003Cspan class=\"hljs-subst\">${suggestion.message}\u003C/span></li>\n                        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </ul>\n                </div>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getScoreClass\u003C/span>(\u003Cspan class=\"hljs-params\">score\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (score >= \u003Cspan class=\"hljs-number\">80\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'excellent'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (score >= \u003Cspan class=\"hljs-number\">70\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'good'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (score >= \u003Cspan class=\"hljs-number\">60\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'fair'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'needs-improvement'\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize content analyzer with form validator\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> contentAnalyzer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownContentAnalyzer\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">realTimeAnalysis\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">analysisDebounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">1500\u003C/span>\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Setup real-time analysis for markdown content areas\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownFields = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.markdown-editor'\u003C/span>);\n    \n    markdownFields.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> analysisTimeout;\n        \n        field.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(analysisTimeout);\n            analysisTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-keyword\">async\u003C/span> () => {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> context = {\n                    \u003Cspan class=\"hljs-attr\">keywords\u003C/span>: field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-keywords'\u003C/span>)?.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>) || [],\n                    \u003Cspan class=\"hljs-attr\">category\u003C/span>: field.\u003Cspan class=\"hljs-property\">form\u003C/span>?.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'[name="category"]'\u003C/span>)?.\u003Cspan class=\"hljs-property\">value\u003C/span>\n                };\n                \n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> contentAnalyzer.\u003Cspan class=\"hljs-title function_\">analyzeInRealTime\u003C/span>(field, context);\n            }, contentAnalyzer.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">analysisDebounceDelay\u003C/span>);\n        });\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownContentAnalyzer\u003C/span> = contentAnalyzer;\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Advanced form validation and input handling integrates seamlessly with modern documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automated-testing-validation-complete-guide\">automated content validation systems\u003C/a>, form validation ensures that user-submitted content meets quality standards and integrates properly with existing documentation structures while maintaining consistency across collaborative editing environments.\u003C/p>\n\u003Cp>For comprehensive content management, form validation complements \u003Ca href=\"/blog/markdown-workflow-automation-and-productivity-complete-guide\">workflow automation systems\u003C/a> by providing structured data collection interfaces that feed into automated processing pipelines, enabling seamless content creation workflows that maintain quality while reducing manual oversight requirements.\u003C/p>\n\u003Cp>When building interactive documentation platforms, form validation works effectively with \u003Ca href=\"/blog/markdown-dynamic-content-generation-complete-guide\">dynamic content generation systems\u003C/a> by providing validated input data that can be safely processed and integrated into generated content, ensuring that user contributions enhance rather than compromise documentation quality and consistency.\u003C/p>\n\u003Ch2 id=\"advanced-validation-strategies\">Advanced Validation Strategies\u003C/h2>\n\u003Ch3 id=\"multi-step-form-validation\">Multi-Step Form Validation\u003C/h3>\n\u003Cp>Implementing progressive validation for complex documentation workflows:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// multi-step-validator.js - Advanced multi-step form validation system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MultiStepFormValidator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">formElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span> = formElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">saveProgress\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateStepOnNext\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">allowStepSkipping\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progressIndicator\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">autoSaveInterval\u003C/span>: \u003Cspan class=\"hljs-number\">30000\u003C/span>, \u003Cspan class=\"hljs-comment\">// 30 seconds\u003C/span>\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">stepData\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationHistory\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveTimer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseFormSteps\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupProgressIndicator\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupStepNavigation\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAutoSave\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadSavedProgress\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Show first step\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseFormSteps\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stepElements = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-step]'\u003C/span>);\n        \n        stepElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">element, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> stepData = {\n                \u003Cspan class=\"hljs-attr\">element\u003C/span>: element,\n                \u003Cspan class=\"hljs-attr\">index\u003C/span>: index,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-step-title'\u003C/span>) || \u003Cspan class=\"hljs-string\">`Step \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-step-description'\u003C/span>) || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">required\u003C/span>: element.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-step-required'\u003C/span>),\n                \u003Cspan class=\"hljs-attr\">fields\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(element.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-validate]'\u003C/span>)),\n                \u003Cspan class=\"hljs-attr\">validationRules\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseStepValidationRules\u003C/span>(element),\n                \u003Cspan class=\"hljs-attr\">isValid\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">isCompleted\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n            };\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(stepData);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Initialized \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.steps.length}\u003C/span> form steps`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseStepValidationRules\u003C/span>(\u003Cspan class=\"hljs-params\">stepElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rules = {\n            \u003Cspan class=\"hljs-attr\">requiredFields\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">customValidations\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">dependencies\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Parse step-level validation rules\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationData = stepElement.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-step-validation'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validationData) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsed = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(validationData);\n                \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">assign\u003C/span>(rules, parsed);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to parse step validation rules:'\u003C/span>, error);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Identify required fields\u003C/span>\n        rules.\u003Cspan class=\"hljs-property\">requiredFields\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(stepElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[required], [data-validate*="required"]'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> field.\u003Cspan class=\"hljs-property\">name\u003C/span> || field.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rules;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupProgressIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">progressIndicator\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        progressContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'form-progress'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressBar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        progressBar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'progress-bar'\u003C/span>;\n        progressBar.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="progress-fill" style="width: 0%"></div>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stepIndicators = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        stepIndicators.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'step-indicators'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">step, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'step-indicator'\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-step'\u003C/span>, index);\n            indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                <div class="step-number">\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span></div>\n                <div class="step-title">\u003Cspan class=\"hljs-subst\">${step.title}\u003C/span></div>\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                indicator.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            }\n            \n            stepIndicators.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n        });\n        \n        progressContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(progressBar);\n        progressContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(stepIndicators);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(progressContainer, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressBar\u003C/span> = progressBar.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.progress-fill'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">stepIndicators\u003C/span> = stepIndicators;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupStepNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create navigation buttons\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> navContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        navContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'step-navigation'\u003C/span>;\n        \n        navContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <button type="button" class="btn btn-secondary" id="prev-step">\n                Previous\n            </button>\n            <button type="button" class="btn btn-primary" id="next-step">\n                Next\n            </button>\n            <button type="submit" class="btn btn-success" id="submit-form" style="display: none;">\n                Submit\n            </button>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(navContainer);\n        \n        \u003Cspan class=\"hljs-comment\">// Setup event listeners\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">prevButton\u003C/span> = navContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#prev-step'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">nextButton\u003C/span> = navContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#next-step'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">submitButton\u003C/span> = navContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#submit-form'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">prevButton\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToPreviousStep\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">nextButton\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToNextStep\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Handle form submission\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'submit'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleFormSubmission\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateNavigationButtons\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAutoSave\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">saveProgress\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveTimer\u003C/span> = \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveProgress\u003C/span>();\n        }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveInterval\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Save on form field changes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveProgress\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">2000\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(\u003Cspan class=\"hljs-params\">stepIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (stepIndex < \u003Cspan class=\"hljs-number\">0\u003C/span> || stepIndex >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Hide all steps\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">step\u003C/span> =>\u003C/span> {\n            step.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            step.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Show current step\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentStep = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>[stepIndex];\n        currentStep.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n        currentStep.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> = stepIndex;\n        \n        \u003Cspan class=\"hljs-comment\">// Update progress indicator\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateProgressIndicator\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateNavigationButtons\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Focus first field in step\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstField = currentStep.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'input, textarea, select'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstField) {\n            firstField.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Trigger step change event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'stepChange'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: {\n                stepIndex,\n                \u003Cspan class=\"hljs-attr\">step\u003C/span>: currentStep,\n                \u003Cspan class=\"hljs-attr\">direction\u003C/span>: stepIndex > (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">previousStep\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>) ? \u003Cspan class=\"hljs-string\">'forward'\u003C/span> : \u003Cspan class=\"hljs-string\">'backward'\u003C/span>\n            }\n        }));\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">previousStep\u003C/span> = stepIndex;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">goToNextStep\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">validateStepOnNext\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isValid = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateCurrentStep\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isValid) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">goToPreviousStep\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateCurrentStep\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> step = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>[\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationResults = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Validate all fields in current step\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> field \u003Cspan class=\"hljs-keyword\">of\u003C/span> step.\u003Cspan class=\"hljs-property\">fields\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownFormValidator\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownFormValidator\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(field, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>);\n                validationResults.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(result);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Run step-specific validations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stepValidationResult = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">runStepValidations\u003C/span>(step);\n        validationResults.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(stepValidationResult);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isValid = validationResults.\u003Cspan class=\"hljs-title function_\">every\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> result.\u003Cspan class=\"hljs-property\">valid\u003C/span>);\n        step.\u003Cspan class=\"hljs-property\">isValid\u003C/span> = isValid;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isValid) {\n            step.\u003Cspan class=\"hljs-property\">isCompleted\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">markStepAsCompleted\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">markStepAsIncomplete\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> isValid;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">runStepValidations\u003C/span>(\u003Cspan class=\"hljs-params\">step\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationResult = { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>, \u003Cspan class=\"hljs-attr\">errors\u003C/span>: [] };\n        \n        \u003Cspan class=\"hljs-comment\">// Check required fields\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName \u003Cspan class=\"hljs-keyword\">of\u003C/span> step.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">requiredFields\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> field = step.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span>"]`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(field);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isEmpty\u003C/span>(value)) {\n                    validationResult.\u003Cspan class=\"hljs-property\">valid\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                    validationResult.\u003Cspan class=\"hljs-property\">errors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">field\u003C/span>: fieldName,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span> is required`\u003C/span>\n                    });\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Run custom validations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> customValidation \u003Cspan class=\"hljs-keyword\">of\u003C/span> step.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">customValidations\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">runCustomValidation\u003C/span>(customValidation, step);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!result.\u003Cspan class=\"hljs-property\">valid\u003C/span>) {\n                    validationResult.\u003Cspan class=\"hljs-property\">valid\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                    validationResult.\u003Cspan class=\"hljs-property\">errors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...result.\u003Cspan class=\"hljs-property\">errors\u003C/span>);\n                }\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Custom validation error:'\u003C/span>, error);\n                validationResult.\u003Cspan class=\"hljs-property\">valid\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                validationResult.\u003Cspan class=\"hljs-property\">errors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Validation failed due to internal error'\u003C/span>\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> validationResult;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">runCustomValidation\u003C/span>(\u003Cspan class=\"hljs-params\">validation, step\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Example custom validations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (validation.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'markdown_content_quality'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateMarkdownQuality\u003C/span>(validation, step);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'file_upload_requirements'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateFileUploads\u003C/span>(validation, step);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'content_uniqueness'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateContentUniqueness\u003C/span>(validation, step);\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>, \u003Cspan class=\"hljs-attr\">errors\u003C/span>: [] };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateMarkdownQuality\u003C/span>(\u003Cspan class=\"hljs-params\">validation, step\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownField = step.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.markdown-editor'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!markdownField) \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>, \u003Cspan class=\"hljs-attr\">errors\u003C/span>: [] };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = markdownField.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check minimum content requirements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wordCount = content.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (wordCount < (validation.\u003Cspan class=\"hljs-property\">minWords\u003C/span> || \u003Cspan class=\"hljs-number\">100\u003C/span>)) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">field\u003C/span>: markdownField.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Content must be at least \u003Cspan class=\"hljs-subst\">${validation.minWords || \u003Cspan class=\"hljs-number\">100\u003C/span>}\u003C/span> words`\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for required elements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validation.\u003Cspan class=\"hljs-property\">requireHeadings\u003C/span> && !content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#+\\s+/m\u003C/span>)) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">field\u003C/span>: markdownField.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Content must include at least one heading'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validation.\u003Cspan class=\"hljs-property\">requireCodeExamples\u003C/span> && !content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```[\\s\\S]*?```/\u003C/span>)) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">field\u003C/span>: markdownField.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Content should include code examples'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">valid\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>, errors };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateProgressIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressBar\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressPercentage = ((\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>) / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) * \u003Cspan class=\"hljs-number\">100\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressBar\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">width\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${progressPercentage}\u003C/span>%`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Update step indicators\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicators = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">stepIndicators\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.step-indicator'\u003C/span>);\n        indicators.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">indicator, index\u003C/span>) =>\u003C/span> {\n            indicator.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>, \u003Cspan class=\"hljs-string\">'completed'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index === \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>) {\n                indicator.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>[index].\u003Cspan class=\"hljs-property\">isCompleted\u003C/span>) {\n                indicator.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'completed'\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateNavigationButtons\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">prevButton\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'inline-block'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">nextButton\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> ? \u003Cspan class=\"hljs-string\">'inline-block'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">submitButton\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> === \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> ? \u003Cspan class=\"hljs-string\">'inline-block'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">markStepAsCompleted\u003C/span>(\u003Cspan class=\"hljs-params\">stepIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">stepIndicators\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-step="\u003Cspan class=\"hljs-subst\">${stepIndex}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n            indicator.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'completed'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">markStepAsIncomplete\u003C/span>(\u003Cspan class=\"hljs-params\">stepIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">stepIndicators\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-step="\u003Cspan class=\"hljs-subst\">${stepIndex}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n            indicator.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'completed'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">handleFormSubmission\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Validate all steps\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(i);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isValid = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateCurrentStep\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isValid && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>[i].\u003Cspan class=\"hljs-property\">required\u003C/span>) {\n                \u003Cspan class=\"hljs-title function_\">alert\u003C/span>(\u003Cspan class=\"hljs-string\">`Please complete Step \u003Cspan class=\"hljs-subst\">${i + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.steps[i].title}\u003C/span>`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Collect all form data\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectAllFormData\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Submit the form\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">submitForm\u003C/span>(formData);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">collectAllFormData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formData = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FormData\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = {};\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, value] \u003Cspan class=\"hljs-keyword\">of\u003C/span> formData.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (data[key]) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(data[key])) {\n                    data[key].\u003Cspan class=\"hljs-title function_\">push\u003C/span>(value);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    data[key] = [data[key], value];\n                }\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                data[key] = value;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> data;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">submitForm\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">action\u003C/span> || \u003Cspan class=\"hljs-string\">'/submit'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">method\u003C/span>: \u003Cspan class=\"hljs-string\">'POST'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">headers\u003C/span>: {\n                    \u003Cspan class=\"hljs-string\">'Content-Type'\u003C/span>: \u003Cspan class=\"hljs-string\">'application/json'\u003C/span>\n                },\n                \u003Cspan class=\"hljs-attr\">body\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(data)\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (response.\u003Cspan class=\"hljs-property\">ok\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSubmissionSuccess\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSavedProgress\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSubmissionError\u003C/span>(\u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">text\u003C/span>());\n            }\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSubmissionError\u003C/span>(error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSubmissionSuccess\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Show success message\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> successDiv = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        successDiv.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'submission-success'\u003C/span>;\n        successDiv.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <h3>✅ Form Submitted Successfully!</h3>\n            <p>Thank you for your submission. We'll review it shortly.</p>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(successDiv);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSubmissionError\u003C/span>(\u003Cspan class=\"hljs-params\">errorMessage\u003C/span>) {\n        \u003Cspan class=\"hljs-title function_\">alert\u003C/span>(\u003Cspan class=\"hljs-string\">`Submission failed: \u003Cspan class=\"hljs-subst\">${errorMessage}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">saveProgress\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">saveProgress\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressData = {\n            \u003Cspan class=\"hljs-attr\">currentStep\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">formData\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectAllFormData\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">completedSteps\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">step\u003C/span> =>\u003C/span> step.\u003Cspan class=\"hljs-property\">isCompleted\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">setItem\u003C/span>(\u003Cspan class=\"hljs-string\">`form-progress-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.form.id}\u003C/span>`\u003C/span>, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(progressData));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadSavedProgress\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">saveProgress\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> savedData = \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">getItem\u003C/span>(\u003Cspan class=\"hljs-string\">`form-progress-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.form.id}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!savedData) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressData = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(savedData);\n            \n            \u003Cspan class=\"hljs-comment\">// Restore form data\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [fieldName, value] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(progressData.\u003Cspan class=\"hljs-property\">formData\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> field = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span>"]`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span> || field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'radio'\u003C/span>) {\n                        field.\u003Cspan class=\"hljs-property\">checked\u003C/span> = field.\u003Cspan class=\"hljs-property\">value\u003C/span> === value;\n                    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                        field.\u003Cspan class=\"hljs-property\">value\u003C/span> = value;\n                    }\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Restore completed steps\u003C/span>\n            progressData.\u003Cspan class=\"hljs-property\">completedSteps\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">isCompleted, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>[index].\u003Cspan class=\"hljs-property\">isCompleted\u003C/span> = isCompleted;\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Go to saved step\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(progressData.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>);\n            \n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Restored form progress from'\u003C/span>, progressData.\u003Cspan class=\"hljs-property\">timestamp\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load saved progress:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearSavedProgress\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeItem\u003C/span>(\u003Cspan class=\"hljs-string\">`form-progress-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.form.id}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Utility methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">checked\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'radio'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> radioGroup = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> radio \u003Cspan class=\"hljs-keyword\">of\u003C/span> radioGroup) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (radio.\u003Cspan class=\"hljs-property\">checked\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> radio.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                }\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'file'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">files\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isEmpty\u003C/span>(\u003Cspan class=\"hljs-params\">value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value === \u003Cspan class=\"hljs-literal\">null\u003C/span> || value === \u003Cspan class=\"hljs-literal\">undefined\u003C/span> || \n               (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> && value.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span>) ||\n               (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(value) && value.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-params\">func, wait\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeout;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">...args\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n            timeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, args), wait);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">goToStep\u003C/span>(\u003Cspan class=\"hljs-params\">stepIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showStep\u003C/span>(stepIndex);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentStepData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>[\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFormProgress\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">currentStep\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">totalSteps\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">completedSteps\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">step\u003C/span> =>\u003C/span> step.\u003Cspan class=\"hljs-property\">isCompleted\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progressPercentage\u003C/span>: ((\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentStep\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>) / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">steps\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) * \u003Cspan class=\"hljs-number\">100\u003C/span>\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize multi-step forms\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> multiStepForms = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.multi-step-form'\u003C/span>);\n    \n    multiStepForms.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">form\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MultiStepFormValidator\u003C/span>(form, {\n            \u003Cspan class=\"hljs-attr\">saveProgress\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateStepOnNext\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progressIndicator\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-user-experience\">Accessibility and User Experience\u003C/h2>\n\u003Ch3 id=\"comprehensive-accessibility-implementation\">Comprehensive Accessibility Implementation\u003C/h3>\n\u003Cp>Ensuring form validation systems work for all users:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* form-validation-styles.css - Accessible form validation styles */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base form styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-form\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">800px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#d1d5db\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease, box-shadow \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">59\u003C/span>, \u003Cspan class=\"hljs-number\">130\u003C/span>, \u003Cspan class=\"hljs-number\">246\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Validation states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span>\u003Cspan class=\"hljs-selector-class\">.validation-error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc2626\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fef2f2\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span>\u003Cspan class=\"hljs-selector-class\">.validation-success\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#059669\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0fdf4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Error and success messages */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.field-error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fef2f2\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#fecaca\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dc2626\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.error-message\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc2626\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.field-warning\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fffbeb\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#fed7aa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f59e0b\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.warning-message\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d97706\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Labels and help text */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-help\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Button styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.btn\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid transparent;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn-primary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn-primary\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span>) {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#2563eb\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">1px\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn-secondary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn-success\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#059669\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: not-allowed;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">59\u003C/span>, \u003Cspan class=\"hljs-number\">130\u003C/span>, \u003Cspan class=\"hljs-number\">246\u003C/span>, \u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multi-step form progress */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.form-progress\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progress-bar\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progress-fill\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>, \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>, \u003Cspan class=\"hljs-number\">#1d4ed8\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-indicators\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#eff6ff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.completed\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#059669\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ecfdf5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">32px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">32px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">28px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> \u003Cspan class=\"hljs-selector-class\">.step-number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.completed\u003C/span> \u003Cspan class=\"hljs-selector-class\">.step-number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#059669\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.step-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Content analysis display */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-analysis\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f9fafb\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.analysis-summary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.score-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.score-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.excellent\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dcfce7\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#166534\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.score-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.good\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dbeafe\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1e40af\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.score-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.fair\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fef3c7\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#a16207\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.score-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.needs-improvement\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fee2e2\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#991b1b\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.score\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.metrics\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.metric\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.metric\u003C/span> \u003Cspan class=\"hljs-selector-class\">.value\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.metric\u003C/span> \u003Cspan class=\"hljs-selector-class\">.label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Issues and suggestions */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.issues\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.suggestions\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.issues\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.suggestions\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.issues\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.suggestions\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.issue\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.suggestion\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.issue\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"⚠️"\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.issue\u003C/span>\u003Cspan class=\"hljs-selector-class\">.high\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc2626\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.issue\u003C/span>\u003Cspan class=\"hljs-selector-class\">.medium\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d97706\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.suggestion\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"💡"\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Checkbox and radio styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.checkbox-group\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: flex-start;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.checkbox-label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: flex-start;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.checkbox-label\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span>]\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.checkbox-label\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"radio"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-form\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.step-indicators\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: auto;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.analysis-summary\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: stretch;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.metrics\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-around;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.btn\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.validation-error\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#d00\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fee\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.validation-success\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#0a0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#efe\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.progress-fill\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span>) {\n        \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.step-navigation\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.content-analysis\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: transparent;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.validation-error\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.validation-success\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus indicators for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.form-control\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.checkbox-label\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> + \u003Cspan class=\"hljs-selector-class\">.checkmark\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.step-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader only content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Animation for validation feedback */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> shake {\n    \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>); }\n    \u003Cspan class=\"hljs-number\">10%\u003C/span>, \u003Cspan class=\"hljs-number\">30%\u003C/span>, \u003Cspan class=\"hljs-number\">50%\u003C/span>, \u003Cspan class=\"hljs-number\">70%\u003C/span>, \u003Cspan class=\"hljs-number\">90%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(-\u003Cspan class=\"hljs-number\">5px\u003C/span>); }\n    \u003Cspan class=\"hljs-number\">20%\u003C/span>, \u003Cspan class=\"hljs-number\">40%\u003C/span>, \u003Cspan class=\"hljs-number\">60%\u003C/span>, \u003Cspan class=\"hljs-number\">80%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">5px\u003C/span>); }\n}\n\n\u003Cspan class=\"hljs-selector-class\">.validation-error\u003C/span>\u003Cspan class=\"hljs-selector-class\">.shake\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: shake \u003Cspan class=\"hljs-number\">0.5s\u003C/span> ease-in-out;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: transparent;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.btn\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: -\u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: -\u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid transparent;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid currentColor;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: spin \u003Cspan class=\"hljs-number\">1s\u003C/span> linear infinite;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> spin {\n    \u003Cspan class=\"hljs-number\">0%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">0deg\u003C/span>); }\n    \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">360deg\u003C/span>); }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown form validation and input handling systems provide the foundation for creating interactive, user-friendly documentation platforms that maintain data quality while delivering exceptional user experiences. By implementing comprehensive validation frameworks, real-time content analysis, and accessible form interfaces, technical teams can create documentation systems that not only inform but also effectively collect and validate user input across diverse use cases and user needs.\u003C/p>\n\u003Cp>The key to successful form validation implementation lies in balancing thorough validation with user experience, ensuring that validation systems guide users toward success rather than creating barriers to completion. Whether you're building simple feedback forms or complex multi-step content submission workflows, the validation techniques and accessibility considerations covered in this guide provide the foundation for creating robust, inclusive, and professional form experiences.\u003C/p>\n\u003Cp>Remember to implement progressive enhancement strategies that work without JavaScript, provide clear and actionable error messages, and continuously test your forms with real users across different devices and assistive technologies. With proper implementation of advanced form validation and input handling, your Markdown documentation can achieve the same level of interactivity and data quality that users expect from modern web applications while maintaining the simplicity and accessibility that makes Markdown such a powerful format for technical communication.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-form-validation-and-input-handling","Why Master Form Validation and Input Handling?",2,{"id":20,"text":21,"level":18},"foundation-validation-principles","Foundation Validation Principles",{"id":23,"text":24,"level":18},"advanced-input-processing-techniques","Advanced Input Processing Techniques",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"advanced-validation-strategies","Advanced Validation Strategies",{"id":32,"text":33,"level":18},"accessibility-and-user-experience","Accessibility and User Experience",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-form-creation-input-validation-complete-guide","Markdown Form Creation and Input Validation: Complete Guide for Interactive Documentation and User Input Systems","Master advanced Markdown form creation techniques for interactive documentation, user input validation, and dynamic content generation. Learn to build accessible forms, implement client-side validation, and create sophisticated input systems within Markdown-based platforms.","Advanced Markdown form creation and input validation capabilities enable sophisticated interactive documentation systems that combine the simplicity of Markdown with powerful user input…","2025-10-10","markdown forms, markdown input validation, interactive markdown, markdown user input, form creation markdown, markdown form validation, dynamic markdown forms, markdown form processing",23,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-custom-html-components-complete-guide","Markdown Custom HTML Components and Extensions: Complete Guide for Dynamic Content Creation and Interactive Documentation","Master Markdown custom HTML components, shortcodes, and extensions for interactive documentation, dynamic content generation, and enhanced reader experiences. Learn component development, templating, and integration strategies.","Advanced Markdown custom HTML components and extensions enable the creation of dynamic, interactive documentation that transcends traditional static content limitations through sophisticated…","2025-10-03","markdown custom components, markdown html extensions, markdown shortcodes, interactive markdown, dynamic markdown content, custom markdown elements, markdown templating, markdown component development",33,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":62},"markdown-progressive-web-app-documentation-complete-guide","Markdown Progressive Web App Documentation: Complete Guide for Interactive Documentation and Offline-First Content Systems","Master Progressive Web App documentation using Markdown for offline-first content delivery, interactive documentation systems, and service worker-powered content management. Learn PWA integration, caching strategies, and offline content optimization.","Progressive Web App documentation using Markdown creates powerful offline-first content delivery systems that provide native app-like experiences while maintaining the simplicity and flexibility…","2025-09-26","markdown pwa documentation, progressive web app markdown, offline markdown docs, service worker markdown, pwa documentation guide, interactive markdown docs, offline-first documentation, markdown app development",22,1792184943702]