[{"data":1,"prerenderedAt":59},["Reactive",2],{"blog-post-markdown-custom-html-components-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":34,"related":35},"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","Tutorial","Matthew Rathbone","markdown custom components, markdown html extensions, markdown shortcodes, interactive markdown, dynamic markdown content, custom markdown elements, markdown templating, markdown component development",33,"\u003Cp>Advanced Markdown custom HTML components and extensions enable the creation of dynamic, interactive documentation that transcends traditional static content limitations through sophisticated templating systems, reusable component architectures, and seamless integration with modern web technologies. By implementing custom component libraries, dynamic content generation systems, and intelligent templating frameworks, technical teams can build rich documentation experiences that provide interactive examples, dynamic data visualization, and enhanced reader engagement while maintaining the simplicity and portability that makes Markdown an effective content format.\u003C/p>\n\u003Ch2 id=\"why-implement-custom-markdown-components\">Why Implement Custom Markdown Components?\u003C/h2>\n\u003Cp>Professional custom component systems provide essential benefits for advanced documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Interactivity\u003C/strong>: Create interactive code examples, live demos, and dynamic content that engages readers\u003C/li>\n\u003Cli>\u003Cstrong>Consistent Design\u003C/strong>: Implement reusable components that maintain design consistency across large documentation sites\u003C/li>\n\u003Cli>\u003Cstrong>Dynamic Content\u003C/strong>: Generate content programmatically based on data sources, APIs, and real-time information\u003C/li>\n\u003Cli>\u003Cstrong>Extended Functionality\u003C/strong>: Add specialized features like tabs, accordions, callouts, and complex layouts\u003C/li>\n\u003Cli>\u003Cstrong>Integration Flexibility\u003C/strong>: Seamlessly blend static content with dynamic web applications and services\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-component-architecture\">Foundation Component Architecture\u003C/h2>\n\u003Ch3 id=\"basic-custom-component-system\">Basic Custom Component System\u003C/h3>\n\u003Cp>Understanding how to create and integrate custom HTML components within Markdown workflows:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-components.js - Custom component system for Markdown\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownComponentSystem\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\">components\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\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">prefix\u003C/span>: options.\u003Cspan class=\"hljs-property\">prefix\u003C/span> || \u003Cspan class=\"hljs-string\">'md'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">allowUnsafe\u003C/span>: options.\u003Cspan class=\"hljs-property\">allowUnsafe\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">templateCache\u003C/span>: options.\u003Cspan class=\"hljs-property\">templateCache\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">asyncComponents\u003C/span>: options.\u003Cspan class=\"hljs-property\">asyncComponents\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">templateCache\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\">renderer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span> = {};\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeBuiltinComponents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeBuiltinComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Register commonly used components\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'alert'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createAlertComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'tabs'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTabsComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'accordion'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createAccordionComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'code-example'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCodeExampleComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'api-reference'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createApiReferenceComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'feature-matrix'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createFeatureMatrixComponent\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name, component\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> component !== \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Component '\u003Cspan class=\"hljs-subst\">${name}\u003C/span>' must be a function`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, {\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: component,\n            name,\n            \u003Cspan class=\"hljs-attr\">registered\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`✅ Registered component: \u003Cspan class=\"hljs-subst\">${name}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">processContent\u003C/span>(\u003Cspan class=\"hljs-params\">markdown\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Find and process all custom components\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentRegex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\n            \u003Cspan class=\"hljs-string\">`<\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.prefix}\u003C/span>-(\\\\w+)([^>]*)>([\\\\s\\\\S]*?)</\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.prefix}\u003C/span>-\\\\1>`\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'g'\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> processedContent = markdown;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = componentRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(markdown)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> [fullMatch, componentName, attributes, content] = match;\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> replacement = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(\n                    componentName, \n                    attributes, \n                    content\n                );\n                processedContent = processedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(fullMatch, replacement);\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\">`Error rendering component '\u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>':`\u003C/span>, error);\n                \n                \u003Cspan class=\"hljs-comment\">// Replace with error placeholder\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorPlaceholder = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorPlaceholder\u003C/span>(componentName, error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n                processedContent = processedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(fullMatch, errorPlaceholder);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Process shortcode style components\u003C/span>\n        processedContent = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processShortcodes\u003C/span>(processedContent);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processedContent;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, attributesString, content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> component = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(componentName);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!component) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Unknown component: \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Parse attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseAttributes\u003C/span>(attributesString);\n        \n        \u003Cspan class=\"hljs-comment\">// Prepare component context\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentContext = {\n            attributes,\n            \u003Cspan class=\"hljs-attr\">content\u003C/span>: content.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">context\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>,\n            componentName,\n            \u003Cspan class=\"hljs-attr\">utils\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createComponentUtils\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Render component\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> component.\u003Cspan class=\"hljs-title function_\">render\u003C/span>(componentContext);\n        \n        \u003Cspan class=\"hljs-comment\">// Cache if enabled\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\">templateCache\u003C/span>) {\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>(componentName, attributes, content);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">templateCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(cacheKey, result);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">attributesString\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = {};\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!attributesString.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> attributes;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Parse attribute string using regex\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributeRegex = \u003Cspan class=\"hljs-regexp\">/([\\w-]+)=(?:"([^"]*)"|'([^']*)'|(\\S+))/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = attributeRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(attributesString)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> [, name, doubleQuoted, singleQuoted, unquoted] = match;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = doubleQuoted || singleQuoted || unquoted;\n            \n            \u003Cspan class=\"hljs-comment\">// Try to parse as JSON for complex values\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                attributes[name] = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(value);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n                attributes[name] = value;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> attributes;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">processShortcodes\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Process Hugo-style shortcodes: {{< component attr="value" >}}\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> shortcodeRegex = \u003Cspan class=\"hljs-regexp\">/\\{\\{\\<\\s*(\\w+)\\s*([^>]*?)\\s*\\>\\}\\}/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> processedContent = content;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = shortcodeRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(content)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> [fullMatch, componentName, attributesString] = match;\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> replacement = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(\n                    componentName, \n                    attributesString, \n                    \u003Cspan class=\"hljs-string\">''\u003C/span>\n                );\n                processedContent = processedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(fullMatch, replacement);\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\">`Error rendering shortcode '\u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>':`\u003C/span>, error);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorPlaceholder = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorPlaceholder\u003C/span>(componentName, error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n                processedContent = processedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(fullMatch, errorPlaceholder);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processedContent;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createComponentUtils\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">escapeHtml\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">text\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> div = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n                div.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n            },\n            \n            \u003Cspan class=\"hljs-attr\">generateId\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">prefix = \u003Cspan class=\"hljs-string\">'comp'\u003C/span>\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${prefix}\u003C/span>-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.random().toString(\u003Cspan class=\"hljs-number\">36\u003C/span>).substr(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>)}\u003C/span>`\u003C/span>;\n            },\n            \n            \u003Cspan class=\"hljs-attr\">parseMarkdown\u003C/span>: \u003Cspan class=\"hljs-keyword\">async\u003C/span> (markdown) => {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\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-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\u003C/span>(markdown);\n                }\n                \u003Cspan class=\"hljs-comment\">// Fallback to simple processing\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> markdown.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\*\\*(.*?)\\*\\*/g\u003C/span>, \u003Cspan class=\"hljs-string\">'<strong>$1</strong>'\u003C/span>)\n                              .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\*(.*?)\\*/g\u003C/span>, \u003Cspan class=\"hljs-string\">'<em>$1</em>'\u003C/span>);\n            },\n            \n            \u003Cspan class=\"hljs-attr\">loadTemplate\u003C/span>: \u003Cspan class=\"hljs-keyword\">async\u003C/span> (templateName) => {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">templateCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(templateName)) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">templateCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(templateName);\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Load template from file system or cache\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> template = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadTemplateFile\u003C/span>(templateName);\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\">templateCache\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">templateCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(templateName, template);\n                    }\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> template;\n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                    \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Failed to load template '\u003Cspan class=\"hljs-subst\">${templateName}\u003C/span>': \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n                }\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Built-in component implementations\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">createAlertComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content, utils }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { type = \u003Cspan class=\"hljs-string\">'info'\u003C/span>, title, dismissible = \u003Cspan class=\"hljs-literal\">false\u003C/span> } = attributes;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = utils.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-string\">'alert'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> alertClass = \u003Cspan class=\"hljs-string\">`alert alert-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> dismissButton = dismissible ? \n                \u003Cspan class=\"hljs-string\">`<button type="button" class="alert-dismiss" onclick="document.getElementById('\u003Cspan class=\"hljs-subst\">${id}\u003C/span>').remove()">×</button>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleHtml = title ? \u003Cspan class=\"hljs-string\">`<h4 class="alert-title">\u003Cspan class=\"hljs-subst\">${utils.escapeHtml(title)}\u003C/span></h4>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div id="\u003Cspan class=\"hljs-subst\">${id}\u003C/span>" class="\u003Cspan class=\"hljs-subst\">${alertClass}\u003C/span>" role="alert">\n                    \u003Cspan class=\"hljs-subst\">${dismissButton}\u003C/span>\n                    \u003Cspan class=\"hljs-subst\">${titleHtml}\u003C/span>\n                    <div class="alert-content">\u003Cspan class=\"hljs-subst\">${content}\u003C/span></div>\n                </div>\n            `\u003C/span>;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTabsComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content, utils }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { defaultTab = \u003Cspan class=\"hljs-number\">0\u003C/span> } = attributes;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabsId = utils.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-string\">'tabs'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Parse tab content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabSections = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^##\\s+(.+)$/m\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabs = [];\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i < tabSections.\u003Cspan class=\"hljs-property\">length\u003C/span>; i += \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n                tabs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: tabSections[i].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: tabSections[i + \u003Cspan class=\"hljs-number\">1\u003C/span>] ? tabSections[i + \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() : \u003Cspan class=\"hljs-string\">''\u003C/span>\n                });\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tabs.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'<div class="alert alert-warning">No tabs defined</div>'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Generate tab navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabNavigation = tabs.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tab, index\u003C/span>) =>\u003C/span> \n                \u003Cspan class=\"hljs-string\">`<button class="tab-button \u003Cspan class=\"hljs-subst\">${index === defaultTab ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" \n                         onclick="showTab('\u003Cspan class=\"hljs-subst\">${tabsId}\u003C/span>', \u003Cspan class=\"hljs-subst\">${index}\u003C/span>)" \n                         data-tab="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\n                    \u003Cspan class=\"hljs-subst\">${utils.escapeHtml(tab.title)}\u003C/span>\n                </button>`\u003C/span>\n            ).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Generate tab content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabContent = tabs.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tab, index\u003C/span>) =>\u003C/span> \n                \u003Cspan class=\"hljs-string\">`<div class="tab-content \u003Cspan class=\"hljs-subst\">${index === defaultTab ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" \n                      data-tab="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\n                    \u003Cspan class=\"hljs-subst\">${tab.content}\u003C/span>\n                </div>`\u003C/span>\n            ).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="tabs-container" id="\u003Cspan class=\"hljs-subst\">${tabsId}\u003C/span>">\n                    <div class="tab-navigation">\n                        \u003Cspan class=\"hljs-subst\">${tabNavigation}\u003C/span>\n                    </div>\n                    <div class="tab-content-container">\n                        \u003Cspan class=\"hljs-subst\">${tabContent}\u003C/span>\n                    </div>\n                </div>\n                \n                <script>\n                function showTab(containerId, tabIndex) {\n                    const container = document.getElementById(containerId);\n                    const buttons = container.querySelectorAll('.tab-button');\n                    const contents = container.querySelectorAll('.tab-content');\n                    \n                    buttons.forEach(btn => btn.classList.remove('active'));\n                    contents.forEach(content => content.classList.remove('active'));\n                    \n                    buttons[tabIndex].classList.add('active');\n                    contents[tabIndex].classList.add('active');\n                }\n                </script>\n            `\u003C/span>;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createAccordionComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content, utils }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { allowMultiple = \u003Cspan class=\"hljs-literal\">false\u003C/span>, defaultOpen } = attributes;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> accordionId = utils.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-string\">'accordion'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Parse accordion sections\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> sections = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^###\\s+(.+)$/m\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> accordionItems = [];\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i < sections.\u003Cspan class=\"hljs-property\">length\u003C/span>; i += \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n                accordionItems.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: sections[i].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: sections[i + \u003Cspan class=\"hljs-number\">1\u003C/span>] ? sections[i + \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() : \u003Cspan class=\"hljs-string\">''\u003C/span>\n                });\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (accordionItems.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'<div class="alert alert-warning">No accordion items defined</div>'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> accordionHtml = accordionItems.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">item, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> itemId = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${accordionId}\u003C/span>-item-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isOpen = defaultOpen === index || (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(defaultOpen) && defaultOpen.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(index));\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                    <div class="accordion-item">\n                        <h3 class="accordion-header">\n                            <button class="accordion-button \u003Cspan class=\"hljs-subst\">${isOpen ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" \n                                    onclick="toggleAccordion('\u003Cspan class=\"hljs-subst\">${accordionId}\u003C/span>', \u003Cspan class=\"hljs-subst\">${index}\u003C/span>, \u003Cspan class=\"hljs-subst\">${allowMultiple}\u003C/span>)"\n                                    aria-expanded="\u003Cspan class=\"hljs-subst\">${isOpen}\u003C/span>">\n                                \u003Cspan class=\"hljs-subst\">${utils.escapeHtml(item.title)}\u003C/span>\n                                <span class="accordion-icon">\u003Cspan class=\"hljs-subst\">${isOpen ? \u003Cspan class=\"hljs-string\">'−'\u003C/span> : \u003Cspan class=\"hljs-string\">'+'\u003C/span>}\u003C/span></span>\n                            </button>\n                        </h3>\n                        <div class="accordion-content \u003Cspan class=\"hljs-subst\">${isOpen ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" id="\u003Cspan class=\"hljs-subst\">${itemId}\u003C/span>">\n                            <div class="accordion-body">\n                                \u003Cspan class=\"hljs-subst\">${item.content}\u003C/span>\n                            </div>\n                        </div>\n                    </div>\n                `\u003C/span>;\n            }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="accordion" id="\u003Cspan class=\"hljs-subst\">${accordionId}\u003C/span>">\n                    \u003Cspan class=\"hljs-subst\">${accordionHtml}\u003C/span>\n                </div>\n                \n                <script>\n                function toggleAccordion(accordionId, itemIndex, allowMultiple) {\n                    const accordion = document.getElementById(accordionId);\n                    const items = accordion.querySelectorAll('.accordion-item');\n                    const currentItem = items[itemIndex];\n                    const button = currentItem.querySelector('.accordion-button');\n                    const content = currentItem.querySelector('.accordion-content');\n                    const icon = button.querySelector('.accordion-icon');\n                    \n                    const isActive = content.classList.contains('active');\n                    \n                    if (!allowMultiple) {\n                        // Close all other items\n                        items.forEach((item, index) => {\n                            if (index !== itemIndex) {\n                                item.querySelector('.accordion-button').classList.remove('active');\n                                item.querySelector('.accordion-content').classList.remove('active');\n                                item.querySelector('.accordion-icon').textContent = '+';\n                                item.querySelector('.accordion-button').setAttribute('aria-expanded', 'false');\n                            }\n                        });\n                    }\n                    \n                    // Toggle current item\n                    if (isActive) {\n                        button.classList.remove('active');\n                        content.classList.remove('active');\n                        icon.textContent = '+';\n                        button.setAttribute('aria-expanded', 'false');\n                    } else {\n                        button.classList.add('active');\n                        content.classList.add('active');\n                        icon.textContent = '−';\n                        button.setAttribute('aria-expanded', 'true');\n                    }\n                }\n                </script>\n            `\u003C/span>;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCodeExampleComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content, utils }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { \n                language = \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>, \n                title, \n                showLineNumbers = \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n                highlightLines,\n                editable = \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n                runnable = \u003Cspan class=\"hljs-literal\">false\u003C/span>\n            } = attributes;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> exampleId = utils.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-string\">'code-example'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbers = showLineNumbers ? \u003Cspan class=\"hljs-string\">'line-numbers'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> codeContent = content;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (highlightLines) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> linesToHighlight = highlightLines.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">n\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(n.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()));\n                \u003Cspan class=\"hljs-comment\">// Implementation would add highlighting markup\u003C/span>\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleHtml = title ? \n                \u003Cspan class=\"hljs-string\">`<div class="code-example-title">\u003Cspan class=\"hljs-subst\">${utils.escapeHtml(title)}\u003C/span></div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> editableHtml = editable ? \n                \u003Cspan class=\"hljs-string\">`<button class="code-edit-btn" onclick="makeEditable('\u003Cspan class=\"hljs-subst\">${exampleId}\u003C/span>')">Edit</button>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> runnableHtml = runnable ? \n                \u003Cspan class=\"hljs-string\">`<button class="code-run-btn" onclick="runCode('\u003Cspan class=\"hljs-subst\">${exampleId}\u003C/span>')">Run</button>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="code-example" id="\u003Cspan class=\"hljs-subst\">${exampleId}\u003C/span>">\n                    \u003Cspan class=\"hljs-subst\">${titleHtml}\u003C/span>\n                    <div class="code-example-header">\n                        <span class="code-language">\u003Cspan class=\"hljs-subst\">${language}\u003C/span></span>\n                        <div class="code-actions">\n                            \u003Cspan class=\"hljs-subst\">${editableHtml}\u003C/span>\n                            \u003Cspan class=\"hljs-subst\">${runnableHtml}\u003C/span>\n                            <button class="code-copy-btn" onclick="copyCode('\u003Cspan class=\"hljs-subst\">${exampleId}\u003C/span>')">Copy</button>\n                        </div>\n                    </div>\n                    <pre class="code-content \u003Cspan class=\"hljs-subst\">${lineNumbers}\u003C/span>"><code class="language-\u003Cspan class=\"hljs-subst\">${language}\u003C/span>">\u003Cspan class=\"hljs-subst\">${utils.escapeHtml(codeContent)}\u003C/span></code></pre>\n                    \u003Cspan class=\"hljs-subst\">${runnable ? \u003Cspan class=\"hljs-string\">'<div class="code-output" id="'\u003C/span> + exampleId + \u003Cspan class=\"hljs-string\">'-output"></div>'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                </div>\n                \n                <script>\n                function copyCode(exampleId) {\n                    const codeElement = document.querySelector('#' + exampleId + ' code');\n                    navigator.clipboard.writeText(codeElement.textContent);\n                    \n                    const btn = document.querySelector('#' + exampleId + ' .code-copy-btn');\n                    const originalText = btn.textContent;\n                    btn.textContent = 'Copied!';\n                    setTimeout(() => btn.textContent = originalText, 2000);\n                }\n                \n                function makeEditable(exampleId) {\n                    const codeElement = document.querySelector('#' + exampleId + ' code');\n                    const pre = codeElement.parentElement;\n                    \n                    const textarea = document.createElement('textarea');\n                    textarea.value = codeElement.textContent;\n                    textarea.className = 'code-editor';\n                    \n                    pre.parentElement.replaceChild(textarea, pre);\n                }\n                \n                function runCode(exampleId) {\n                    const codeElement = document.querySelector('#' + exampleId + ' code, #' + exampleId + ' .code-editor');\n                    const outputElement = document.getElementById(exampleId + '-output');\n                    \n                    try {\n                        // Simple JavaScript execution (extend for other languages)\n                        const result = new Function(codeElement.value || codeElement.textContent)();\n                        outputElement.innerHTML = '<div class="output-success">Output: ' + JSON.stringify(result) + '</div>';\n                    } catch (error) {\n                        outputElement.innerHTML = '<div class="output-error">Error: ' + error.message + '</div>';\n                    }\n                }\n                </script>\n            `\u003C/span>;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createApiReferenceComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">async\u003C/span> ({ attributes, content, utils }) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { endpoint, method = \u003Cspan class=\"hljs-string\">'GET'\u003C/span>, baseUrl } = attributes;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!endpoint) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'<div class="alert alert-error">API Reference requires endpoint attribute</div>'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Parse API documentation from content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> sections = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseApiContent\u003C/span>(content);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> referenceId = utils.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-string\">'api-ref'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="api-reference" id="\u003Cspan class=\"hljs-subst\">${referenceId}\u003C/span>">\n                    <div class="api-header">\n                        <span class="api-method method-\u003Cspan class=\"hljs-subst\">${method.toLowerCase()}\u003C/span>">\u003Cspan class=\"hljs-subst\">${method}\u003C/span></span>\n                        <span class="api-endpoint">\u003Cspan class=\"hljs-subst\">${baseUrl || \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\u003Cspan class=\"hljs-subst\">${endpoint}\u003C/span></span>\n                    </div>\n                    \n                    \u003Cspan class=\"hljs-subst\">${sections.description ? \u003Cspan class=\"hljs-string\">`<div class="api-description">\u003Cspan class=\"hljs-subst\">${sections.description}\u003C/span></div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                    \n                    \u003Cspan class=\"hljs-subst\">${sections.parameters ? \u003Cspan class=\"hljs-string\">`\n                        <div class="api-section">\n                            <h4>Parameters</h4>\n                            \u003Cspan class=\"hljs-subst\">${sections.parameters}\u003C/span>\n                        </div>\n                    `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                    \n                    \u003Cspan class=\"hljs-subst\">${sections.examples ? \u003Cspan class=\"hljs-string\">`\n                        <div class="api-section">\n                            <h4>Examples</h4>\n                            \u003Cspan class=\"hljs-subst\">${sections.examples}\u003C/span>\n                        </div>\n                    `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                    \n                    \u003Cspan class=\"hljs-subst\">${sections.responses ? \u003Cspan class=\"hljs-string\">`\n                        <div class="api-section">\n                            <h4>Responses</h4>\n                            \u003Cspan class=\"hljs-subst\">${sections.responses}\u003C/span>\n                        </div>\n                    `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                </div>\n            `\u003C/span>;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createFeatureMatrixComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content, utils }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { features, products } = attributes;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!features || !products) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'<div class="alert alert-error">Feature Matrix requires features and products attributes</div>'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> featureList = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(features) ? features : features.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> productList = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(products) ? products : products.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Parse feature data from content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> featureData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseFeatureMatrix\u003C/span>(content);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matrixId = utils.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-string\">'feature-matrix'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-string\">`\n                <tr>\n                    <th>Feature</th>\n                    \u003Cspan class=\"hljs-subst\">${productList.map(product => \u003Cspan class=\"hljs-string\">`<th>\u003Cspan class=\"hljs-subst\">${utils.escapeHtml(product.trim())}\u003C/span></th>`\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                </tr>\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> featureRows = featureList.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">feature\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> featureName = feature.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> featureInfo = featureData[featureName] || {};\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                    <tr>\n                        <td class="feature-name">\u003Cspan class=\"hljs-subst\">${utils.escapeHtml(featureName)}\u003C/span></td>\n                        \u003Cspan class=\"hljs-subst\">${productList.map(product => {\n                            \u003Cspan class=\"hljs-keyword\">const\u003C/span> productName = product.trim();\n                            \u003Cspan class=\"hljs-keyword\">const\u003C/span> support = featureInfo[productName] || \u003Cspan class=\"hljs-string\">'unknown'\u003C/span>;\n                            \u003Cspan class=\"hljs-keyword\">const\u003C/span> supportClass = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.getSupportClass(support);\n                            \u003Cspan class=\"hljs-keyword\">const\u003C/span> supportIcon = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.getSupportIcon(support);\n                            \n                            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<td class="support-cell \u003Cspan class=\"hljs-subst\">${supportClass}\u003C/span>" title="\u003Cspan class=\"hljs-subst\">${support}\u003C/span>">\n                                \u003Cspan class=\"hljs-subst\">${supportIcon}\u003C/span>\n                            </td>`\u003C/span>;\n                        }).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </tr>\n                `\u003C/span>;\n            }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="feature-matrix" id="\u003Cspan class=\"hljs-subst\">${matrixId}\u003C/span>">\n                    <table class="feature-table">\n                        <thead>\u003Cspan class=\"hljs-subst\">${headerRow}\u003C/span></thead>\n                        <tbody>\u003Cspan class=\"hljs-subst\">${featureRows}\u003C/span></tbody>\n                    </table>\n                </div>\n            `\u003C/span>;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseApiContent\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sections = {};\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentSection = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentContent = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> line \u003Cspan class=\"hljs-keyword\">of\u003C/span> lines) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (line.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'### '\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentSection) {\n                    sections[currentSection] = currentContent.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n                }\n                currentSection = line.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">4\u003C/span>).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                currentContent = [];\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                currentContent.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(line);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentSection) {\n            sections[currentSection] = currentContent.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sections;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseFeatureMatrix\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = {};\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = content.\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\">const\u003C/span> line \u003Cspan class=\"hljs-keyword\">of\u003C/span> lines) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(\\w+):\\s*(.+)$/\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (match) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> [, feature, supportData] = match;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> products = {};\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> pairs = supportData.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> pair \u003Cspan class=\"hljs-keyword\">of\u003C/span> pairs) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> [product, support] = pair.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'='\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (product && support) {\n                        products[product.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()] = support.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                    }\n                }\n                \n                data[feature] = products;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> data;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getSupportClass\u003C/span>(\u003Cspan class=\"hljs-params\">support\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> supportLower = support.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (supportLower === \u003Cspan class=\"hljs-string\">'full'\u003C/span> || supportLower === \u003Cspan class=\"hljs-string\">'yes'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'support-full'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (supportLower === \u003Cspan class=\"hljs-string\">'partial'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'support-partial'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (supportLower === \u003Cspan class=\"hljs-string\">'no'\u003C/span> || supportLower === \u003Cspan class=\"hljs-string\">'none'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'support-none'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'support-unknown'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getSupportIcon\u003C/span>(\u003Cspan class=\"hljs-params\">support\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> supportLower = support.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (supportLower === \u003Cspan class=\"hljs-string\">'full'\u003C/span> || supportLower === \u003Cspan class=\"hljs-string\">'yes'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'✓'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (supportLower === \u003Cspan class=\"hljs-string\">'partial'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'◐'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (supportLower === \u003Cspan class=\"hljs-string\">'no'\u003C/span> || supportLower === \u003Cspan class=\"hljs-string\">'none'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'✗'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'?'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, attributes, content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({ componentName, attributes, content });\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title function_\">btoa\u003C/span>(data).\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">32\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createErrorPlaceholder\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, errorMessage\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="component-error">\n                <h4>Component Error: \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span></h4>\n                <p>\u003Cspan class=\"hljs-subst\">${errorMessage}\u003C/span></p>\n                <details>\n                    <summary>Debug Information</summary>\n                    <pre>Component: \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>\nError: \u003Cspan class=\"hljs-subst\">${errorMessage}\u003C/span>\nTimestamp: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-built_in\">Date\u003C/span>().toISOString()}\u003C/span></pre>\n                </details>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadTemplateFile\u003C/span>(\u003Cspan class=\"hljs-params\">templateName\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implementation would load from file system\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// For browser environment, could fetch from server\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Template loading not implemented'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setContext\u003C/span>(\u003Cspan class=\"hljs-params\">key, value\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>[key] = value;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setRenderer\u003C/span>(\u003Cspan class=\"hljs-params\">renderer\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span> = renderer;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// CSS for component styling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> componentStyles = \u003Cspan class=\"hljs-string\">`\n/* Alert Component Styles */\n.alert {\n    padding: 1rem;\n    margin: 1rem 0;\n    border-radius: 4px;\n    border: 1px solid;\n    position: relative;\n}\n\n.alert-info {\n    color: #0c5460;\n    background-color: #d1ecf1;\n    border-color: #b8daff;\n}\n\n.alert-warning {\n    color: #856404;\n    background-color: #fff3cd;\n    border-color: #ffeaa7;\n}\n\n.alert-error {\n    color: #721c24;\n    background-color: #f8d7da;\n    border-color: #f5c6cb;\n}\n\n.alert-dismiss {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    background: none;\n    border: none;\n    font-size: 1.2rem;\n    cursor: pointer;\n}\n\n.alert-title {\n    margin-top: 0;\n    margin-bottom: 0.5rem;\n    font-weight: 600;\n}\n\n/* Tabs Component Styles */\n.tabs-container {\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    margin: 1rem 0;\n}\n\n.tab-navigation {\n    display: flex;\n    background-color: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n}\n\n.tab-button {\n    padding: 0.75rem 1rem;\n    background: none;\n    border: none;\n    border-right: 1px solid #dee2e6;\n    cursor: pointer;\n    transition: background-color 0.2s;\n}\n\n.tab-button:hover {\n    background-color: #e9ecef;\n}\n\n.tab-button.active {\n    background-color: white;\n    font-weight: 600;\n    border-bottom: 1px solid white;\n    margin-bottom: -1px;\n}\n\n.tab-content-container {\n    background-color: white;\n}\n\n.tab-content {\n    display: none;\n    padding: 1rem;\n}\n\n.tab-content.active {\n    display: block;\n}\n\n/* Accordion Component Styles */\n.accordion {\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    margin: 1rem 0;\n}\n\n.accordion-item {\n    border-bottom: 1px solid #dee2e6;\n}\n\n.accordion-item:last-child {\n    border-bottom: none;\n}\n\n.accordion-button {\n    width: 100%;\n    padding: 1rem;\n    background: #f8f9fa;\n    border: none;\n    text-align: left;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: 500;\n    transition: background-color 0.2s;\n}\n\n.accordion-button:hover {\n    background: #e9ecef;\n}\n\n.accordion-button.active {\n    background: white;\n}\n\n.accordion-content {\n    display: none;\n    background: white;\n}\n\n.accordion-content.active {\n    display: block;\n}\n\n.accordion-body {\n    padding: 1rem;\n}\n\n.accordion-icon {\n    font-weight: bold;\n    font-size: 1.2rem;\n}\n\n/* Code Example Component Styles */\n.code-example {\n    margin: 1rem 0;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.code-example-title {\n    padding: 0.5rem 1rem;\n    background: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n    font-weight: 600;\n}\n\n.code-example-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0.5rem 1rem;\n    background: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n}\n\n.code-language {\n    font-size: 0.875rem;\n    color: #6c757d;\n    text-transform: uppercase;\n}\n\n.code-actions {\n    display: flex;\n    gap: 0.5rem;\n}\n\n.code-actions button {\n    padding: 0.25rem 0.5rem;\n    background: #007bff;\n    color: white;\n    border: none;\n    border-radius: 3px;\n    cursor: pointer;\n    font-size: 0.75rem;\n}\n\n.code-actions button:hover {\n    background: #0056b3;\n}\n\n.code-content {\n    margin: 0;\n    padding: 1rem;\n    background: #f8f9fa;\n    overflow-x: auto;\n}\n\n.code-editor {\n    width: 100%;\n    min-height: 200px;\n    padding: 1rem;\n    font-family: 'Courier New', monospace;\n    border: none;\n    background: #f8f9fa;\n    resize: vertical;\n}\n\n.code-output {\n    padding: 1rem;\n    background: #ffffff;\n    border-top: 1px solid #dee2e6;\n}\n\n.output-success {\n    color: #155724;\n    background-color: #d4edda;\n    border: 1px solid #c3e6cb;\n    padding: 0.5rem;\n    border-radius: 3px;\n}\n\n.output-error {\n    color: #721c24;\n    background-color: #f8d7da;\n    border: 1px solid #f5c6cb;\n    padding: 0.5rem;\n    border-radius: 3px;\n}\n\n/* API Reference Component Styles */\n.api-reference {\n    margin: 1rem 0;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.api-header {\n    padding: 1rem;\n    background: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\n.api-method {\n    padding: 0.25rem 0.5rem;\n    border-radius: 3px;\n    font-weight: bold;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n}\n\n.method-get { background: #28a745; color: white; }\n.method-post { background: #007bff; color: white; }\n.method-put { background: #ffc107; color: black; }\n.method-delete { background: #dc3545; color: white; }\n\n.api-endpoint {\n    font-family: 'Courier New', monospace;\n    background: white;\n    padding: 0.25rem 0.5rem;\n    border-radius: 3px;\n    border: 1px solid #dee2e6;\n}\n\n.api-section {\n    padding: 1rem;\n    border-bottom: 1px solid #dee2e6;\n}\n\n.api-section:last-child {\n    border-bottom: none;\n}\n\n.api-section h4 {\n    margin-top: 0;\n    margin-bottom: 0.5rem;\n    color: #495057;\n}\n\n/* Feature Matrix Component Styles */\n.feature-matrix {\n    margin: 1rem 0;\n    overflow-x: auto;\n}\n\n.feature-table {\n    width: 100%;\n    border-collapse: collapse;\n    border: 1px solid #dee2e6;\n}\n\n.feature-table th,\n.feature-table td {\n    padding: 0.75rem;\n    border: 1px solid #dee2e6;\n    text-align: left;\n}\n\n.feature-table th {\n    background: #f8f9fa;\n    font-weight: 600;\n}\n\n.feature-name {\n    font-weight: 500;\n}\n\n.support-cell {\n    text-align: center;\n    font-weight: bold;\n}\n\n.support-full { color: #28a745; }\n.support-partial { color: #ffc107; }\n.support-none { color: #dc3545; }\n.support-unknown { color: #6c757d; }\n\n/* Error Component Styles */\n.component-error {\n    padding: 1rem;\n    margin: 1rem 0;\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 4px;\n    color: #721c24;\n}\n\n.component-error h4 {\n    margin-top: 0;\n    margin-bottom: 0.5rem;\n}\n\n.component-error details {\n    margin-top: 0.5rem;\n}\n\n.component-error pre {\n    background: rgba(0,0,0,0.1);\n    padding: 0.5rem;\n    border-radius: 3px;\n    font-size: 0.875rem;\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = { \u003Cspan class=\"hljs-title class_\">MarkdownComponentSystem\u003C/span>, componentStyles };\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-template-system-integration\">Advanced Template System Integration\u003C/h3>\n\u003Cp>Creating sophisticated templating systems for dynamic content generation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># markdown_templates.py - Advanced templating system for Markdown components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> re\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> json\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> yaml\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> pathlib \u003Cspan class=\"hljs-keyword\">import\u003C/span> Path\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> typing \u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-type\">Dict\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>, \u003Cspan class=\"hljs-type\">List\u003C/span>, \u003Cspan class=\"hljs-type\">Optional\u003C/span>, \u003Cspan class=\"hljs-type\">Callable\u003C/span>\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> dataclasses \u003Cspan class=\"hljs-keyword\">import\u003C/span> dataclass\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> datetime \u003Cspan class=\"hljs-keyword\">import\u003C/span> datetime\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> asyncio\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> aiohttp\n\n\u003Cspan class=\"hljs-meta\">@dataclass\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ComponentTemplate\u003C/span>:\n    name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    template: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    schema: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\n    async_data: \u003Cspan class=\"hljs-built_in\">bool\u003C/span> = \u003Cspan class=\"hljs-literal\">False\u003C/span>\n    cache_ttl: \u003Cspan class=\"hljs-built_in\">int\u003C/span> = \u003Cspan class=\"hljs-number\">3600\u003C/span>\n    \n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedTemplateSystem\u003C/span>:\n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">__init__\u003C/span>(\u003Cspan class=\"hljs-params\">self, template_dir: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">"templates"\u003C/span>, data_sources: \u003Cspan class=\"hljs-type\">Dict\u003C/span> = \u003Cspan class=\"hljs-literal\">None\u003C/span>\u003C/span>):\n        self.template_dir = Path(template_dir)\n        self.templates: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, ComponentTemplate] = {}\n        self.data_sources = data_sources \u003Cspan class=\"hljs-keyword\">or\u003C/span> {}\n        self.template_cache = {}\n        self.data_cache = {}\n        self.template_functions = {\n            \u003Cspan class=\"hljs-string\">'now'\u003C/span>: \u003Cspan class=\"hljs-keyword\">lambda\u003C/span>: datetime.now().isoformat(),\n            \u003Cspan class=\"hljs-string\">'format_date'\u003C/span>: self.format_date,\n            \u003Cspan class=\"hljs-string\">'fetch_data'\u003C/span>: self.fetch_data,\n            \u003Cspan class=\"hljs-string\">'render_partial'\u003C/span>: self.render_partial,\n            \u003Cspan class=\"hljs-string\">'include'\u003C/span>: self.include_template,\n            \u003Cspan class=\"hljs-string\">'loop'\u003C/span>: self.loop_helper,\n            \u003Cspan class=\"hljs-string\">'condition'\u003C/span>: self.condition_helper\n        }\n        \n        self.load_templates()\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">load_templates\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>):\n        \u003Cspan class=\"hljs-string\">"""Load all templates from the template directory"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> self.template_dir.exists():\n            self.template_dir.mkdir(parents=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> template_file \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.template_dir.glob(\u003Cspan class=\"hljs-string\">"*.md"\u003C/span>):\n            self.load_template_file(template_file)\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> template_file \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.template_dir.glob(\u003Cspan class=\"hljs-string\">"*.html"\u003C/span>):\n            self.load_template_file(template_file)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">load_template_file\u003C/span>(\u003Cspan class=\"hljs-params\">self, file_path: Path\u003C/span>):\n        \u003Cspan class=\"hljs-string\">"""Load a single template file with metadata"""\u003C/span>\n        content = file_path.read_text(encoding=\u003Cspan class=\"hljs-string\">'utf-8'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-comment\"># Extract template metadata from frontmatter\u003C/span>\n        frontmatter_match = re.\u003Cspan class=\"hljs-keyword\">match\u003C/span>(\u003Cspan class=\"hljs-string\">r'^---\\n(.*?)\\n---\\n(.*)$'\u003C/span>, content, re.DOTALL)\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> frontmatter_match:\n            metadata_str, template_content = frontmatter_match.groups()\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                metadata = yaml.safe_load(metadata_str)\n            \u003Cspan class=\"hljs-keyword\">except\u003C/span> yaml.YAMLError:\n                metadata = {}\n            \n            template_name = metadata.get(\u003Cspan class=\"hljs-string\">'name'\u003C/span>, file_path.stem)\n            \n            template = ComponentTemplate(\n                name=template_name,\n                template=template_content,\n                schema=metadata.get(\u003Cspan class=\"hljs-string\">'schema'\u003C/span>, {}),\n                async_data=metadata.get(\u003Cspan class=\"hljs-string\">'async_data'\u003C/span>, \u003Cspan class=\"hljs-literal\">False\u003C/span>),\n                cache_ttl=metadata.get(\u003Cspan class=\"hljs-string\">'cache_ttl'\u003C/span>, \u003Cspan class=\"hljs-number\">3600\u003C/span>)\n            )\n            \n            self.templates[template_name] = template\n            \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"✅ Loaded template: \u003Cspan class=\"hljs-subst\">{template_name}\u003C/span>"\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n            \u003Cspan class=\"hljs-comment\"># No frontmatter, use filename as template name\u003C/span>\n            template_name = file_path.stem\n            template = ComponentTemplate(\n                name=template_name,\n                template=content,\n                schema={}\n            )\n            \n            self.templates[template_name] = template\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">render_component\u003C/span>(\u003Cspan class=\"hljs-params\">self, component_name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, attributes: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>], \n                              content: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">""\u003C/span>, context: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Render a component using the template system"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> component_name \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.templates:\n            \u003Cspan class=\"hljs-keyword\">raise\u003C/span> ValueError(\u003Cspan class=\"hljs-string\">f"Unknown template: \u003Cspan class=\"hljs-subst\">{component_name}\u003C/span>"\u003C/span>)\n        \n        template = self.templates[component_name]\n        \n        \u003Cspan class=\"hljs-comment\"># Validate attributes against schema\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> template.schema:\n            validation_errors = self.validate_attributes(attributes, template.schema)\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> validation_errors:\n                \u003Cspan class=\"hljs-keyword\">raise\u003C/span> ValueError(\u003Cspan class=\"hljs-string\">f"Validation errors: \u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">', '\u003C/span>.join(validation_errors)}\u003C/span>"\u003C/span>)\n        \n        \u003Cspan class=\"hljs-comment\"># Prepare template context\u003C/span>\n        template_context = {\n            \u003Cspan class=\"hljs-string\">'attributes'\u003C/span>: attributes,\n            \u003Cspan class=\"hljs-string\">'content'\u003C/span>: content,\n            \u003Cspan class=\"hljs-string\">'context'\u003C/span>: context \u003Cspan class=\"hljs-keyword\">or\u003C/span> {},\n            \u003Cspan class=\"hljs-string\">'functions'\u003C/span>: self.template_functions,\n            \u003Cspan class=\"hljs-string\">'template_name'\u003C/span>: component_name\n        }\n        \n        \u003Cspan class=\"hljs-comment\"># Fetch async data if needed\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> template.async_data:\n            async_data = \u003Cspan class=\"hljs-keyword\">await\u003C/span> self.fetch_async_data(component_name, attributes)\n            template_context[\u003Cspan class=\"hljs-string\">'data'\u003C/span>] = async_data\n        \n        \u003Cspan class=\"hljs-comment\"># Render template\u003C/span>\n        rendered = \u003Cspan class=\"hljs-keyword\">await\u003C/span> self.process_template(template.template, template_context)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rendered\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_attributes\u003C/span>(\u003Cspan class=\"hljs-params\">self, attributes: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>], schema: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Validate component attributes against schema"""\u003C/span>\n        errors = []\n        \n        required_fields = schema.get(\u003Cspan class=\"hljs-string\">'required'\u003C/span>, [])\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> field \u003Cspan class=\"hljs-keyword\">in\u003C/span> required_fields:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> field \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> attributes:\n                errors.append(\u003Cspan class=\"hljs-string\">f"Required field '\u003Cspan class=\"hljs-subst\">{field}\u003C/span>' is missing"\u003C/span>)\n        \n        properties = schema.get(\u003Cspan class=\"hljs-string\">'properties'\u003C/span>, {})\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> attr_name, attr_value \u003Cspan class=\"hljs-keyword\">in\u003C/span> attributes.items():\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> attr_name \u003Cspan class=\"hljs-keyword\">in\u003C/span> properties:\n                property_schema = properties[attr_name]\n                validation_error = self.validate_property(attr_name, attr_value, property_schema)\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> validation_error:\n                    errors.append(validation_error)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> errors\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_property\u003C/span>(\u003Cspan class=\"hljs-params\">self, name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, value: \u003Cspan class=\"hljs-type\">Any\u003C/span>, schema: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-type\">Optional\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Validate a single property against its schema"""\u003C/span>\n        expected_type = schema.get(\u003Cspan class=\"hljs-string\">'type'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> expected_type == \u003Cspan class=\"hljs-string\">'string'\u003C/span> \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, \u003Cspan class=\"hljs-built_in\">str\u003C/span>):\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Property '\u003Cspan class=\"hljs-subst\">{name}\u003C/span>' must be a string"\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">elif\u003C/span> expected_type == \u003Cspan class=\"hljs-string\">'number'\u003C/span> \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, (\u003Cspan class=\"hljs-built_in\">int\u003C/span>, \u003Cspan class=\"hljs-built_in\">float\u003C/span>)):\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Property '\u003Cspan class=\"hljs-subst\">{name}\u003C/span>' must be a number"\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">elif\u003C/span> expected_type == \u003Cspan class=\"hljs-string\">'boolean'\u003C/span> \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, \u003Cspan class=\"hljs-built_in\">bool\u003C/span>):\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Property '\u003Cspan class=\"hljs-subst\">{name}\u003C/span>' must be a boolean"\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">elif\u003C/span> expected_type == \u003Cspan class=\"hljs-string\">'array'\u003C/span> \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, \u003Cspan class=\"hljs-built_in\">list\u003C/span>):\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Property '\u003Cspan class=\"hljs-subst\">{name}\u003C/span>' must be an array"\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Check enum values\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'enum'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> schema \u003Cspan class=\"hljs-keyword\">and\u003C/span> value \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> schema[\u003Cspan class=\"hljs-string\">'enum'\u003C/span>]:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Property '\u003Cspan class=\"hljs-subst\">{name}\u003C/span>' must be one of: \u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">', '\u003C/span>.join(\u003Cspan class=\"hljs-built_in\">map\u003C/span>(\u003Cspan class=\"hljs-built_in\">str\u003C/span>, schema[\u003Cspan class=\"hljs-string\">'enum'\u003C/span>]))}\u003C/span>"\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Check string patterns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> expected_type == \u003Cspan class=\"hljs-string\">'string'\u003C/span> \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-string\">'pattern'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> schema:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> re.\u003Cspan class=\"hljs-keyword\">match\u003C/span>(schema[\u003Cspan class=\"hljs-string\">'pattern'\u003C/span>], value):\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Property '\u003Cspan class=\"hljs-subst\">{name}\u003C/span>' does not match required pattern"\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch_async_data\u003C/span>(\u003Cspan class=\"hljs-params\">self, component_name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, attributes: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Fetch asynchronous data for a component"""\u003C/span>\n        cache_key = \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{component_name}\u003C/span>_\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-built_in\">hash\u003C/span>(\u003Cspan class=\"hljs-built_in\">str\u003C/span>(attributes))}\u003C/span>"\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> cache_key \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.data_cache:\n            cached_data, cache_time = self.data_cache[cache_key]\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> datetime.now().timestamp() - cache_time < self.templates[component_name].cache_ttl:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cached_data\n        \n        \u003Cspan class=\"hljs-comment\"># Fetch data from configured sources\u003C/span>\n        data = {}\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'api_endpoint'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> attributes:\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">with\u003C/span> aiohttp.ClientSession() \u003Cspan class=\"hljs-keyword\">as\u003C/span> session:\n                    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">with\u003C/span> session.get(attributes[\u003Cspan class=\"hljs-string\">'api_endpoint'\u003C/span>]) \u003Cspan class=\"hljs-keyword\">as\u003C/span> response:\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> response.status == \u003Cspan class=\"hljs-number\">200\u003C/span>:\n                            api_data = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.json()\n                            data[\u003Cspan class=\"hljs-string\">'api'\u003C/span>] = api_data\n            \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n                \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Failed to fetch API data: \u003Cspan class=\"hljs-subst\">{e}\u003C/span>"\u003C/span>)\n                data[\u003Cspan class=\"hljs-string\">'api'\u003C/span>] = {\u003Cspan class=\"hljs-string\">'error'\u003C/span>: \u003Cspan class=\"hljs-built_in\">str\u003C/span>(e)}\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'data_source'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> attributes:\n            source_name = attributes[\u003Cspan class=\"hljs-string\">'data_source'\u003C/span>]\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> source_name \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.data_sources:\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                    source_data = \u003Cspan class=\"hljs-keyword\">await\u003C/span> self.data_sources[source_name](attributes)\n                    data[\u003Cspan class=\"hljs-string\">'source'\u003C/span>] = source_data\n                \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n                    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Failed to fetch source data: \u003Cspan class=\"hljs-subst\">{e}\u003C/span>"\u003C/span>)\n                    data[\u003Cspan class=\"hljs-string\">'source'\u003C/span>] = {\u003Cspan class=\"hljs-string\">'error'\u003C/span>: \u003Cspan class=\"hljs-built_in\">str\u003C/span>(e)}\n        \n        \u003Cspan class=\"hljs-comment\"># Cache the data\u003C/span>\n        self.data_cache[cache_key] = (data, datetime.now().timestamp())\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> data\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">process_template\u003C/span>(\u003Cspan class=\"hljs-params\">self, template: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, context: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Process template with advanced templating features"""\u003C/span>\n        \u003Cspan class=\"hljs-comment\"># Replace simple variables\u003C/span>\n        processed = template\n        \n        \u003Cspan class=\"hljs-comment\"># Process {{ variable }} expressions\u003C/span>\n        var_pattern = \u003Cspan class=\"hljs-string\">r'\\{\\{\\s*([^}]+)\\s*\\}\\}'\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">replace_variable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-keyword\">match\u003C/span>\u003C/span>):\n            expression = \u003Cspan class=\"hljs-keyword\">match\u003C/span>.group(\u003Cspan class=\"hljs-number\">1\u003C/span>).strip()\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">str\u003C/span>(self.evaluate_expression(expression, context))\n            \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"{{{{ ERROR: \u003Cspan class=\"hljs-subst\">{e}\u003C/span> }}}}"\u003C/span>\n        \n        processed = re.sub(var_pattern, replace_variable, processed)\n        \n        \u003Cspan class=\"hljs-comment\"># Process {% control %} blocks\u003C/span>\n        processed = \u003Cspan class=\"hljs-keyword\">await\u003C/span> self.process_control_blocks(processed, context)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processed\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">evaluate_expression\u003C/span>(\u003Cspan class=\"hljs-params\">self, expression: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, context: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-type\">Any\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Safely evaluate template expressions"""\u003C/span>\n        \u003Cspan class=\"hljs-comment\"># Simple dot notation support\u003C/span>\n        parts = expression.split(\u003Cspan class=\"hljs-string\">'.'\u003C/span>)\n        value = context\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> part \u003Cspan class=\"hljs-keyword\">in\u003C/span> parts:\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'['\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> part \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-string\">']'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> part:\n                    \u003Cspan class=\"hljs-comment\"># Handle array/object access like items[0] or obj['key']\u003C/span>\n                    key_match = re.\u003Cspan class=\"hljs-keyword\">match\u003C/span>(\u003Cspan class=\"hljs-string\">r'(\\w+)\\[([^\\]]+)\\]'\u003C/span>, part)\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> key_match:\n                        obj_name, key = key_match.groups()\n                        value = value[obj_name]\n                        \n                        \u003Cspan class=\"hljs-comment\"># Try as integer index first, then as string key\u003C/span>\n                        \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                            key = \u003Cspan class=\"hljs-built_in\">int\u003C/span>(key.strip(\u003Cspan class=\"hljs-string\">'"\\''\u003C/span>))\n                        \u003Cspan class=\"hljs-keyword\">except\u003C/span> ValueError:\n                            key = key.strip(\u003Cspan class=\"hljs-string\">'"\\''\u003C/span>)\n                        \n                        value = value[key]\n                    \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                        value = value[part]\n                \u003Cspan class=\"hljs-keyword\">elif\u003C/span> \u003Cspan class=\"hljs-string\">'('\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> part \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-string\">')'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> part:\n                    \u003Cspan class=\"hljs-comment\"># Function call\u003C/span>\n                    func_match = re.\u003Cspan class=\"hljs-keyword\">match\u003C/span>(\u003Cspan class=\"hljs-string\">r'(\\w+)\\((.*?)\\)'\u003C/span>, part)\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> func_match:\n                        func_name, args_str = func_match.groups()\n                        \n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> func_name \u003Cspan class=\"hljs-keyword\">in\u003C/span> context.get(\u003Cspan class=\"hljs-string\">'functions'\u003C/span>, {}):\n                            func = context[\u003Cspan class=\"hljs-string\">'functions'\u003C/span>][func_name]\n                            \n                            \u003Cspan class=\"hljs-comment\"># Parse arguments\u003C/span>\n                            args = []\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> args_str.strip():\n                                \u003Cspan class=\"hljs-comment\"># Simple argument parsing\u003C/span>\n                                \u003Cspan class=\"hljs-keyword\">for\u003C/span> arg \u003Cspan class=\"hljs-keyword\">in\u003C/span> args_str.split(\u003Cspan class=\"hljs-string\">','\u003C/span>):\n                                    arg = arg.strip().strip(\u003Cspan class=\"hljs-string\">'"\\''\u003C/span>)\n                                    args.append(arg)\n                            \n                            \u003Cspan class=\"hljs-keyword\">return\u003C/span> func(*args)\n                        \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Function \u003Cspan class=\"hljs-subst\">{func_name}\u003C/span> not found"\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                        value = value[part]\n                \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                    value = value[part]\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value\n            \n        \u003Cspan class=\"hljs-keyword\">except\u003C/span> (KeyError, TypeError, IndexError) \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Error accessing \u003Cspan class=\"hljs-subst\">{expression}\u003C/span>: \u003Cspan class=\"hljs-subst\">{e}\u003C/span>"\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">process_control_blocks\u003C/span>(\u003Cspan class=\"hljs-params\">self, template: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, context: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Process control blocks like {% if %}, {% for %}, etc."""\u003C/span>\n        processed = template\n        \n        \u003Cspan class=\"hljs-comment\"># Process {% if %} blocks\u003C/span>\n        if_pattern = \u003Cspan class=\"hljs-string\">r'\\{\\%\\s*if\\s+(.+?)\\s*\\%\\}(.*?)\\{\\%\\s*endif\\s*\\%\\}'\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">process_if\u003C/span>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-keyword\">match\u003C/span>\u003C/span>):\n            condition, content = \u003Cspan class=\"hljs-keyword\">match\u003C/span>.groups()\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.evaluate_condition(condition, context):\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> content\n                \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Error in if condition: \u003Cspan class=\"hljs-subst\">{e}\u003C/span>"\u003C/span>\n        \n        processed = re.sub(if_pattern, process_if, processed, flags=re.DOTALL)\n        \n        \u003Cspan class=\"hljs-comment\"># Process {% for %} blocks\u003C/span>\n        for_pattern = \u003Cspan class=\"hljs-string\">r'\\{\\%\\s*for\\s+(\\w+)\\s+in\\s+(.+?)\\s*\\%\\}(.*?)\\{\\%\\s*endfor\\s*\\%\\}'\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">process_for\u003C/span>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-keyword\">match\u003C/span>\u003C/span>):\n            var_name, iterable_expr, content = \u003Cspan class=\"hljs-keyword\">match\u003C/span>.groups()\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                iterable = self.evaluate_expression(iterable_expr, context)\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-built_in\">hasattr\u003C/span>(iterable, \u003Cspan class=\"hljs-string\">'__iter__'\u003C/span>):\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Error: \u003Cspan class=\"hljs-subst\">{iterable_expr}\u003C/span> is not iterable"\u003C/span>\n                \n                result = []\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> item \u003Cspan class=\"hljs-keyword\">in\u003C/span> iterable:\n                    item_context = context.copy()\n                    item_context[var_name] = item\n                    item_content = content\n                    \n                    \u003Cspan class=\"hljs-comment\"># Process nested variables in the loop content\u003C/span>\n                    var_pattern = \u003Cspan class=\"hljs-string\">r'\\{\\{\\s*([^}]+)\\s*\\}\\}'\u003C/span>\n                    \n                    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">replace_loop_var\u003C/span>(\u003Cspan class=\"hljs-params\">inner_match\u003C/span>):\n                        expression = inner_match.group(\u003Cspan class=\"hljs-number\">1\u003C/span>).strip()\n                        \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">str\u003C/span>(self.evaluate_expression(expression, item_context))\n                        \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n                            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"{{{{ ERROR: \u003Cspan class=\"hljs-subst\">{e}\u003C/span> }}}}"\u003C/span>\n                    \n                    item_content = re.sub(var_pattern, replace_loop_var, item_content)\n                    result.append(item_content)\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>.join(result)\n                \n            \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Error in for loop: \u003Cspan class=\"hljs-subst\">{e}\u003C/span>"\u003C/span>\n        \n        processed = re.sub(for_pattern, process_for, processed, flags=re.DOTALL)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processed\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">evaluate_condition\u003C/span>(\u003Cspan class=\"hljs-params\">self, condition: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, context: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">bool\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Evaluate conditional expressions"""\u003C/span>\n        \u003Cspan class=\"hljs-comment\"># Simple condition evaluation\u003C/span>\n        condition = condition.strip()\n        \n        \u003Cspan class=\"hljs-comment\"># Handle negation\u003C/span>\n        negated = \u003Cspan class=\"hljs-literal\">False\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> condition.startswith(\u003Cspan class=\"hljs-string\">'not '\u003C/span>):\n            negated = \u003Cspan class=\"hljs-literal\">True\u003C/span>\n            condition = condition[\u003Cspan class=\"hljs-number\">4\u003C/span>:].strip()\n        \n        \u003Cspan class=\"hljs-comment\"># Handle comparison operators\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> op \u003Cspan class=\"hljs-keyword\">in\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>, \u003Cspan class=\"hljs-string\">'<='\u003C/span>]:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> op \u003Cspan class=\"hljs-keyword\">in\u003C/span> condition:\n                left, right = condition.split(op, \u003Cspan class=\"hljs-number\">1\u003C/span>)\n                left_val = self.evaluate_expression(left.strip(), context)\n                right_val = self.evaluate_expression(right.strip(), context)\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> op == \u003Cspan class=\"hljs-string\">'=='\u003C/span>:\n                    result = left_val == right_val\n                \u003Cspan class=\"hljs-keyword\">elif\u003C/span> op == \u003Cspan class=\"hljs-string\">'!='\u003C/span>:\n                    result = left_val != right_val\n                \u003Cspan class=\"hljs-keyword\">elif\u003C/span> op == \u003Cspan class=\"hljs-string\">'>'\u003C/span>:\n                    result = \u003Cspan class=\"hljs-built_in\">float\u003C/span>(left_val) > \u003Cspan class=\"hljs-built_in\">float\u003C/span>(right_val)\n                \u003Cspan class=\"hljs-keyword\">elif\u003C/span> op == \u003Cspan class=\"hljs-string\">'<'\u003C/span>:\n                    result = \u003Cspan class=\"hljs-built_in\">float\u003C/span>(left_val) < \u003Cspan class=\"hljs-built_in\">float\u003C/span>(right_val)\n                \u003Cspan class=\"hljs-keyword\">elif\u003C/span> op == \u003Cspan class=\"hljs-string\">'>='\u003C/span>:\n                    result = \u003Cspan class=\"hljs-built_in\">float\u003C/span>(left_val) >= \u003Cspan class=\"hljs-built_in\">float\u003C/span>(right_val)\n                \u003Cspan class=\"hljs-keyword\">elif\u003C/span> op == \u003Cspan class=\"hljs-string\">'<='\u003C/span>:\n                    result = \u003Cspan class=\"hljs-built_in\">float\u003C/span>(left_val) <= \u003Cspan class=\"hljs-built_in\">float\u003C/span>(right_val)\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> result \u003Cspan class=\"hljs-keyword\">if\u003C/span> negated \u003Cspan class=\"hljs-keyword\">else\u003C/span> result\n        \n        \u003Cspan class=\"hljs-comment\"># Simple truthiness check\u003C/span>\n        value = self.evaluate_expression(condition, context)\n        result = \u003Cspan class=\"hljs-built_in\">bool\u003C/span>(value)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> result \u003Cspan class=\"hljs-keyword\">if\u003C/span> negated \u003Cspan class=\"hljs-keyword\">else\u003C/span> result\n    \n    \u003Cspan class=\"hljs-comment\"># Template helper functions\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">format_date\u003C/span>(\u003Cspan class=\"hljs-params\">self, date_str: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, format_str: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">"%Y-%m-%d"\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Format date string"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(date_str, \u003Cspan class=\"hljs-built_in\">str\u003C/span>):\n                date_obj = datetime.fromisoformat(date_str.replace(\u003Cspan class=\"hljs-string\">'Z'\u003C/span>, \u003Cspan class=\"hljs-string\">'+00:00'\u003C/span>))\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                date_obj = date_str\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> date_obj.strftime(format_str)\n        \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">str\u003C/span>(date_str)\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch_data\u003C/span>(\u003Cspan class=\"hljs-params\">self, url: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Fetch data from URL"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">with\u003C/span> aiohttp.ClientSession() \u003Cspan class=\"hljs-keyword\">as\u003C/span> session:\n                \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">with\u003C/span> session.get(url) \u003Cspan class=\"hljs-keyword\">as\u003C/span> response:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> response.status == \u003Cspan class=\"hljs-number\">200\u003C/span>:\n                        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.json()\n                    \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\u003Cspan class=\"hljs-string\">'error'\u003C/span>: \u003Cspan class=\"hljs-string\">f'HTTP \u003Cspan class=\"hljs-subst\">{response.status}\u003C/span>'\u003C/span>}\n        \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\u003Cspan class=\"hljs-string\">'error'\u003C/span>: \u003Cspan class=\"hljs-built_in\">str\u003C/span>(e)}\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">render_partial\u003C/span>(\u003Cspan class=\"hljs-params\">self, template_name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, context: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Render a partial template"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> template_name \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.templates:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Partial template '\u003Cspan class=\"hljs-subst\">{template_name}\u003C/span>' not found"\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> asyncio.run(self.process_template(\n                self.templates[template_name].template, \n                context\n            ))\n        \u003Cspan class=\"hljs-keyword\">except\u003C/span> Exception \u003Cspan class=\"hljs-keyword\">as\u003C/span> e:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Error rendering partial: \u003Cspan class=\"hljs-subst\">{e}\u003C/span>"\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">include_template\u003C/span>(\u003Cspan class=\"hljs-params\">self, template_name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Include another template"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> template_name \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.templates:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"Template '\u003Cspan class=\"hljs-subst\">{template_name}\u003C/span>' not found"\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.templates[template_name].template\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">loop_helper\u003C/span>(\u003Cspan class=\"hljs-params\">self, items: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Any\u003C/span>], template: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Loop helper for templates"""\u003C/span>\n        result = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> item \u003Cspan class=\"hljs-keyword\">in\u003C/span> items:\n            \u003Cspan class=\"hljs-comment\"># Simple template processing for loop items\u003C/span>\n            processed = template.replace(\u003Cspan class=\"hljs-string\">'{{ item }}'\u003C/span>, \u003Cspan class=\"hljs-built_in\">str\u003C/span>(item))\n            result.append(processed)\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>.join(result)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">condition_helper\u003C/span>(\u003Cspan class=\"hljs-params\">self, condition: \u003Cspan class=\"hljs-built_in\">bool\u003C/span>, true_content: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, false_content: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">""\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Condition helper for templates"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> true_content \u003Cspan class=\"hljs-keyword\">if\u003C/span> condition \u003Cspan class=\"hljs-keyword\">else\u003C/span> false_content\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">register_data_source\u003C/span>(\u003Cspan class=\"hljs-params\">self, name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, source_func: \u003Cspan class=\"hljs-type\">Callable\u003C/span>\u003C/span>):\n        \u003Cspan class=\"hljs-string\">"""Register a custom data source"""\u003C/span>\n        self.data_sources[name] = source_func\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">register_template_function\u003C/span>(\u003Cspan class=\"hljs-params\">self, name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, func: \u003Cspan class=\"hljs-type\">Callable\u003C/span>\u003C/span>):\n        \u003Cspan class=\"hljs-string\">"""Register a custom template function"""\u003C/span>\n        self.template_functions[name] = func\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">get_template_names\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Get list of available template names"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">list\u003C/span>(self.templates.keys())\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">reload_templates\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>):\n        \u003Cspan class=\"hljs-string\">"""Reload all templates from disk"""\u003C/span>\n        self.templates.clear()\n        self.template_cache.clear()\n        self.load_templates()\n\n\u003Cspan class=\"hljs-comment\"># Example template files that would be created\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"># templates/github-stats.md\u003C/span>\ngithub_stats_template = \u003Cspan class=\"hljs-string\">"""---\nname: github-stats\nschema:\n  required: [repo, owner]\n  properties:\n    repo:\n      type: string\n    owner:\n      type: string\n    token:\n      type: string\nasync_data: true\ncache_ttl: 1800\n---\n<div class="github-stats">\n  <h3>📊 GitHub Repository Stats</h3>\n  \n  {% if data.api %}\n    <div class="stats-grid">\n      <div class="stat-item">\n        <div class="stat-value">{{ data.api.stargazers_count }}</div>\n        <div class="stat-label">Stars</div>\n      </div>\n      <div class="stat-item">\n        <div class="stat-value">{{ data.api.forks_count }}</div>\n        <div class="stat-label">Forks</div>\n      </div>\n      <div class="stat-item">\n        <div class="stat-value">{{ data.api.open_issues_count }}</div>\n        <div class="stat-label">Issues</div>\n      </div>\n      <div class="stat-item">\n        <div class="stat-value">{{ functions.format_date(data.api.updated_at, "%Y-%m-%d") }}</div>\n        <div class="stat-label">Last Updated</div>\n      </div>\n    </div>\n    \n    {% if data.api.description %}\n      <p class="repo-description">{{ data.api.description }}</p>\n    {% endif %}\n    \n    <a href="{{ data.api.html_url }}" class="repo-link">View on GitHub</a>\n  {% else %}\n    <div class="error">Failed to load repository data</div>\n  {% endif %}\n</div>"""\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"># templates/blog-post-list.md\u003C/span>\nblog_post_list_template = \u003Cspan class=\"hljs-string\">"""---\nname: blog-post-list  \nschema:\n  properties:\n    category:\n      type: string\n    limit:\n      type: number\n    sort:\n      type: string\n      enum: [date, title, popularity]\nasync_data: true\n---\n<div class="blog-post-list">\n  {% if attributes.category %}\n    <h3>{{ attributes.category }} Posts</h3>\n  {% else %}\n    <h3>Recent Blog Posts</h3>\n  {% endif %}\n  \n  {% if data.source %}\n    <div class="post-grid">\n      {% for post in data.source.posts %}\n        <article class="post-card">\n          <h4><a href="{{ post.url }}">{{ post.title }}</a></h4>\n          <div class="post-meta">\n            <span class="post-date">{{ functions.format_date(post.date) }}</span>\n            {% if post.author %}\n              <span class="post-author">by {{ post.author }}</span>\n            {% endif %}\n          </div>\n          {% if post.excerpt %}\n            <p class="post-excerpt">{{ post.excerpt }}</p>\n          {% endif %}\n          <div class="post-tags">\n            {% for tag in post.tags %}\n              <span class="tag">{{ tag }}</span>\n            {% endfor %}\n          </div>\n        </article>\n      {% endfor %}\n    </div>\n  {% else %}\n    <div class="error">No posts available</div>\n  {% endif %}\n</div>"""\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"># Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">main\u003C/span>():\n    \u003Cspan class=\"hljs-comment\"># Initialize template system\u003C/span>\n    template_system = AdvancedTemplateSystem(\u003Cspan class=\"hljs-string\">"templates"\u003C/span>)\n    \n    \u003Cspan class=\"hljs-comment\"># Create example templates\u003C/span>\n    Path(\u003Cspan class=\"hljs-string\">"templates"\u003C/span>).mkdir(exist_ok=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n    Path(\u003Cspan class=\"hljs-string\">"templates/github-stats.md"\u003C/span>).write_text(github_stats_template)\n    Path(\u003Cspan class=\"hljs-string\">"templates/blog-post-list.md"\u003C/span>).write_text(blog_post_list_template)\n    \n    \u003Cspan class=\"hljs-comment\"># Reload templates\u003C/span>\n    template_system.reload_templates()\n    \n    \u003Cspan class=\"hljs-comment\"># Register data sources\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch_github_data\u003C/span>(\u003Cspan class=\"hljs-params\">attributes\u003C/span>):\n        repo = attributes[\u003Cspan class=\"hljs-string\">'repo'\u003C/span>]\n        owner = attributes[\u003Cspan class=\"hljs-string\">'owner'\u003C/span>]\n        token = attributes.get(\u003Cspan class=\"hljs-string\">'token'\u003C/span>)\n        \n        headers = {}\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> token:\n            headers[\u003Cspan class=\"hljs-string\">'Authorization'\u003C/span>] = \u003Cspan class=\"hljs-string\">f'token \u003Cspan class=\"hljs-subst\">{token}\u003C/span>'\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">with\u003C/span> aiohttp.ClientSession() \u003Cspan class=\"hljs-keyword\">as\u003C/span> session:\n            \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">with\u003C/span> session.get(\n                \u003Cspan class=\"hljs-string\">f'https://api.github.com/repos/\u003Cspan class=\"hljs-subst\">{owner}\u003C/span>/\u003Cspan class=\"hljs-subst\">{repo}\u003C/span>'\u003C/span>,\n                headers=headers\n            ) \u003Cspan class=\"hljs-keyword\">as\u003C/span> response:\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> response.status == \u003Cspan class=\"hljs-number\">200\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.json()\n                \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\u003Cspan class=\"hljs-string\">'error'\u003C/span>: \u003Cspan class=\"hljs-string\">f'GitHub API error: \u003Cspan class=\"hljs-subst\">{response.status}\u003C/span>'\u003C/span>}\n    \n    template_system.register_data_source(\u003Cspan class=\"hljs-string\">'github'\u003C/span>, fetch_github_data)\n    \n    \u003Cspan class=\"hljs-comment\"># Example usage\u003C/span>\n    github_component = \u003Cspan class=\"hljs-keyword\">await\u003C/span> template_system.render_component(\n        \u003Cspan class=\"hljs-string\">'github-stats'\u003C/span>,\n        {\n            \u003Cspan class=\"hljs-string\">'repo'\u003C/span>: \u003Cspan class=\"hljs-string\">'markdown-tools'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'owner'\u003C/span>: \u003Cspan class=\"hljs-string\">'example-org'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'api_endpoint'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://api.github.com/repos/example-org/markdown-tools'\u003C/span>\n        }\n    )\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"Rendered GitHub Stats Component:"\u003C/span>)\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(github_component)\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> __name__ == \u003Cspan class=\"hljs-string\">'__main__'\u003C/span>:\n    asyncio.run(main())\n\u003C/code>\u003C/pre>\u003Ch2 id=\"interactive-component-development\">Interactive Component Development\u003C/h2>\n\u003Ch3 id=\"real-time-preview-and-testing-system\">Real-time Preview and Testing System\u003C/h3>\n\u003Cp>Building comprehensive development environments for component creation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// component-dev-server.js - Development server for Markdown components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> express = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'express'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">WebSocket\u003C/span> = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'ws'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> chokidar = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'chokidar'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> path = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'path'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> fs = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'fs'\u003C/span>).\u003Cspan class=\"hljs-property\">promises\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> { \u003Cspan class=\"hljs-title class_\">MarkdownComponentSystem\u003C/span> } = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'./markdown-components'\u003C/span>);\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ComponentDevelopmentServer\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\">port\u003C/span>: options.\u003Cspan class=\"hljs-property\">port\u003C/span> || \u003Cspan class=\"hljs-number\">3000\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">host\u003C/span>: options.\u003Cspan class=\"hljs-property\">host\u003C/span> || \u003Cspan class=\"hljs-string\">'localhost'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">componentsDir\u003C/span>: options.\u003Cspan class=\"hljs-property\">componentsDir\u003C/span> || \u003Cspan class=\"hljs-string\">'./components'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">templatesDir\u003C/span>: options.\u003Cspan class=\"hljs-property\">templatesDir\u003C/span> || \u003Cspan class=\"hljs-string\">'./templates'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">examplesDir\u003C/span>: options.\u003Cspan class=\"hljs-property\">examplesDir\u003C/span> || \u003Cspan class=\"hljs-string\">'./examples'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">hotReload\u003C/span>: options.\u003Cspan class=\"hljs-property\">hotReload\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span> = \u003Cspan class=\"hljs-title function_\">express\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">server\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wss\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownComponentSystem\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">connections\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_\">setupServer\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupFileWatching\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupServer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">use\u003C/span>(express.\u003Cspan class=\"hljs-title function_\">static\u003C/span>(\u003Cspan class=\"hljs-string\">'public'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">use\u003C/span>(express.\u003Cspan class=\"hljs-title function_\">json\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Serve component development interface\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(\u003Cspan class=\"hljs-string\">'/'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">req, res\u003C/span>) =>\u003C/span> {\n            res.\u003Cspan class=\"hljs-title function_\">send\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateDevelopmentUI\u003C/span>());\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// API endpoint to render components\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">post\u003C/span>(\u003Cspan class=\"hljs-string\">'/api/render'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (req, res) => {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> { componentName, attributes, content, markdown } = req.\u003Cspan class=\"hljs-property\">body\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">let\u003C/span> result;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (markdown) {\n                    result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>.\u003Cspan class=\"hljs-title function_\">processContent\u003C/span>(markdown);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(\n                        componentName, \n                        attributes, \n                        content\n                    );\n                }\n                \n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">success\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>, \u003Cspan class=\"hljs-attr\">html\u003C/span>: result });\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">success\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, \u003Cspan class=\"hljs-attr\">error\u003C/span>: error.\u003Cspan class=\"hljs-property\">message\u003C/span> });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// API endpoint to get component list\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(\u003Cspan class=\"hljs-string\">'/api/components'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (req, res) => {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> components = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> examples = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadExamples\u003C/span>();\n                \n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({\n                    components,\n                    examples\n                });\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">error\u003C/span>: error.\u003Cspan class=\"hljs-property\">message\u003C/span> });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// API endpoint to get component schema\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(\u003Cspan class=\"hljs-string\">'/api/components/:name/schema'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">req, res\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentName = req.\u003Cspan class=\"hljs-property\">params\u003C/span>.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> component = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(componentName);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component) {\n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">schema\u003C/span>: component.\u003Cspan class=\"hljs-property\">schema\u003C/span> || {} });\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                res.\u003Cspan class=\"hljs-title function_\">status\u003C/span>(\u003Cspan class=\"hljs-number\">404\u003C/span>).\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">error\u003C/span>: \u003Cspan class=\"hljs-string\">'Component not found'\u003C/span> });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// API endpoint to save component\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">post\u003C/span>(\u003Cspan class=\"hljs-string\">'/api/components/:name'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (req, res) => {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentName = req.\u003Cspan class=\"hljs-property\">params\u003C/span>.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> { code, schema } = req.\u003Cspan class=\"hljs-property\">body\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveComponent\u003C/span>(componentName, code, schema);\n                \n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">success\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                res.\u003Cspan class=\"hljs-title function_\">json\u003C/span>({ \u003Cspan class=\"hljs-attr\">success\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, \u003Cspan class=\"hljs-attr\">error\u003C/span>: error.\u003Cspan class=\"hljs-property\">message\u003C/span> });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadExamples\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> examples = {};\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> exampleFiles = \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">readdir\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">examplesDir\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> file \u003Cspan class=\"hljs-keyword\">of\u003C/span> exampleFiles) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (file.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'.md'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentName = path.\u003Cspan class=\"hljs-title function_\">basename\u003C/span>(file, \u003Cspan class=\"hljs-string\">'.md'\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> exampleContent = \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">readFile\u003C/span>(\n                        path.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">examplesDir\u003C/span>, file), \n                        \u003Cspan class=\"hljs-string\">'utf8'\u003C/span>\n                    );\n                    examples[componentName] = exampleContent;\n                }\n            }\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\">'Could not load examples:'\u003C/span>, error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> examples;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">saveComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name, code, schema\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentFile = path.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">componentsDir\u003C/span>, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${name}\u003C/span>.js`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentCode = \u003Cspan class=\"hljs-string\">`\n// Generated component: \u003Cspan class=\"hljs-subst\">${name}\u003C/span>\nmodule.exports = function(componentSystem) {\n    const component = \u003Cspan class=\"hljs-subst\">${code}\u003C/span>;\n    \n    componentSystem.registerComponent('\u003Cspan class=\"hljs-subst\">${name}\u003C/span>', component);\n    \n    // Schema definition\n    component.schema = \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(schema, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span>;\n    \n    return component;\n};\n`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">mkdir\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">componentsDir\u003C/span>, { \u003Cspan class=\"hljs-attr\">recursive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">writeFile\u003C/span>(componentFile, componentCode);\n        \n        \u003Cspan class=\"hljs-comment\">// Reload component system\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">reloadComponents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">reloadComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear existing components\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeBuiltinComponents\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Load custom components\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentFiles = \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">readdir\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">componentsDir\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> file \u003Cspan class=\"hljs-keyword\">of\u003C/span> componentFiles) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (file.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'.js'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentPath = path.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">componentsDir\u003C/span>, file);\n                    \n                    \u003Cspan class=\"hljs-comment\">// Clear require cache\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">delete\u003C/span> \u003Cspan class=\"hljs-built_in\">require\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>[\u003Cspan class=\"hljs-built_in\">require\u003C/span>.\u003Cspan class=\"hljs-title function_\">resolve\u003C/span>(componentPath)];\n                    \n                    \u003Cspan class=\"hljs-comment\">// Load component\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentLoader = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(componentPath);\n                    \u003Cspan class=\"hljs-title function_\">componentLoader\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentSystem\u003C/span>);\n                }\n            }\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\">'Could not load custom components:'\u003C/span>, error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Notify connected clients\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">broadcastReload\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupFileWatching\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\">hotReload\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> watcher = chokidar.\u003Cspan class=\"hljs-title function_\">watch\u003C/span>([\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">componentsDir\u003C/span>,\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">templatesDir\u003C/span>,\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">examplesDir\u003C/span>\n        ], {\n            \u003Cspan class=\"hljs-attr\">ignored\u003C/span>: \u003Cspan class=\"hljs-regexp\">/node_modules/\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">persistent\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        watcher.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> () => {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Files changed, reloading components...'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">reloadComponents\u003C/span>();\n        });\n        \n        watcher.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'add'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> () => {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">reloadComponents\u003C/span>();\n        });\n        \n        watcher.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'unlink'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> () => {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">reloadComponents\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateDevelopmentUI\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Markdown Component Development Server</title>\n    <style>\n        * { margin: 0; padding: 0; box-sizing: border-box; }\n        \n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: #f5f5f5;\n        }\n        \n        .header {\n            background: #2c3e50;\n            color: white;\n            padding: 1rem 2rem;\n            display: flex;\n            justify-content: between;\n            align-items: center;\n        }\n        \n        .container {\n            display: grid;\n            grid-template-columns: 300px 1fr 1fr;\n            height: calc(100vh - 80px);\n            gap: 1rem;\n            padding: 1rem;\n        }\n        \n        .sidebar {\n            background: white;\n            border-radius: 8px;\n            padding: 1rem;\n            overflow-y: auto;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        \n        .editor-panel, .preview-panel {\n            background: white;\n            border-radius: 8px;\n            display: flex;\n            flex-direction: column;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        \n        .panel-header {\n            padding: 1rem;\n            border-bottom: 1px solid #e0e0e0;\n            font-weight: 600;\n            display: flex;\n            justify-content: between;\n            align-items: center;\n        }\n        \n        .panel-content {\n            flex: 1;\n            overflow-y: auto;\n        }\n        \n        .component-list {\n            list-style: none;\n        }\n        \n        .component-item {\n            padding: 0.5rem;\n            margin: 0.25rem 0;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: background-color 0.2s;\n        }\n        \n        .component-item:hover {\n            background: #f0f0f0;\n        }\n        \n        .component-item.active {\n            background: #3498db;\n            color: white;\n        }\n        \n        .editor {\n            font-family: 'Courier New', monospace;\n            padding: 1rem;\n            border: none;\n            resize: none;\n            outline: none;\n            font-size: 14px;\n            line-height: 1.5;\n        }\n        \n        .preview-content {\n            padding: 1rem;\n        }\n        \n        .error {\n            color: #e74c3c;\n            background: #fdf2f2;\n            padding: 1rem;\n            border-radius: 4px;\n            margin: 1rem;\n        }\n        \n        .success {\n            color: #27ae60;\n            background: #f2fdf2;\n            padding: 0.5rem;\n            border-radius: 4px;\n            margin: 0.5rem 0;\n        }\n        \n        .toolbar {\n            display: flex;\n            gap: 0.5rem;\n            padding: 0.5rem 1rem;\n            background: #f8f9fa;\n            border-bottom: 1px solid #e0e0e0;\n        }\n        \n        .btn {\n            padding: 0.5rem 1rem;\n            background: #3498db;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 0.875rem;\n        }\n        \n        .btn:hover {\n            background: #2980b9;\n        }\n        \n        .btn-secondary {\n            background: #95a5a6;\n        }\n        \n        .btn-secondary:hover {\n            background: #7f8c8d;\n        }\n        \n        .attribute-form {\n            padding: 1rem;\n            background: #f8f9fa;\n        }\n        \n        .form-group {\n            margin-bottom: 1rem;\n        }\n        \n        .form-label {\n            display: block;\n            margin-bottom: 0.25rem;\n            font-weight: 500;\n            font-size: 0.875rem;\n        }\n        \n        .form-input {\n            width: 100%;\n            padding: 0.5rem;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 0.875rem;\n        }\n        \n        .loading {\n            text-align: center;\n            color: #666;\n            padding: 2rem;\n        }\n        \n        .status-indicator {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            margin-right: 0.5rem;\n        }\n        \n        .status-connected { background: #27ae60; }\n        .status-disconnected { background: #e74c3c; }\n        \n        .tabs {\n            display: flex;\n            background: #f8f9fa;\n        }\n        \n        .tab {\n            padding: 0.75rem 1rem;\n            background: none;\n            border: none;\n            cursor: pointer;\n            border-bottom: 2px solid transparent;\n        }\n        \n        .tab.active {\n            background: white;\n            border-bottom-color: #3498db;\n        }\n        \n        .tab-content {\n            display: none;\n        }\n        \n        .tab-content.active {\n            display: block;\n        }\n        \n        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.getComponentStyles()}\u003C/span>\n    </style>\n</head>\n<body>\n    <header class="header">\n        <h1>Markdown Component Development</h1>\n        <div>\n            <span class="status-indicator" id="connectionStatus"></span>\n            <span id="connectionText">Connecting...</span>\n        </div>\n    </header>\n    \n    <div class="container">\n        <aside class="sidebar">\n            <h3>Components</h3>\n            <ul class="component-list" id="componentList">\n                <li class="loading">Loading components...</li>\n            </ul>\n            \n            <div class="attribute-form" id="attributeForm" style="display: none;">\n                <h4>Attributes</h4>\n                <div id="attributeInputs"></div>\n            </div>\n        </aside>\n        \n        <div class="editor-panel">\n            <div class="panel-header">\n                <span>Editor</span>\n                <div class="toolbar">\n                    <button class="btn" onclick="renderPreview()">Render</button>\n                    <button class="btn btn-secondary" onclick="loadExample()">Load Example</button>\n                </div>\n            </div>\n            \n            <div class="tabs">\n                <button class="tab active" onclick="switchTab('markdown')">Markdown</button>\n                <button class="tab" onclick="switchTab('component')">Component</button>\n            </div>\n            \n            <div class="tab-content active" id="markdown-content">\n                <textarea class="editor" id="markdownEditor" placeholder="Enter your Markdown with components here...">\n# Example Markdown with Components\n\n<md-alert type="info" title="Welcome">\nThis is an example of a custom Markdown component!\n</md-alert>\n\n<md-tabs defaultTab="0">\n## First Tab\nContent for the first tab goes here.\n\n## Second Tab  \nContent for the second tab goes here.\n</md-tabs>\n                </textarea>\n            </div>\n            \n            <div class="tab-content" id="component-content">\n                <textarea class="editor" id="componentEditor" placeholder="Component-specific content..."></textarea>\n            </div>\n        </div>\n        \n        <div class="preview-panel">\n            <div class="panel-header">\n                <span>Preview</span>\n                <div class="toolbar">\n                    <button class="btn btn-secondary" onclick="copyPreviewHTML()">Copy HTML</button>\n                </div>\n            </div>\n            <div class="panel-content">\n                <div class="preview-content" id="previewContent">\n                    <div class="loading">Click "Render" to preview your components</div>\n                </div>\n            </div>\n        </div>\n    </div>\n    \n    <script>\n        let ws = null;\n        let currentComponent = null;\n        let components = [];\n        let examples = {};\n        \n        // Initialize WebSocket connection\n        function initWebSocket() {\n            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n            ws = new WebSocket(\\`\\${protocol}//\\${window.location.host}\\`);\n            \n            ws.onopen = () => {\n                updateConnectionStatus(true);\n            };\n            \n            ws.onclose = () => {\n                updateConnectionStatus(false);\n                setTimeout(initWebSocket, 3000); // Reconnect after 3 seconds\n            };\n            \n            ws.onmessage = (event) => {\n                const data = JSON.parse(event.data);\n                \n                if (data.type === 'reload') {\n                    loadComponents();\n                    renderPreview();\n                }\n            };\n        }\n        \n        function updateConnectionStatus(connected) {\n            const indicator = document.getElementById('connectionStatus');\n            const text = document.getElementById('connectionText');\n            \n            if (connected) {\n                indicator.className = 'status-indicator status-connected';\n                text.textContent = 'Connected';\n            } else {\n                indicator.className = 'status-indicator status-disconnected';\n                text.textContent = 'Disconnected';\n            }\n        }\n        \n        // Load available components\n        async function loadComponents() {\n            try {\n                const response = await fetch('/api/components');\n                const data = await response.json();\n                \n                components = data.components || [];\n                examples = data.examples || {};\n                \n                updateComponentList();\n            } catch (error) {\n                console.error('Failed to load components:', error);\n            }\n        }\n        \n        function updateComponentList() {\n            const list = document.getElementById('componentList');\n            \n            if (components.length === 0) {\n                list.innerHTML = '<li class="loading">No components found</li>';\n                return;\n            }\n            \n            list.innerHTML = components.map(name => \n                \\`<li class="component-item" onclick="selectComponent('\\${name}')">\\${name}</li>\\`\n            ).join('');\n        }\n        \n        function selectComponent(name) {\n            currentComponent = name;\n            \n            // Update active state\n            document.querySelectorAll('.component-item').forEach(item => {\n                item.classList.remove('active');\n                if (item.textContent === name) {\n                    item.classList.add('active');\n                }\n            });\n            \n            // Load component schema and show attribute form\n            loadComponentSchema(name);\n            \n            // Load example if available\n            if (examples[name]) {\n                document.getElementById('componentEditor').value = examples[name];\n            }\n        }\n        \n        async function loadComponentSchema(name) {\n            try {\n                const response = await fetch(\\`/api/components/\\${name}/schema\\`);\n                const data = await response.json();\n                \n                if (data.schema && data.schema.properties) {\n                    showAttributeForm(data.schema);\n                } else {\n                    hideAttributeForm();\n                }\n            } catch (error) {\n                console.error('Failed to load component schema:', error);\n                hideAttributeForm();\n            }\n        }\n        \n        function showAttributeForm(schema) {\n            const form = document.getElementById('attributeForm');\n            const inputs = document.getElementById('attributeInputs');\n            \n            const properties = schema.properties || {};\n            const required = schema.required || [];\n            \n            let formHTML = '';\n            \n            for (const [name, prop] of Object.entries(properties)) {\n                const isRequired = required.includes(name);\n                const label = isRequired ? \\`\\${name} *\\` : name;\n                \n                formHTML += \\`\n                    <div class="form-group">\n                        <label class="form-label">\\${label}</label>\n                        <input \n                            type="text" \n                            class="form-input" \n                            id="attr-\\${name}"\n                            placeholder="\\${prop.description || ''}"\n                            \\${prop.default ? \\`value="\\${prop.default}"\\` : ''}\n                        >\n                    </div>\n                \\`;\n            }\n            \n            inputs.innerHTML = formHTML;\n            form.style.display = 'block';\n        }\n        \n        function hideAttributeForm() {\n            document.getElementById('attributeForm').style.display = 'none';\n        }\n        \n        async function renderPreview() {\n            const previewContent = document.getElementById('previewContent');\n            const markdownContent = document.getElementById('markdownEditor').value;\n            \n            previewContent.innerHTML = '<div class="loading">Rendering...</div>';\n            \n            try {\n                const response = await fetch('/api/render', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json'\n                    },\n                    body: JSON.stringify({\n                        markdown: markdownContent\n                    })\n                });\n                \n                const result = await response.json();\n                \n                if (result.success) {\n                    previewContent.innerHTML = result.html;\n                } else {\n                    previewContent.innerHTML = \\`<div class="error">Error: \\${result.error}</div>\\`;\n                }\n            } catch (error) {\n                previewContent.innerHTML = \\`<div class="error">Network error: \\${error.message}</div>\\`;\n            }\n        }\n        \n        function loadExample() {\n            if (currentComponent && examples[currentComponent]) {\n                document.getElementById('markdownEditor').value = examples[currentComponent];\n                renderPreview();\n            }\n        }\n        \n        function copyPreviewHTML() {\n            const previewContent = document.getElementById('previewContent').innerHTML;\n            navigator.clipboard.writeText(previewContent).then(() => {\n                // Show success message\n                const originalContent = previewContent;\n                document.getElementById('previewContent').innerHTML = \n                    '<div class="success">HTML copied to clipboard!</div>' + originalContent;\n                \n                setTimeout(() => {\n                    document.getElementById('previewContent').innerHTML = originalContent;\n                }, 2000);\n            });\n        }\n        \n        function switchTab(tabName) {\n            // Update tab buttons\n            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));\n            event.target.classList.add('active');\n            \n            // Update tab content\n            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));\n            document.getElementById(\\`\\${tabName}-content\\`).classList.add('active');\n        }\n        \n        // Auto-render on input\n        document.getElementById('markdownEditor').addEventListener('input', \n            debounce(renderPreview, 1000)\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        \n        // Initialize\n        initWebSocket();\n        loadComponents();\n        renderPreview();\n    </script>\n</body>\n</html>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getComponentStyles\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            /* Include the component styles from the main system */\n            \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'./markdown-components'\u003C/span>).componentStyles}\u003C/span>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">start\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">resolve\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">server\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">app\u003C/span>.\u003Cspan class=\"hljs-title function_\">listen\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">port\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">host\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`🚀 Component development server running at http://\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.host}\u003C/span>:\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.port}\u003C/span>`\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Setup WebSocket server\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wss\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">WebSocket\u003C/span>.\u003Cspan class=\"hljs-title class_\">Server\u003C/span>({ \u003Cspan class=\"hljs-attr\">server\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">server\u003C/span> });\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wss\u003C/span>.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'connection'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">ws\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">connections\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(ws);\n                    \n                    ws.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'close'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">connections\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(ws);\n                    });\n                });\n                \n                \u003Cspan class=\"hljs-title function_\">resolve\u003C/span>();\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">broadcastReload\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> message = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({ \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'reload'\u003C/span> });\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> ws \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">connections\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (ws.\u003Cspan class=\"hljs-property\">readyState\u003C/span> === \u003Cspan class=\"hljs-title class_\">WebSocket\u003C/span>.\u003Cspan class=\"hljs-property\">OPEN\u003C/span>) {\n                ws.\u003Cspan class=\"hljs-title function_\">send\u003C/span>(message);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">stop\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\">server\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">server\u003C/span>.\u003Cspan class=\"hljs-title function_\">close\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wss\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wss\u003C/span>.\u003Cspan class=\"hljs-title function_\">close\u003C/span>();\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">ComponentDevelopmentServer\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// CLI usage\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">require\u003C/span>.\u003Cspan class=\"hljs-property\">main\u003C/span> === \u003Cspan class=\"hljs-variable language_\">module\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> server = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ComponentDevelopmentServer\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">port\u003C/span>: process.\u003Cspan class=\"hljs-property\">env\u003C/span>.\u003Cspan class=\"hljs-property\">PORT\u003C/span> || \u003Cspan class=\"hljs-number\">3000\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">host\u003C/span>: process.\u003Cspan class=\"hljs-property\">env\u003C/span>.\u003Cspan class=\"hljs-property\">HOST\u003C/span> || \u003Cspan class=\"hljs-string\">'localhost'\u003C/span>\n    });\n    \n    server.\u003Cspan class=\"hljs-title function_\">start\u003C/span>().\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Development server started successfully'\u003C/span>);\n    }).\u003Cspan class=\"hljs-title function_\">catch\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">error\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to start development server:'\u003C/span>, error);\n        process.\u003Cspan class=\"hljs-title function_\">exit\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Graceful shutdown\u003C/span>\n    process.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'SIGINT'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'\\nShutting down development server...'\u003C/span>);\n        server.\u003Cspan class=\"hljs-title function_\">stop\u003C/span>();\n        process.\u003Cspan class=\"hljs-title function_\">exit\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n    });\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Custom component systems integrate seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-performance-optimization-rendering-speed-guide\">performance optimization and rendering systems\u003C/a>, custom components maintain fast loading times while providing enhanced functionality, ensuring optimal user experience across both static and interactive content elements.\u003C/p>\n\u003Cp>For sophisticated content management, custom components work effectively with \u003Ca href=\"/blog/markdown-version-control-git-integration-complete-guide\">version control and collaborative workflows\u003C/a> to ensure that component definitions are versioned alongside content, maintaining consistency and enabling collaborative development of reusable documentation elements across distributed teams.\u003C/p>\n\u003Cp>When building comprehensive documentation architectures, custom HTML components complement \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> by providing interactive functionality that enhances offline experiences, caches efficiently, and integrates seamlessly with service workers and background sync capabilities.\u003C/p>\n\u003Ch2 id=\"advanced-component-patterns-and-best-practices\">Advanced Component Patterns and Best Practices\u003C/h2>\n\u003Ch3 id=\"component-lifecycle-management\">Component Lifecycle Management\u003C/h3>\n\u003Cp>Implementing sophisticated lifecycle hooks and state management for complex components:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// component-lifecycle.js - Advanced component lifecycle management\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ComponentLifecycleManager\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\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\">componentInstances\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\">globalState\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\">eventBus\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">EventTarget\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDefaultHooks\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerDefaultHooks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Default lifecycle hooks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeCreate'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'created'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeMount'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'mounted'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeUpdate'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'updated'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeDestroy'\u003C/span>, []);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'destroyed'\u003C/span>, []);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerLifecycleHook\u003C/span>(\u003Cspan class=\"hljs-params\">phase, handler\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(phase)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(phase, []);\n        }\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(phase).\u003Cspan class=\"hljs-title function_\">push\u003C/span>(handler);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-params\">phase, component, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hooks = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleHooks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(phase) || [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> hook \u003Cspan class=\"hljs-keyword\">of\u003C/span> hooks) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">hook\u003C/span>(component, context);\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\">`Lifecycle hook error in \u003Cspan class=\"hljs-subst\">${phase}\u003C/span>:`\u003C/span>, error);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">createComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, attributes, content, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateComponentId\u003C/span>(componentName);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentInstance = {\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: componentId,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: componentName,\n            attributes,\n            content,\n            context,\n            \u003Cspan class=\"hljs-attr\">state\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">mounted\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">destroyed\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Execute lifecycle hooks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeCreate'\u003C/span>, componentInstance, context);\n        \n        \u003Cspan class=\"hljs-comment\">// Store instance\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(componentId, componentInstance);\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'created'\u003C/span>, componentInstance, context);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> componentInstance;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">mountComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance, element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">mounted\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeMount'\u003C/span>, componentInstance);\n        \n        componentInstance.\u003Cspan class=\"hljs-property\">element\u003C/span> = element;\n        componentInstance.\u003Cspan class=\"hljs-property\">mounted\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'mounted'\u003C/span>, componentInstance);\n        \n        \u003Cspan class=\"hljs-comment\">// Set up event listeners and observers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupComponentEventListeners\u003C/span>(componentInstance);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupComponentObservers\u003C/span>(componentInstance);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">updateComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance, newAttributes, newContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">destroyed\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeUpdate'\u003C/span>, componentInstance);\n        \n        componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span> = { ...componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>, ...newAttributes };\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (newContent !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            componentInstance.\u003Cspan class=\"hljs-property\">content\u003C/span> = newContent;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'updated'\u003C/span>, componentInstance);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">destroyComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentInstance = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(componentId);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!componentInstance || componentInstance.\u003Cspan class=\"hljs-property\">destroyed\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeDestroy'\u003C/span>, componentInstance);\n        \n        \u003Cspan class=\"hljs-comment\">// Clean up event listeners and observers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cleanupComponentEventListeners\u003C/span>(componentInstance);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cleanupComponentObservers\u003C/span>(componentInstance);\n        \n        componentInstance.\u003Cspan class=\"hljs-property\">destroyed\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        componentInstance.\u003Cspan class=\"hljs-property\">element\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-string\">'destroyed'\u003C/span>, componentInstance);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(componentId);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupComponentEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!componentInstance.\u003Cspan class=\"hljs-property\">element\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> element = componentInstance.\u003Cspan class=\"hljs-property\">element\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Set up custom event handlers defined in attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>.\u003Cspan class=\"hljs-property\">onClick\u003C/span>) {\n            element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\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_\">handleComponentEvent\u003C/span>(componentInstance, \u003Cspan class=\"hljs-string\">'click'\u003C/span>, event);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>.\u003Cspan class=\"hljs-property\">onHover\u003C/span>) {\n            element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseenter'\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_\">handleComponentEvent\u003C/span>(componentInstance, \u003Cspan class=\"hljs-string\">'hover'\u003C/span>, event);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Set up intersection observer for lazy loading\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>.\u003Cspan class=\"hljs-property\">lazy\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(componentInstance);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleComponentEvent\u003C/span>(componentInstance, \u003Cspan class=\"hljs-string\">'visible'\u003C/span>, entry);\n                    observer.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n                }\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(componentInstance.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n        componentInstance.\u003Cspan class=\"hljs-property\">_intersectionObserver\u003C/span> = observer;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupComponentObservers\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Set up mutation observer for dynamic content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>.\u003Cspan class=\"hljs-property\">watchMutations\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                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleComponentEvent\u003C/span>(componentInstance, \u003Cspan class=\"hljs-string\">'mutation'\u003C/span>, mutations);\n            });\n            \n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(componentInstance.\u003Cspan class=\"hljs-property\">element\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                \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n            \n            componentInstance.\u003Cspan class=\"hljs-property\">_mutationObserver\u003C/span> = observer;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cleanupComponentEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Event listeners are automatically removed when element is removed from DOM\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// But clean up custom observers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cleanupComponentObservers\u003C/span>(componentInstance);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cleanupComponentObservers\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">_intersectionObserver\u003C/span>) {\n            componentInstance.\u003Cspan class=\"hljs-property\">_intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">delete\u003C/span> componentInstance.\u003Cspan class=\"hljs-property\">_intersectionObserver\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">_mutationObserver\u003C/span>) {\n            componentInstance.\u003Cspan class=\"hljs-property\">_mutationObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">delete\u003C/span> componentInstance.\u003Cspan class=\"hljs-property\">_mutationObserver\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleComponentEvent\u003C/span>(\u003Cspan class=\"hljs-params\">componentInstance, eventType, eventData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Emit component event\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> customEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'component-event'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">componentId\u003C/span>: componentInstance.\u003Cspan class=\"hljs-property\">id\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">componentName\u003C/span>: componentInstance.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                eventType,\n                eventData,\n                \u003Cspan class=\"hljs-attr\">component\u003C/span>: componentInstance\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">eventBus\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(customEvent);\n        \n        \u003Cspan class=\"hljs-comment\">// Call component-specific handler if defined\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> handlerName = \u003Cspan class=\"hljs-string\">`on\u003Cspan class=\"hljs-subst\">${eventType.charAt(\u003Cspan class=\"hljs-number\">0\u003C/span>).toUpperCase()}\u003C/span>\u003Cspan class=\"hljs-subst\">${eventType.slice(\u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>[handlerName]) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> handler = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Function\u003C/span>(\u003Cspan class=\"hljs-string\">'event'\u003C/span>, \u003Cspan class=\"hljs-string\">'component'\u003C/span>, componentInstance.\u003Cspan class=\"hljs-property\">attributes\u003C/span>[handlerName]);\n                \u003Cspan class=\"hljs-title function_\">handler\u003C/span>(eventData, componentInstance);\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\">`Component event handler error:`\u003C/span>, error);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateComponentId\u003C/span>(\u003Cspan class=\"hljs-params\">componentName\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>_\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>_\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.random().toString(\u003Cspan class=\"hljs-number\">36\u003C/span>).substr(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>)}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// State management methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">setGlobalState\u003C/span>(\u003Cspan class=\"hljs-params\">key, value\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">globalState\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, value);\n        \n        \u003Cspan class=\"hljs-comment\">// Notify components that might be interested\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stateChangeEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'global-state-change'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { key, value }\n        });\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">eventBus\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(stateChangeEvent);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getGlobalState\u003C/span>(\u003Cspan class=\"hljs-params\">key\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">globalState\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(key);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setComponentState\u003C/span>(\u003Cspan class=\"hljs-params\">componentId, key, value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> component = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(componentId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component) {\n            component.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, value);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getComponentState\u003C/span>(\u003Cspan class=\"hljs-params\">componentId, key\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> component = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(componentId);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> component ? component.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(key) : \u003Cspan class=\"hljs-literal\">undefined\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Event bus methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-params\">eventType, handler\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">eventBus\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(eventType, handler);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">off\u003C/span>(\u003Cspan class=\"hljs-params\">eventType, handler\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">eventBus\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeEventListener\u003C/span>(eventType, handler);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">emit\u003C/span>(\u003Cspan class=\"hljs-params\">eventType, detail\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(eventType, { detail });\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">eventBus\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Component communication\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">sendMessage\u003C/span>(\u003Cspan class=\"hljs-params\">fromComponentId, toComponentId, message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toComponent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(toComponentId);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (toComponent) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleComponentEvent\u003C/span>(toComponent, \u003Cspan class=\"hljs-string\">'message'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">from\u003C/span>: fromComponentId,\n                message\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">broadcast\u003C/span>(\u003Cspan class=\"hljs-params\">fromComponentId, message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [componentId, component] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentId !== fromComponentId) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleComponentEvent\u003C/span>(component, \u003Cspan class=\"hljs-string\">'broadcast'\u003C/span>, {\n                    \u003Cspan class=\"hljs-attr\">from\u003C/span>: fromComponentId,\n                    message\n                });\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Query components\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">findComponentsByName\u003C/span>(\u003Cspan class=\"hljs-params\">componentName\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">component\u003C/span> =>\u003C/span> component.\u003Cspan class=\"hljs-property\">name\u003C/span> === componentName);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findComponentsWithAttribute\u003C/span>(\u003Cspan class=\"hljs-params\">attributeName, attributeValue\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">component\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> attrValue = component.\u003Cspan class=\"hljs-property\">attributes\u003C/span>[attributeName];\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> attributeValue === \u003Cspan class=\"hljs-literal\">undefined\u003C/span> ? attrValue !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span> : attrValue === attributeValue;\n            });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAllComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getComponentStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stats = {\n            \u003Cspan class=\"hljs-attr\">totalComponents\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">componentsByType\u003C/span>: {},\n            \u003Cspan class=\"hljs-attr\">mountedComponents\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">destroyedComponents\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> component \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentInstances\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>()) {\n            stats.\u003Cspan class=\"hljs-property\">componentsByType\u003C/span>[component.\u003Cspan class=\"hljs-property\">name\u003C/span>] = \n                (stats.\u003Cspan class=\"hljs-property\">componentsByType\u003C/span>[component.\u003Cspan class=\"hljs-property\">name\u003C/span>] || \u003Cspan class=\"hljs-number\">0\u003C/span>) + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">mounted\u003C/span>) stats.\u003Cspan class=\"hljs-property\">mountedComponents\u003C/span>++;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">destroyed\u003C/span>) stats.\u003Cspan class=\"hljs-property\">destroyedComponents\u003C/span>++;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> stats;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced component system with lifecycle management\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LifecycleAwareComponentSystem\u003C/span> \u003Cspan class=\"hljs-keyword\">extends\u003C/span> \u003Cspan class=\"hljs-title class_ inherited__\">MarkdownComponentSystem\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">super\u003C/span>(options);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ComponentLifecycleManager\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupLifecycleHooks\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupLifecycleHooks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Register default lifecycle hooks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerLifecycleHook\u003C/span>(\u003Cspan class=\"hljs-string\">'created'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (component) => {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Component created: \u003Cspan class=\"hljs-subst\">${component.name}\u003C/span> (\u003Cspan class=\"hljs-subst\">${component.id}\u003C/span>)`\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerLifecycleHook\u003C/span>(\u003Cspan class=\"hljs-string\">'mounted'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (component) => {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Component mounted: \u003Cspan class=\"hljs-subst\">${component.name}\u003C/span> (\u003Cspan class=\"hljs-subst\">${component.id}\u003C/span>)`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Initialize component-specific features\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeComponentFeatures\u003C/span>(component);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerLifecycleHook\u003C/span>(\u003Cspan class=\"hljs-string\">'destroyed'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (component) => {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Component destroyed: \u003Cspan class=\"hljs-subst\">${component.name}\u003C/span> (\u003Cspan class=\"hljs-subst\">${component.id}\u003C/span>)`\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">initializeComponentFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">component\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Auto-initialize syntax highlighting\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">name\u003C/span> === \u003Cspan class=\"hljs-string\">'code-example'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeSyntaxHighlighting\u003C/span>(component);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Auto-initialize interactive features\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">attributes\u003C/span>.\u003Cspan class=\"hljs-property\">interactive\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeInteractiveFeatures\u003C/span>(component);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Auto-initialize analytics tracking\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">attributes\u003C/span>.\u003Cspan class=\"hljs-property\">trackAnalytics\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeAnalyticsTracking\u003C/span>(component);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">initializeSyntaxHighlighting\u003C/span>(\u003Cspan class=\"hljs-params\">component\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">element\u003C/span> && \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Prism\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeElements = component.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'code[class*="language-"]'\u003C/span>);\n            codeElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(el));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">initializeInteractiveFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">component\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add interactive capabilities based on component type\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">element\u003C/span>) {\n            component.\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\">'interactive-component'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Enable keyboard navigation\u003C/span>\n            component.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Add ARIA attributes\u003C/span>\n            component.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'application'\u003C/span>);\n            component.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">`Interactive \u003Cspan class=\"hljs-subst\">${component.name}\u003C/span> component`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeAnalyticsTracking\u003C/span>(\u003Cspan class=\"hljs-params\">component\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Track component interactions\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'component-event'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">detail\u003C/span>.\u003Cspan class=\"hljs-property\">componentId\u003C/span> === component.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">trackComponentEvent\u003C/span>(component, event.\u003Cspan class=\"hljs-property\">detail\u003C/span>.\u003Cspan class=\"hljs-property\">eventType\u003C/span>, event.\u003Cspan class=\"hljs-property\">detail\u003C/span>.\u003Cspan class=\"hljs-property\">eventData\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">trackComponentEvent\u003C/span>(\u003Cspan class=\"hljs-params\">component, eventType, eventData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Send analytics event (implementation depends on your analytics system)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> gtag !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-title function_\">gtag\u003C/span>(\u003Cspan class=\"hljs-string\">'event'\u003C/span>, \u003Cspan class=\"hljs-string\">'component_interaction'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">component_name\u003C/span>: component.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">event_type\u003C/span>: eventType,\n                \u003Cspan class=\"hljs-attr\">component_id\u003C/span>: component.\u003Cspan class=\"hljs-property\">id\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, attributes, content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create component instance with lifecycle management\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentInstance = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">createComponent\u003C/span>(\n            componentName, \n            attributes, \n            content, \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-comment\">// Render using parent method\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> html = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">super\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(componentName, attributes, content);\n        \n        \u003Cspan class=\"hljs-comment\">// Parse HTML to get DOM element (in browser environment)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tempDiv = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            tempDiv.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = html;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> element = tempDiv.\u003Cspan class=\"hljs-property\">firstElementChild\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element) {\n                \u003Cspan class=\"hljs-comment\">// Add component ID to element\u003C/span>\n                element.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-component-id'\u003C/span>, componentInstance.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Mount component when element is added to DOM\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                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mutation.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'childList'\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> componentEl = node.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-component-id="\u003Cspan class=\"hljs-subst\">${componentInstance.id}\u003C/span>"]`\u003C/span>) || \n                                                       (node.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-component-id'\u003C/span>) === componentInstance.\u003Cspan class=\"hljs-property\">id\u003C/span> ? node : \u003Cspan class=\"hljs-literal\">null\u003C/span>);\n                                    \n                                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (componentEl) {\n                                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">mountComponent\u003C/span>(componentInstance, componentEl);\n                                        observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n                                    }\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>, { \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>, \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n                \n                \u003Cspan class=\"hljs-comment\">// Auto-disconnect observer after 10 seconds to prevent memory leaks\u003C/span>\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>(), \u003Cspan class=\"hljs-number\">10000\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Utility methods for component management\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">destroyAllComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> components = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAllComponents\u003C/span>();\n        components.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">component\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroyComponent\u003C/span>(component.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getComponentStats\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\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">getComponentStats\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findComponents\u003C/span>(\u003Cspan class=\"hljs-params\">selector\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (selector.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'.'\u003C/span>)) {\n            \u003Cspan class=\"hljs-comment\">// Find by name\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">findComponentsByName\u003C/span>(selector.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (selector.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'['\u003C/span>) && selector.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">']'\u003C/span>)) {\n            \u003Cspan class=\"hljs-comment\">// Find by attribute\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = selector.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^\\[(\\w+)(?:=(.+))?\\]$/\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (match) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> [, attrName, attrValue] = match;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lifecycleManager\u003C/span>.\u003Cspan class=\"hljs-title function_\">findComponentsWithAttribute\u003C/span>(attrName, attrValue);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> [];\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = { \u003Cspan class=\"hljs-title class_\">ComponentLifecycleManager\u003C/span>, \u003Cspan class=\"hljs-title class_\">LifecycleAwareComponentSystem\u003C/span> };\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown custom HTML components and extensions represent a powerful approach to creating dynamic, interactive documentation that bridges the gap between static content and modern web applications. Through sophisticated component architectures, advanced templating systems, and comprehensive lifecycle management, technical teams can build rich documentation experiences that engage readers, provide interactive learning opportunities, and maintain the simplicity that makes Markdown an effective content format.\u003C/p>\n\u003Cp>The key to successful custom component implementation lies in balancing functionality with maintainability, ensuring that enhanced capabilities serve content quality and user experience rather than introducing unnecessary complexity. Whether you're building interactive code examples, dynamic data visualizations, or comprehensive component libraries, the techniques covered in this guide provide the foundation for creating scalable, reusable documentation elements that enhance reader engagement and learning outcomes.\u003C/p>\n\u003Cp>Remember to implement proper testing and validation systems for your custom components, establish clear documentation and usage guidelines for content creators, and continuously monitor component performance and user interactions to optimize the documentation experience. With thoughtful implementation of advanced custom component systems, your Markdown-based documentation can achieve the same level of interactivity and user engagement that modern web applications provide while maintaining the efficiency and portability that makes Markdown such an effective format for technical content creation.\u003C/p>\n",[15,19,22,25,28,31],{"id":16,"text":17,"level":18},"why-implement-custom-markdown-components","Why Implement Custom Markdown Components?",2,{"id":20,"text":21,"level":18},"foundation-component-architecture","Foundation Component Architecture",{"id":23,"text":24,"level":18},"interactive-component-development","Interactive Component Development",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"advanced-component-patterns-and-best-practices","Advanced Component Patterns and Best Practices",{"id":32,"text":33,"level":18},"conclusion","Conclusion",[],[36,44,52],{"slug":37,"title":38,"description":39,"excerpt":40,"date":41,"category":9,"author":10,"keywords":42,"readingMinutes":43},"markdown-custom-directives-block-extensions-complete-guide","Markdown Custom Directives and Block Extensions: Complete Guide to Advanced Content Blocks and Interactive Components","Master custom Markdown directives, block extensions, and advanced content components. Learn to create custom syntax, interactive blocks, and extensible Markdown systems for technical documentation and content management.","Custom Markdown directives and block extensions enable sophisticated content creation through extensible syntax systems, interactive components, and advanced formatting capabilities that extend…","2025-12-30","markdown custom directives, markdown block extensions, custom markdown syntax, markdown plugins, advanced markdown components, markdown content blocks, extensible markdown, custom markdown elements",20,{"slug":45,"title":46,"description":47,"excerpt":48,"date":49,"category":9,"author":10,"keywords":50,"readingMinutes":51},"markdown-custom-directives-and-extensions-complete-guide","Markdown Custom Directives and Extensions: Complete Guide for Advanced Content Management and Interactive Features","Master Markdown custom directives and extensions for advanced content management systems. Learn implementation techniques, integration patterns, and security considerations for interactive Markdown features.","Markdown custom directives and extensions enable advanced content management by extending standard Markdown syntax with specialized features, interactive components, and domain-specific…","2025-10-31","markdown custom directives, markdown extensions, custom markdown syntax, markdown plugins, advanced markdown features, markdown content management, interactive markdown, markdown preprocessing, custom markdown components, markdown macros",26,{"slug":53,"title":54,"description":55,"excerpt":56,"date":57,"category":9,"author":10,"keywords":58,"readingMinutes":12},"markdown-dynamic-content-generation-complete-guide","Markdown Dynamic Content Generation: Complete Guide for Automated Documentation and Data-Driven Content Creation","Master dynamic Markdown content generation with templating systems, data binding, automated documentation generation, and programmatic content creation. Learn to build scalable, maintainable documentation workflows that generate content from data sources automatically.","Dynamic Markdown content generation transforms static documentation workflows into powerful, data-driven systems that automatically create, update, and maintain content based on external data…","2025-10-13","markdown dynamic content, markdown templates, automated documentation generation, data-driven markdown, markdown templating systems, programmatic content creation, dynamic documentation workflows, markdown automation",1792184942594]