test-repo/docs/.vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import TypeIt from 'typeit'
import { onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { useRoute, useData } from 'vitepress'
import './style.css'
import Layout from './Layout.vue'
import HomeFeatures from './components/HomeFeatures.vue'
import WelcomeScreen from './components/WelcomeScreen.vue'
import NavGrid from './components/NavGrid.vue'
import NavCard from './components/NavCard.vue'
import CategoryIndex from './components/CategoryIndex.vue'
import ArticleGrid from './components/ArticleGrid.vue'
import RelatedArticlesSection from './components/RelatedArticlesSection.vue'
import StepBar from './components/StepBar.vue'
import ChapterIntroduction from './components/ChapterIntroduction.vue'
import ReadingProgress from './components/ReadingProgress.vue'
import SummaryCard from './components/SummaryCard.vue'
import WebTerminal from './components/appendix/terminal-intro/WebTerminal.vue'
import TerminalGrid from './components/appendix/terminal-intro/TerminalGrid.vue'
import CellInspector from './components/appendix/terminal-intro/CellInspector.vue'
import EscapeSequences from './components/appendix/terminal-intro/EscapeSequences.vue'
import InputVisualizer from './components/appendix/terminal-intro/InputVisualizer.vue'
import SignalsDemo from './components/appendix/terminal-intro/SignalsDemo.vue'
import FlowDiagram from './components/appendix/terminal-intro/FlowDiagram.vue'
import BufferSwitchDemo from './components/appendix/terminal-intro/BufferSwitchDemo.vue'
import AdvancedTUIDemo from './components/appendix/terminal-intro/AdvancedTUIDemo.vue'
import ArchitectureDemo from './components/appendix/terminal-intro/ArchitectureDemo.vue'
import TerminalDefinition from './components/appendix/terminal-intro/TerminalDefinition.vue'
import TerminalOSDemo from './components/appendix/terminal-intro/TerminalOSDemo.vue'
import TerminalHandsOn from './components/appendix/terminal-intro/TerminalHandsOn.vue'

import EscapeParserDemo from './components/appendix/terminal-intro/EscapeParserDemo.vue'
import CookedRawDemo from './components/appendix/terminal-intro/CookedRawDemo.vue'

// API Intro Components
import ApiQuickStartDemo from './components/appendix/api-intro/ApiQuickStartDemo.vue'
import ApiConceptDemo from './components/appendix/api-intro/ApiConceptDemo.vue'
import RequestResponseFlow from './components/appendix/api-intro/RequestResponseFlow.vue'
import ApiMethodDemo from './components/appendix/api-intro/ApiMethodDemo.vue'
import ApiDocumentDemo from './components/appendix/api-intro/ApiDocumentDemo.vue'
import ApiPlayground from './components/appendix/api-intro/ApiPlayground.vue'
import RealWorldApiDemo from './components/appendix/api-intro/RealWorldApiDemo.vue'
import FunctionApiDemo from './components/appendix/api-intro/FunctionApiDemo.vue'
import ApiTypesComparison from './components/appendix/api-intro/ApiTypesComparison.vue'
import ApiFunctionVsHttp from './components/appendix/api-intro/ApiFunctionVsHttp.vue'
import DocumentTypesComparison from './components/appendix/api-intro/DocumentTypesComparison.vue'
import HttpMethodsDemo from './components/appendix/api-intro/HttpMethodsDemo.vue'
import StatusCodeCategories from './components/appendix/api-intro/StatusCodeCategories.vue'

// LLM Intro Components
import EmbeddingDemo from './components/appendix/llm-intro/EmbeddingDemo.vue'
import LinearAttentionDemo from './components/appendix/llm-intro/LinearAttentionDemo.vue'
import LlmQuickStartDemo from './components/appendix/llm-intro/LlmQuickStartDemo.vue'
import MoEDemo from './components/appendix/llm-intro/MoEDemo.vue'
import NextTokenPrediction from './components/appendix/llm-intro/NextTokenPrediction.vue'
import RNNvsTransformer from './components/appendix/llm-intro/RNNvsTransformer.vue'
import ThinkingModelDemo from './components/appendix/llm-intro/ThinkingModelDemo.vue'
import TokenizationDemo from './components/appendix/llm-intro/TokenizationDemo.vue'
import TokenizerToMatrix from './components/appendix/llm-intro/TokenizerToMatrix.vue'
import TrainingInferenceDemo from './components/appendix/llm-intro/TrainingInferenceDemo.vue'

// VLM Intro Components
import AttentionDemo from './components/appendix/vlm-intro/AttentionDemo.vue'
import FeatureAlignmentDemo from './components/appendix/vlm-intro/FeatureAlignmentDemo.vue'
import LinearProjectionDemo from './components/appendix/vlm-intro/LinearProjectionDemo.vue'
import ModelArchitectureComparisonDemo from './components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue'
import PatchifyDemo from './components/appendix/vlm-intro/PatchifyDemo.vue'
import PositionalEmbeddingDemo from './components/appendix/vlm-intro/PositionalEmbeddingDemo.vue'
import ProjectorDemo from './components/appendix/vlm-intro/ProjectorDemo.vue'
import TrainingPipelineDemo from './components/appendix/vlm-intro/TrainingPipelineDemo.vue'
import VLMInferenceDemo from './components/appendix/vlm-intro/VLMInferenceDemo.vue'
import ViTOutputDemo from './components/appendix/vlm-intro/ViTOutputDemo.vue'
import VlmQuickStartDemo from './components/appendix/vlm-intro/VlmQuickStartDemo.vue'

// Image Gen Intro Components
import ImageGenArchitecture from './components/appendix/image-gen-intro/ImageGenArchitecture.vue'
import LatentSpaceViz from './components/appendix/image-gen-intro/LatentSpaceViz.vue'
import DiffusionProcessDemo from './components/appendix/image-gen-intro/DiffusionProcessDemo.vue'
import FlowMatchingDemo from './components/appendix/image-gen-intro/FlowMatchingDemo.vue'
import PromptVisualizer from './components/appendix/image-gen-intro/PromptVisualizer.vue'
import ImageGenQuickStartDemo from './components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue'

// Audio Intro Components
import AudioWaveformDemo from './components/appendix/audio-intro/AudioWaveformDemo.vue'
import AudioTokenizationDemo from './components/appendix/audio-intro/AudioTokenizationDemo.vue'
import SpectrogramViz from './components/appendix/audio-intro/SpectrogramViz.vue'
import AutoregressiveAudioDemo from './components/appendix/audio-intro/AutoregressiveAudioDemo.vue'
import AudioQuickStartDemo from './components/appendix/audio-intro/AudioQuickStartDemo.vue'
import MelSpectrogramDemo from './components/appendix/audio-intro/MelSpectrogramDemo.vue'
import TTSPipelineDemo from './components/appendix/audio-intro/TTSPipelineDemo.vue'
import VoiceCloningDemo from './components/appendix/audio-intro/VoiceCloningDemo.vue'
import ASRvsTTSDemo from './components/appendix/audio-intro/ASRvsTTSDemo.vue'
import EmotionControlDemo from './components/appendix/audio-intro/EmotionControlDemo.vue'

// Web Basics Components
import WebTechTriad from './components/appendix/web-basics/WebTechTriad.vue'
import UrlToBrowserDemo from './components/appendix/web-basics/UrlToBrowserDemo.vue'
// Git Intro Components
import GitCommitFlow from './components/appendix/git-intro/GitCommitFlow.vue'
import GitBranchVisual from './components/appendix/git-intro/GitBranchVisual.vue'
import GitSyncDemo from './components/appendix/git-intro/GitSyncDemo.vue'
import GitCommandCheatsheet from './components/appendix/git-intro/GitCommandCheatsheet.vue'

// （保留网络相关，未修改）
import NetworkLayers from './components/appendix/web-basics/NetworkLayers.vue'
import TcpUdpComparison from './components/appendix/web-basics/TcpUdpComparison.vue'
import SubnetCalculator from './components/appendix/web-basics/SubnetCalculator.vue'
import NetworkTroubleshooting from './components/appendix/web-basics/NetworkTroubleshooting.vue'

// Computer Fundamentals Components
import TransistorDemo from './components/appendix/computer-fundamentals/TransistorDemo.vue'
import LogicGateDemo from './components/appendix/computer-fundamentals/LogicGateDemo.vue'
import BinaryAdditionRulesDemo from './components/appendix/computer-fundamentals/BinaryAdditionRulesDemo.vue'
import HalfAdderDemo from './components/appendix/computer-fundamentals/HalfAdderDemo.vue'
import FullAdderDemo from './components/appendix/computer-fundamentals/FullAdderDemo.vue'
import AdderDemo from './components/appendix/computer-fundamentals/AdderDemo.vue'
import AdderChainDemo from './components/appendix/computer-fundamentals/AdderChainDemo.vue'
import CompleteAdderDemo from './components/appendix/computer-fundamentals/CompleteAdderDemo.vue'
import FunctionalUnitDemo from './components/appendix/computer-fundamentals/FunctionalUnitDemo.vue'
import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
import MinCpuDemo from './components/appendix/computer-fundamentals/MinCpuDemo.vue'
import RegisterDemo from './components/appendix/computer-fundamentals/RegisterDemo.vue'
import PipelineDemo from './components/appendix/computer-fundamentals/PipelineDemo.vue'
import ControllerDemo from './components/appendix/computer-fundamentals/ControllerDemo.vue'
import BusSystemDemo from './components/appendix/computer-fundamentals/BusSystemDemo.vue'
import InstructionFormatDemo from './components/appendix/computer-fundamentals/InstructionFormatDemo.vue'
import AddressingModeDemo from './components/appendix/computer-fundamentals/AddressingModeDemo.vue'
import CacheDemo from './components/appendix/computer-fundamentals/CacheDemo.vue'
import IOMethodDemo from './components/appendix/computer-fundamentals/IOMethodDemo.vue'
import PSWFlagDemo from './components/appendix/computer-fundamentals/PSWFlagDemo.vue'
import FlipFlopDemo from './components/appendix/computer-fundamentals/FlipFlopDemo.vue'
// import EvolutionFlowDemo from './components/appendix/computer-fundamentals/EvolutionFlowDemo.vue'
import ProcessDemo from './components/appendix/computer-fundamentals/ProcessDemo.vue'
import MemoryDemo from './components/appendix/computer-fundamentals/MemoryDemo.vue'
import FilesystemDemo from './components/appendix/computer-fundamentals/FilesystemDemo.vue'
import EncodingDemo from './components/appendix/computer-fundamentals/EncodingDemo.vue'
import StorageDemo from './components/appendix/computer-fundamentals/StorageDemo.vue'
import TransmissionDemo from './components/appendix/computer-fundamentals/TransmissionDemo.vue'
import DataStructureDemo from './components/appendix/computer-fundamentals/DataStructureDemo.vue'
import AlgorithmDemo from './components/appendix/computer-fundamentals/AlgorithmDemo.vue'
import LanguageMapDemo from './components/appendix/computer-fundamentals/LanguageMapDemo.vue'
import TypeSystemDemo from './components/appendix/computer-fundamentals/TypeSystemDemo.vue'
import CompilerDemo from './components/appendix/computer-fundamentals/CompilerDemo.vue'
import StaticVsDynamicDemo from './components/appendix/computer-fundamentals/StaticVsDynamicDemo.vue'
import StrongVsWeakDemo from './components/appendix/computer-fundamentals/StrongVsWeakDemo.vue'
import TypeInferenceFlowDemo from './components/appendix/computer-fundamentals/TypeInferenceFlowDemo.vue'
import LexerTokenDemo from './components/appendix/computer-fundamentals/LexerTokenDemo.vue'
import CompileVsInterpretDemo from './components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue'
import CodeToInstructionDemo from './components/appendix/computer-fundamentals/CodeToInstructionDemo.vue'
import CISCvsRISCDemo from './components/appendix/computer-fundamentals/CISCvsRISCDemo.vue'
import TypeSafetyPracticeDemo from './components/appendix/computer-fundamentals/TypeSafetyPracticeDemo.vue'
import GenericTypeDemo from './components/appendix/computer-fundamentals/GenericTypeDemo.vue'
import ASTVisualizerDemo from './components/appendix/computer-fundamentals/ASTVisualizerDemo.vue'
import CodeOptimizationDemo from './components/appendix/computer-fundamentals/CodeOptimizationDemo.vue'
import CFNetworkLayers from './components/appendix/computer-fundamentals/NetworkLayers.vue'
import CFSubnetCalculator from './components/appendix/computer-fundamentals/SubnetCalculator.vue'
import CFTcpUdpComparison from './components/appendix/computer-fundamentals/TcpUdpComparison.vue'

// Computer Fundamentals Additional Components
import OSArchitectureDemo from './components/appendix/computer-fundamentals/OSArchitectureDemo.vue'
import ProgramLaunchDemo from './components/appendix/computer-fundamentals/ProgramLaunchDemo.vue'
import DataLifecycleDemo from './components/appendix/computer-fundamentals/DataLifecycleDemo.vue'
import EncodingStorageTransmissionDemo from './components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue'
import NetworkOverviewDemo from './components/appendix/computer-fundamentals/NetworkOverviewDemo.vue'
import PhysicalLayerDemo from './components/appendix/computer-fundamentals/PhysicalLayerDemo.vue'
import DataLinkLayerDemo from './components/appendix/computer-fundamentals/DataLinkLayerDemo.vue'
import TransportLayerDemo from './components/appendix/computer-fundamentals/TransportLayerDemo.vue'
import ApplicationLayerDemo from './components/appendix/computer-fundamentals/ApplicationLayerDemo.vue'
import DataStructureOverviewDemo from './components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue'
import LinearStructuresDemo from './components/appendix/computer-fundamentals/LinearStructuresDemo.vue'
import HashTableDemo from './components/appendix/computer-fundamentals/HashTableDemo.vue'
import TreeStructureDemo from './components/appendix/computer-fundamentals/TreeStructureDemo.vue'
import DataStructureSelectorDemo from './components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue'
import AlgorithmOverviewDemo from './components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue'
import RecursiveThinkingDemo from './components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue'
import GreedyThinkingDemo from './components/appendix/computer-fundamentals/GreedyThinkingDemo.vue'
import AlgorithmParadigmDemo from './components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue'
import LanguageEvolutionDemo from './components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue'
import ProgrammingParadigmDemo from './components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue'
import LanguageScenarioDemo from './components/appendix/computer-fundamentals/LanguageScenarioDemo.vue'
import ProgrammingLanguageComparisonDemo from './components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue'
import CompilerAnalogyDemo from './components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue'
import SearchAlgorithmDemo from './components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue'
import SortingAlgorithmDemo from './components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue'
import NetworkPrincipleDemo from './components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue'
import DataEncodingBasicsDemo from './components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue'
import StorageHierarchyDemo from './components/appendix/computer-fundamentals/StorageHierarchyDemo.vue'
import GraphStructureDemo from './components/appendix/computer-fundamentals/GraphStructureDemo.vue'
import LanguageTypeModelDemo from './components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue'
import CompilationPracticeDemo from './components/appendix/computer-fundamentals/CompilationPracticeDemo.vue'

// Vibe Coding Fullstack Components
import DeveloperSkillShiftDemo from './components/appendix/computer-fundamentals/DeveloperSkillShiftDemo.vue'
import ComputerFieldMapDemo from './components/appendix/computer-fundamentals/ComputerFieldMapDemo.vue'
import FrontendTriadDemo from './components/appendix/computer-fundamentals/FrontendTriadDemo.vue'
import FrontendFrameworkDemo from './components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue'
import BackendCoreDemo from './components/appendix/computer-fundamentals/BackendCoreDemo.vue'
import ProgrammingLanguageMapDemo from './components/appendix/computer-fundamentals/ProgrammingLanguageMapDemo.vue'
import LanguageSelectionDemo from './components/appendix/computer-fundamentals/LanguageSelectionDemo.vue'
import FullstackSkillDemo from './components/appendix/computer-fundamentals/FullstackSkillDemo.vue'
import AIvsTraditionalDemo from './components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue'
import CareerPathDemo from './components/appendix/computer-fundamentals/CareerPathDemo.vue'
import LearningStrategyDemo from './components/appendix/computer-fundamentals/LearningStrategyDemo.vue'
import VibeCodingFlowDemo from './components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue'
import PowerOnDemo from './components/appendix/computer-fundamentals/PowerOnDemo.vue'
import BootProcessDemo from './components/appendix/computer-fundamentals/BootProcessDemo.vue'
// Computer Fundamentals - Additional
import BiosUefiDemo from './components/appendix/computer-fundamentals/BiosUefiDemo.vue'
import BiosUefiInteractiveDemo from './components/appendix/computer-fundamentals/BiosUefiInteractiveDemo.vue'
import AppLaunchDemo from './components/appendix/computer-fundamentals/AppLaunchDemo.vue'
import DesktopDemo from './components/appendix/computer-fundamentals/DesktopDemo.vue'
import OSBootInteractiveDemo from './components/appendix/computer-fundamentals/OSBootInteractiveDemo.vue'
import BrowserArchitectureDemo from './components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue'
import URLRequestDemo from './components/appendix/computer-fundamentals/URLRequestDemo.vue'
import RenderingDemo from './components/appendix/computer-fundamentals/RenderingDemo.vue'
import FullProcessDemo from './components/appendix/computer-fundamentals/FullProcessDemo.vue'

// Data Encoding Components
import GarbledTextDemo from './components/appendix/data-encoding/GarbledTextDemo.vue'
import CharacterEncodingExplorer from './components/appendix/data-encoding/CharacterEncodingExplorer.vue'
import StoragePyramidDemo from './components/appendix/data-encoding/StoragePyramidDemo.vue'
import DataTransmissionDemo from './components/appendix/data-encoding/DataTransmissionDemo.vue'
import PhotoUploadJourneyDemo from './components/appendix/data-encoding/PhotoUploadJourneyDemo.vue'
import ImageEncodingDemo from './components/appendix/data-encoding/ImageEncodingDemo.vue'
import AudioEncodingDemo from './components/appendix/data-encoding/AudioEncodingDemo.vue'

// Deployment appendix components
import DeploymentOverviewDemo from './components/appendix/deployment/DeploymentOverviewDemo.vue'
import DeploymentBuildDemo from './components/appendix/deployment/DeploymentBuildDemo.vue'
import DeploymentServerDemo from './components/appendix/deployment/DeploymentServerDemo.vue'
import DeploymentDnsDemo from './components/appendix/deployment/DeploymentDnsDemo.vue'
import DeploymentHttpsDemo from './components/appendix/deployment/DeploymentHttpsDemo.vue'
import DeploymentCicdDemo from './components/appendix/deployment/DeploymentCicdDemo.vue'
import DeploymentMonitorDemo from './components/appendix/deployment/DeploymentMonitorDemo.vue'
import CssBoxModel from './components/appendix/web-basics/CssBoxModel.vue'
import CssFlexbox from './components/appendix/web-basics/CssFlexbox.vue'
import CssLayoutDemo from './components/appendix/web-basics/CssLayoutDemo.vue'
import CssPlaygroundDemo from './components/appendix/web-basics/CssPlaygroundDemo.vue'
import CssCommonProperties from './components/appendix/web-basics/CssCommonProperties.vue'
import CssSelectorsDemo from './components/appendix/web-basics/CssSelectorsDemo.vue'
import DomManipulator from './components/appendix/web-basics/DomManipulator.vue'
import SemanticTagsDemo from './components/appendix/web-basics/SemanticTagsDemo.vue'
import DnsLookupDemo from './components/appendix/web-basics/DnsLookupDemo.vue'
import TcpHandshakeDemo from './components/appendix/web-basics/TcpHandshakeDemo.vue'
import UrlParserDemo from './components/appendix/web-basics/UrlParserDemo.vue'
import HttpExchangeDemo from './components/appendix/web-basics/HttpExchangeDemo.vue'
import BrowserRenderingDemo from './components/appendix/web-basics/BrowserRenderingDemo.vue'

// Browser & Frontend Components (a11y & i18n)
import AccessibilityDemo from './components/appendix/browser-frontend/AccessibilityDemo.vue'
import InternationalizationDemo from './components/appendix/browser-frontend/InternationalizationDemo.vue'

// URL to Browser Components
import UrlToBrowserQuickStart from './components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
import FrontendEvolutionDemo from './components/appendix/web-basics/FrontendEvolutionDemo.vue'
import SliceRequestDemo from './components/appendix/web-basics/SliceRequestDemo.vue'
import ResponsiveGridDemo from './components/appendix/web-basics/ResponsiveGridDemo.vue'
import JQueryVsStateDemo from './components/appendix/web-basics/JQueryVsStateDemo.vue'
import VueReactComparisonDemo from './components/appendix/web-basics/VueReactComparisonDemo.vue'
import RoutingModeDemo from './components/appendix/web-basics/RoutingModeDemo.vue'
import SpaStatePreservationDemo from './components/appendix/web-basics/SpaStatePreservationDemo.vue'
import BundlerSizeDemo from './components/appendix/web-basics/BundlerSizeDemo.vue'
import RenderingStrategyDemo from './components/appendix/web-basics/RenderingStrategyDemo.vue'
import BigFrontendScopeDemo from './components/appendix/web-basics/BigFrontendScopeDemo.vue'
import AiEvolutionDemo from './components/appendix/ai-history/AiEvolutionDemo.vue'
import RuleBasedVsLearningDemo from './components/appendix/ai-history/RuleBasedVsLearningDemo.vue'
import PerceptronDemo from './components/appendix/ai-history/PerceptronDemo.vue'
import AIEvolutionTimelineDemo from './components/appendix/ai-history/AIEvolutionTimelineDemo.vue'
import CombinatorialExplosionDemo from './components/appendix/ai-history/CombinatorialExplosionDemo.vue'
import NeuralNetworkVisualizationDemo from './components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue'
import BackpropagationDemo from './components/appendix/ai-history/BackpropagationDemo.vue'
import AttentionMechanismDemo from './components/appendix/ai-history/AttentionMechanismDemo.vue'
import DiscriminativeVsGenerativeDemo from './components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue'
import GPTEvolutionDemo from './components/appendix/ai-history/GPTEvolutionDemo.vue'
import FoundationDemo from './components/appendix/ai-history/FoundationDemo.vue'
import ExpertSystemWaveDemo from './components/appendix/ai-history/ExpertSystemWaveDemo.vue'
import AIErasComparisonDemo from './components/appendix/ai-history/AIErasComparisonDemo.vue'

// Transformer & Attention Components
import TransformerQuickStartDemo from './components/appendix/transformer-attention/TransformerQuickStartDemo.vue'
import RnnVsTransformerDemo from './components/appendix/transformer-attention/RnnVsTransformerDemo.vue'
import SelfAttentionDemo from './components/appendix/transformer-attention/SelfAttentionDemo.vue'
import QKVMechanismDemo from './components/appendix/transformer-attention/QKVMechanismDemo.vue'
import MultiHeadAttentionDemo from './components/appendix/transformer-attention/MultiHeadAttentionDemo.vue'
import TransformerArchitectureDemo from './components/appendix/transformer-attention/TransformerArchitectureDemo.vue'
import PositionalEncodingDemo from './components/appendix/transformer-attention/PositionalEncodingDemo.vue'
import AttentionDecompositionDemo from './components/appendix/transformer-attention/AttentionDecompositionDemo.vue'

// AI Protocols Components
import McpVisualDemo from './components/appendix/ai-protocols/McpVisualDemo.vue'
import A2AVisualDemo from './components/appendix/ai-protocols/A2AVisualDemo.vue'
import McpDetailedDemo from './components/appendix/ai-protocols/McpDetailedDemo.vue'
import A2ADetailedDemo from './components/appendix/ai-protocols/A2ADetailedDemo.vue'
import ProtocolComparisonDemo from './components/appendix/ai-protocols/ProtocolComparisonDemo.vue'
import ProtocolWorkflowDemo from './components/appendix/ai-protocols/ProtocolWorkflowDemo.vue'

import ImperativeVsDeclarativeDemo from './components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue'
import ComponentReusabilityDemo from './components/appendix/web-basics/ComponentReusabilityDemo.vue'

// Frontend Evolution Components
import FrontendEvolutionTimelineDemo from './components/appendix/frontend-evolution/FrontendEvolutionDemo.vue'
import EvolutionSliceRequestDemo from './components/appendix/frontend-evolution/SliceRequestDemo.vue'
import EvolutionResponsiveGridDemo from './components/appendix/frontend-evolution/ResponsiveGridDemo.vue'
import EvolutionJQueryVsStateDemo from './components/appendix/frontend-evolution/JQueryVsStateDemo.vue'
import EvolutionRoutingModeDemo from './components/appendix/frontend-evolution/RoutingModeDemo.vue'
import EvolutionRenderingStrategyDemo from './components/appendix/frontend-evolution/RenderingStrategyDemo.vue'
import EvolutionImperativeVsDeclarativeDemo from './components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue'
import FrameworkMotivationDemo from './components/appendix/framework-nature/FrameworkMotivationDemo.vue'
import ReactivityMechanismDemo from './components/appendix/framework-nature/ReactivityMechanismDemo.vue'
import ManualVsAutoSyncDemo from './components/appendix/framework-nature/ManualVsAutoSyncDemo.vue'
import VirtualDomDiffDemo from './components/appendix/framework-nature/VirtualDomDiffDemo.vue'
import FrameworkSpectrumDemo from './components/appendix/framework-nature/FrameworkSpectrumDemo.vue'
import DataUIGapDemo from './components/appendix/framework-nature/DataUIGapDemo.vue'
import DeclarativeFormulaDemo from './components/appendix/framework-nature/DeclarativeFormulaDemo.vue'
import DomOperationCostDemo from './components/appendix/framework-nature/DomOperationCostDemo.vue'
import ComponentTreeDemo from './components/appendix/framework-nature/ComponentTreeDemo.vue'
import WhatIsDomDemo from './components/appendix/framework-nature/WhatIsDomDemo.vue'
import WhyNoAutoSyncDemo from './components/appendix/framework-nature/WhyNoAutoSyncDemo.vue'

import BackendEvolutionDemo from './components/appendix/backend-evolution/BackendEvolutionDemo.vue'
import BackendQuickStartDemo from './components/appendix/backend-evolution/BackendQuickStartDemo.vue'
import EvolutionIntroDemo from './components/appendix/backend-evolution/EvolutionIntroDemo.vue'
import PhysicalServerDemo from './components/appendix/backend-evolution/PhysicalServerDemo.vue'
import MonolithDemo from './components/appendix/backend-evolution/MonolithDemo.vue'
import ContainerDockerDemo from './components/appendix/backend-evolution/ContainerDockerDemo.vue'
import MicroservicesDemo from './components/appendix/backend-evolution/MicroservicesDemo.vue'
import KubernetesDemo from './components/appendix/backend-evolution/KubernetesDemo.vue'
import ServerlessDemo from './components/appendix/backend-evolution/ServerlessDemo.vue'
import ArchitectureComparisonDemo from './components/appendix/backend-evolution/ArchitectureComparisonDemo.vue'
import DeploymentFlowDemo from './components/appendix/backend-evolution/DeploymentFlowDemo.vue'
import TechStackTimelineDemo from './components/appendix/backend-evolution/TechStackTimelineDemo.vue'
import ScalingStrategyDemo from './components/appendix/backend-evolution/ScalingStrategyDemo.vue'
import MonolithVsMicroserviceDemo from './components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue'
import CgiQueueDemo from './components/appendix/backend-evolution/CgiQueueDemo.vue'
import MonolithReleaseRiskDemo from './components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue'
import MicroserviceLatencyDemo from './components/appendix/backend-evolution/MicroserviceLatencyDemo.vue'
import CacheHitRatioDemo from './components/appendix/backend-evolution/CacheHitRatioDemo.vue'
import ServerlessCostAutoScaleDemo from './components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue'

// Frontend Performance Components
import PerformanceMetricsDemo from './components/appendix/frontend-performance/PerformanceMetricsDemo.vue'
import PerformanceOverviewDemo from './components/appendix/frontend-performance/PerformanceOverviewDemo.vue'
import ReflowRepaintDemo from './components/appendix/frontend-performance/ReflowRepaintDemo.vue'
import ImageOptimizationDemo from './components/appendix/frontend-performance/ImageOptimizationDemo.vue'
import LazyLoadingDemo from './components/appendix/frontend-performance/LazyLoadingDemo.vue'
import CachingStrategyDemo from './components/appendix/frontend-performance/CachingStrategyDemo.vue'
import CriticalRenderingPathDemo from './components/appendix/frontend-performance/CriticalRenderingPathDemo.vue'
import VirtualScrollingDemo from './components/appendix/frontend-performance/VirtualScrollingDemo.vue'

// Canvas Intro Components
import CanvasBasicsDemo from './components/appendix/canvas-intro/CanvasBasicsDemo.vue'
import CoordinateSystemDemo from './components/appendix/canvas-intro/CoordinateSystemDemo.vue'
import AnimationLoopDemo from './components/appendix/canvas-intro/AnimationLoopDemo.vue'
import EventHandlingDemo from './components/appendix/canvas-intro/EventHandlingDemo.vue'
import ParticleSystemDemo from './components/appendix/canvas-intro/ParticleSystemDemo.vue'
import PerformanceDemo from './components/appendix/canvas-intro/PerformanceDemo.vue'

// Cache Design Components
import CacheArchitectureDemo from './components/appendix/cache-design/CacheArchitectureDemo.vue'
import LocalityPrincipleDemo from './components/appendix/cache-design/LocalityPrincipleDemo.vue'
import CacheLifecycleDemo from './components/appendix/cache-design/CacheLifecycleDemo.vue'
import LocalVsDistributedCacheDemo from './components/appendix/cache-design/LocalVsDistributedCacheDemo.vue'
import MultiLevelCacheDemo from './components/appendix/cache-design/MultiLevelCacheDemo.vue'
import CachePatternsDemo from './components/appendix/cache-design/CachePatternsDemo.vue'
import CacheProblemsDemo from './components/appendix/cache-design/CacheProblemsDemo.vue'
import ProductCacheDemo from './components/appendix/cache-design/ProductCacheDemo.vue'

// Auth Design Components
import AuthEvolutionDemo from './components/appendix/auth-design/AuthEvolutionDemo.vue'
import AuthBasicsDemo from './components/appendix/auth-design/AuthBasicsDemo.vue'
import AuthInteractiveLoginDemo from './components/appendix/auth-design/AuthInteractiveLoginDemo.vue'
import AuthNvsAuthZDemo from './components/appendix/auth-design/AuthNvsAuthZDemo.vue'
import SessionCookieDemo from './components/appendix/auth-design/SessionCookieDemo.vue'
import JWTWorkflowDemo from './components/appendix/auth-design/JWTWorkflowDemo.vue'
import SessionVsJWTDemo from './components/appendix/auth-design/SessionVsJWTDemo.vue'
import OAuth2FlowDemo from './components/appendix/auth-design/OAuth2FlowDemo.vue'
import PasswordHashingDemo from './components/appendix/auth-design/PasswordHashingDemo.vue'
import CSRFDefenseDemo from './components/appendix/auth-design/CSRFDefenseDemo.vue'

// Queue Design Components
import MessageQueueDemo from './components/appendix/queue-design/MessageQueueDemo.vue'
import PeakShavingDemo from './components/appendix/queue-design/PeakShavingDemo.vue'
import MessageQueueComponentsDemo from './components/appendix/queue-design/MessageQueueComponentsDemo.vue'
import PointToPointVsPubSubDemo from './components/appendix/queue-design/PointToPointVsPubSubDemo.vue'
import MessageQueueComparisonDemo from './components/appendix/queue-design/MessageQueueComparisonDemo.vue'
import CouplingDemo from './components/appendix/queue-design/CouplingDemo.vue'
import DecouplingDemo from './components/appendix/queue-design/DecouplingDemo.vue'
import PubSubDemo from './components/appendix/queue-design/PubSubDemo.vue'
import DeadLetterQueueDemo from './components/appendix/queue-design/DeadLetterQueueDemo.vue'
import DelayedMessageDemo from './components/appendix/queue-design/DelayedMessageDemo.vue'
import SeckillSystemDemo from './components/appendix/queue-design/SeckillSystemDemo.vue'
import MQArchitectureDemo from './components/appendix/queue-design/MQArchitectureDemo.vue'
import ProducerConsumerDemo from './components/appendix/queue-design/ProducerConsumerDemo.vue'
import ReliabilityDemo from './components/appendix/queue-design/ReliabilityDemo.vue'
import IdempotenceDemo from './components/appendix/queue-design/IdempotenceDemo.vue'
import MQComparisonDemo from './components/appendix/queue-design/MQComparisonDemo.vue'

// Prompt Engineering Components
import PromptQuickStartDemo from './components/appendix/prompt-engineering/PromptQuickStartDemo.vue'
import PromptComparisonDemo from './components/appendix/prompt-engineering/PromptComparisonDemo.vue'
import FewShotDemo from './components/appendix/prompt-engineering/FewShotDemo.vue'
import ChainOfThoughtDemo from './components/appendix/prompt-engineering/ChainOfThoughtDemo.vue'
import PromptTemplatesDemo from './components/appendix/prompt-engineering/PromptTemplatesDemo.vue'
import PromptRobustnessDemo from './components/appendix/prompt-engineering/PromptRobustnessDemo.vue'
import PromptSecurityDemo from './components/appendix/prompt-engineering/PromptSecurityDemo.vue'
import TrainingProcessDemo from './components/appendix/prompt-engineering/TrainingProcessDemo.vue'

// Context Engineering Components
import AgentContextFlow from './components/appendix/context-engineering/AgentContextFlow.vue'
import IntroProblemReasonSolution from './components/appendix/context-engineering/IntroProblemReasonSolution.vue'
import ContextWindowVisualizer from './components/appendix/context-engineering/ContextWindowVisualizer.vue'
import SlidingWindowDemo from './components/appendix/context-engineering/SlidingWindowDemo.vue'
import SelectiveContextDemo from './components/appendix/context-engineering/SelectiveContextDemo.vue'
import RAGSimulationDemo from './components/appendix/context-engineering/RAGSimulationDemo.vue'
import ContextCompressionDemo from './components/appendix/context-engineering/ContextCompressionDemo.vue'
import MemoryPalaceDemo from './components/appendix/context-engineering/MemoryPalaceDemo.vue'
import MemoryPalaceActionDemo from './components/appendix/context-engineering/MemoryPalaceActionDemo.vue'
import KVCacheDemo from './components/appendix/context-engineering/KVCacheDemo.vue'
import LostInMiddleDemo from './components/appendix/context-engineering/LostInMiddleDemo.vue'

// Frontend Engineering Components
import BuildPipelineDemo from './components/appendix/frontend-engineering/BuildPipelineDemo.vue'
import BundlerComparisonDemo from './components/appendix/frontend-engineering/BundlerComparisonDemo.vue'
import TreeShakingDemo from './components/appendix/frontend-engineering/TreeShakingDemo.vue'
import CodeSplittingDemo from './components/appendix/frontend-engineering/CodeSplittingDemo.vue'
import HotReloadDemo from './components/appendix/frontend-engineering/HotReloadDemo.vue'
import DependencyGraphDemo from './components/appendix/frontend-engineering/DependencyGraphDemo.vue'
import SourceMapDemo from './components/appendix/frontend-engineering/SourceMapDemo.vue'
import AssetFingerprintDemo from './components/appendix/frontend-engineering/AssetFingerprintDemo.vue'

// Frontend Routing Components
import HashVsHistoryDemo from './components/appendix/frontend-routing/HashVsHistoryDemo.vue'
import DynamicRoutesDemo from './components/appendix/frontend-routing/DynamicRoutesDemo.vue'
import MpaRoutingDemo from './components/appendix/frontend-routing/MpaRoutingDemo.vue'
import NestedRoutesDemo from './components/appendix/frontend-routing/NestedRoutesDemo.vue'
import RouteGuardsDemo from './components/appendix/frontend-routing/RouteGuardsDemo.vue'
import RouteMatchingDemo from './components/appendix/frontend-routing/RouteMatchingDemo.vue'
import RouterArchitectureDemo from './components/appendix/frontend-routing/RouterArchitectureDemo.vue'
import RoutingModesDemo from './components/appendix/frontend-routing/RoutingModesDemo.vue'
import SpaNavigationDemo from './components/appendix/frontend-routing/SpaNavigationDemo.vue'

// Agent Intro Components
import AgentWorkflowDemo from './components/appendix/agent-intro/AgentWorkflowDemo.vue'
import AgentLevelDemo from './components/appendix/agent-intro/AgentLevelDemo.vue'
import AgentArchitectureDemo from './components/appendix/agent-intro/AgentArchitectureDemo.vue'
import AgentTaskFlowDemo from './components/appendix/agent-intro/AgentTaskFlowDemo.vue'
import FrameworkComparisonDemo from './components/appendix/agent-intro/FrameworkComparisonDemo.vue'
import FrameworkSelectionDemo from './components/appendix/agent-intro/FrameworkSelectionDemo.vue'
import AgentChallengesDemo from './components/appendix/agent-intro/AgentChallengesDemo.vue'
import AgentFutureDemo from './components/appendix/agent-intro/AgentFutureDemo.vue'
import AgentQuickStartDemo from './components/appendix/agent-intro/AgentQuickStartDemo.vue'
import AgentToolUseDemo from './components/appendix/agent-intro/AgentToolUseDemo.vue'
import AgentPlanningDemo from './components/appendix/agent-intro/AgentPlanningDemo.vue'
import AgentMemoryDemo from './components/appendix/agent-intro/AgentMemoryDemo.vue'
import AgentMultiToolPrinciple from './components/appendix/agent-intro/AgentMultiToolPrinciple.vue'
import AgentMemoryPrinciple from './components/appendix/agent-intro/AgentMemoryPrinciple.vue'

// Database Intro Components
import DatabaseIndexDemo from './components/appendix/database-intro/DatabaseIndexDemo.vue'
import RelationalDataDemo from './components/appendix/database-intro/RelationalDataDemo.vue'
import SqlPlaygroundDemo from './components/appendix/database-intro/SqlPlaygroundDemo.vue'
import DatabaseEvolutionDemo from './components/appendix/database-intro/DatabaseEvolutionDemo.vue'
import DatabaseRelationDemo from './components/appendix/database-intro/DatabaseRelationDemo.vue'
import BPlusTreeDemo from './components/appendix/database-intro/BPlusTreeDemo.vue'
import TransactionACIDDemo from './components/appendix/database-intro/TransactionACIDDemo.vue'
import QueryOptimizationDemo from './components/appendix/database-intro/QueryOptimizationDemo.vue'

// IDE Intro Components
import VirtualVSCodeDemo from './components/appendix/ide-intro/VirtualVSCodeDemo.vue'
import IdeArchitectureDemo from './components/appendix/ide-intro/IdeArchitectureDemo.vue'
import AiHelpDemo from './components/appendix/ide-intro/AiHelpDemo.vue'
import BrowserDevToolsDemo from './components/appendix/browser-devtools/BrowserDevToolsDemo.vue'
import BrowserDevToolsLiveDemo from './components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue'
import DevToolsElementsDemo from './components/appendix/browser-devtools/DevToolsElementsDemo.vue'
import DevToolsConsoleDemo from './components/appendix/browser-devtools/DevToolsConsoleDemo.vue'
import DevToolsNetworkDemo from './components/appendix/browser-devtools/DevToolsNetworkDemo.vue'
import DevToolsSourcesDemo from './components/appendix/browser-devtools/DevToolsSourcesDemo.vue'
import DevToolsApplicationDemo from './components/appendix/browser-devtools/DevToolsApplicationDemo.vue'

// Tracking Design Components
import TrackingOverviewDemo from './components/appendix/tracking-design/TrackingOverviewDemo.vue'
import TrackingTypesDemo from './components/appendix/tracking-design/TrackingTypesDemo.vue'
import TrackingMethodsComparisonDemo from './components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue'
import DataModelDesignDemo from './components/appendix/tracking-design/DataModelDesignDemo.vue'
import DataCollectionDemo from './components/appendix/tracking-design/DataCollectionDemo.vue'
import DataPipelineDemo from './components/appendix/tracking-design/DataPipelineDemo.vue'
import PrivacyComplianceDemo from './components/appendix/tracking-design/PrivacyComplianceDemo.vue'
import RealWorldCaseDemo from './components/appendix/tracking-design/RealWorldCaseDemo.vue'
import ToolSelectionDemo from './components/appendix/tracking-design/ToolSelectionDemo.vue'

// Operations Components
import MonitoringDashboardDemo from './components/appendix/operations/MonitoringDashboardDemo.vue'
import AlertFlowDemo from './components/appendix/operations/AlertFlowDemo.vue'
import TraceVisualizationDemo from './components/appendix/operations/TraceVisualizationDemo.vue'
import IncidentResponseDemo from './components/appendix/operations/IncidentResponseDemo.vue'
import CapacityPlanningDemo from './components/appendix/operations/CapacityPlanningDemo.vue'

// Backend Languages Components
import BackendLanguagesDemo from './components/appendix/backend-languages/BackendLanguagesDemo.vue'
import LanguageComparisonDemo from './components/appendix/backend-languages/LanguageComparisonDemo.vue'
import PerformanceBenchmarkDemo from './components/appendix/backend-languages/PerformanceBenchmarkDemo.vue'
import SyntaxComparisonDemo from './components/appendix/backend-languages/SyntaxComparisonDemo.vue'
import ConcurrencyModelDemo from './components/appendix/backend-languages/ConcurrencyModelDemo.vue'
import LanguageSelectorDemo from './components/appendix/backend-languages/LanguageSelectorDemo.vue'

// Concurrency Models Components
import ProcessThreadCoroutineDemo from './components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue'
import ProcessIsolationDemo from './components/appendix/concurrency-models/ProcessIsolationDemo.vue'
import ThreadSchedulingDemo from './components/appendix/concurrency-models/ThreadSchedulingDemo.vue'
import CoroutineLightweightDemo from './components/appendix/concurrency-models/CoroutineLightweightDemo.vue'
import AsyncAwaitDemo from './components/appendix/concurrency-models/AsyncAwaitDemo.vue'
import EventLoopDemo from './components/appendix/concurrency-models/EventLoopDemo.vue'
import ConcurrentVsParallelDemo from './components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue'
import GoroutineGreenThreadDemo from './components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue'
import DeveloperEfficiencyDemo from './components/appendix/backend-languages/DeveloperEfficiencyDemo.vue'
import LanguageEcosystemDemo from './components/appendix/backend-languages/LanguageEcosystemDemo.vue'
import MemoryManagementDemo from './components/appendix/backend-languages/MemoryManagementDemo.vue'
import LanguageScopeDemo from './components/appendix/backend-languages/LanguageScopeDemo.vue'

// Component State Management Components
import ComponentHierarchyDemo from './components/appendix/component-state-management/ComponentHierarchyDemo.vue'
import PropsFlowDemo from './components/appendix/component-state-management/PropsFlowDemo.vue'
import EventBusDemo from './components/appendix/component-state-management/EventBusDemo.vue'
import StateManagementComparisonDemo from './components/appendix/component-state-management/StateManagementComparisonDemo.vue'
import ReduxFlowDemo from './components/appendix/component-state-management/ReduxFlowDemo.vue'
import VuexPiniaDemo from './components/appendix/component-state-management/VuexPiniaDemo.vue'
import MobxReactivityDemo from './components/appendix/component-state-management/MobxReactivityDemo.vue'
import ZustandJotaiDemo from './components/appendix/component-state-management/ZustandJotaiDemo.vue'

// Cloud Services Components
import CloudServicesMapDemo from './components/appendix/cloud-services/CloudServicesMapDemo.vue'
import AwsVsAliyunDemo from './components/appendix/cloud-services/AwsVsAliyunDemo.vue'
import ComputeServicesDemo from './components/appendix/cloud-services/ComputeServicesDemo.vue'
import StorageServicesDemo from './components/appendix/cloud-services/StorageServicesDemo.vue'
import NetworkServicesDemo from './components/appendix/cloud-services/NetworkServicesDemo.vue'
import SecurityServicesDemo from './components/appendix/cloud-services/SecurityServicesDemo.vue'
import PricingModelDemo from './components/appendix/cloud-services/PricingModelDemo.vue'
import ServiceSelectionDemo from './components/appendix/cloud-services/ServiceSelectionDemo.vue'
import DatabaseServicesDemo from './components/appendix/cloud-services/DatabaseServicesDemo.vue'
import K8sServicesDemo from './components/appendix/cloud-services/K8sServicesDemo.vue'

// Cloud Services Simple Components (new)
import CloudServicesOverview from './components/appendix/cloud-services/CloudServicesOverview.vue'
import ProviderComparison from './components/appendix/cloud-services/ProviderComparison.vue'
import PricingCalculator from './components/appendix/cloud-services/PricingCalculator.vue'
import ComputeInstanceDemo from './components/appendix/cloud-services/ComputeInstanceDemo.vue'
import StorageTypeDemo from './components/appendix/cloud-services/StorageTypeDemo.vue'
import ApiCallDemo from './components/appendix/cloud-services/ApiCallDemo.vue'
import CloudHistoryDemo from './components/appendix/cloud-services/CloudHistoryDemo.vue'
import DeployWorkflowDemo from './components/appendix/cloud-services/DeployWorkflowDemo.vue'
import RegionLatencyDemo from './components/appendix/cloud-services/RegionLatencyDemo.vue'

// Cloud IAM Simple Components (new)
import IAMStructure from './components/appendix/cloud-iam/IAMStructure.vue'
import PolicyEditorDemo from './components/appendix/cloud-iam/PolicyEditorDemo.vue'

// Gateway Proxy Components
import ReverseProxyDemo from './components/appendix/gateway-proxy/ReverseProxyDemo.vue'
import ApiGatewayDemo from './components/appendix/gateway-proxy/ApiGatewayDemo.vue'
import NginxArchitectureDemo from './components/appendix/gateway-proxy/NginxArchitectureDemo.vue'
import RoutingRulesDemo from './components/appendix/gateway-proxy/RoutingRulesDemo.vue'
import RateLimitingDemo from './components/appendix/gateway-proxy/RateLimitingDemo.vue'
import AuthMiddlewareDemo from './components/appendix/gateway-proxy/AuthMiddlewareDemo.vue'
import LoadBalancingDemo from './components/appendix/gateway-proxy/LoadBalancingDemo.vue'
import SslTerminationDemo from './components/appendix/gateway-proxy/SslTerminationDemo.vue'

// Load Balancing Components
import LoadBalancerTypesDemo from './components/appendix/load-balancing/LoadBalancerTypesDemo.vue'
import HealthCheckDemo from './components/appendix/load-balancing/HealthCheckDemo.vue'
import SessionPersistenceDemo from './components/appendix/load-balancing/SessionPersistenceDemo.vue'
import WeightedRoutingDemo from './components/appendix/load-balancing/WeightedRoutingDemo.vue'
import BlueGreenDeploymentDemo from './components/appendix/load-balancing/BlueGreenDeploymentDemo.vue'
import CanaryReleaseDemo from './components/appendix/load-balancing/CanaryReleaseDemo.vue'
import AutoScalingDemo from './components/appendix/load-balancing/AutoScalingDemo.vue'
import MultiRegionDemo from './components/appendix/load-balancing/MultiRegionDemo.vue'

// Scheduled Tasks Components
import CronExpressionDemo from './components/appendix/scheduled-tasks/CronExpressionDemo.vue'
import TaskSchedulerDemo from './components/appendix/scheduled-tasks/TaskSchedulerDemo.vue'
import BatchProcessingDemo from './components/appendix/scheduled-tasks/BatchProcessingDemo.vue'
import JobQueueDemo from './components/appendix/scheduled-tasks/JobQueueDemo.vue'
import RetryMechanismDemo from './components/appendix/scheduled-tasks/RetryMechanismDemo.vue'
import DistributedLockDemo from './components/appendix/scheduled-tasks/DistributedLockDemo.vue'
import TaskMonitoringDemo from './components/appendix/scheduled-tasks/TaskMonitoringDemo.vue'
import SchedulingConflictDemo from './components/appendix/scheduled-tasks/SchedulingConflictDemo.vue'

// Cloud IAM Components
import IamRamComparisonDemo from './components/appendix/cloud-iam/IamRamComparisonDemo.vue'
import IdentityProviderDemo from './components/appendix/cloud-iam/IdentityProviderDemo.vue'
import RolePolicyDemo from './components/appendix/cloud-iam/RolePolicyDemo.vue'
import PermissionHierarchyDemo from './components/appendix/cloud-iam/PermissionHierarchyDemo.vue'
import AccessKeyManagementDemo from './components/appendix/cloud-iam/AccessKeyManagementDemo.vue'
import MfaSecurityDemo from './components/appendix/cloud-iam/MfaSecurityDemo.vue'
import CrossAccountAccessDemo from './components/appendix/cloud-iam/CrossAccountAccessDemo.vue'
import BestPracticesDemo from './components/appendix/cloud-iam/BestPracticesDemo.vue'

// Backend Layered Architecture Components
import LayeredArchitectureDemo from './components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue'
import ControllerLayerDemo from './components/appendix/backend-layered-architecture/ControllerLayerDemo.vue'
import ServiceLayerDemo from './components/appendix/backend-layered-architecture/ServiceLayerDemo.vue'
import RepositoryLayerDemo from './components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue'
import DomainModelDemo from './components/appendix/backend-layered-architecture/DomainModelDemo.vue'
import DtoFlowDemo from './components/appendix/backend-layered-architecture/DtoFlowDemo.vue'
import DependencyDirectionDemo from './components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue'
import CleanArchitectureDemo from './components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue'

// Browser Rendering Pipeline Components
import DomToRenderTreeDemo from './components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue'
import LayoutReflowDemo from './components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue'
import PaintLayerDemo from './components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue'
import CompositeDemo from './components/appendix/browser-rendering-pipeline/CompositeDemo.vue'
import MacroMicroTaskDemo from './components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue'
import RenderingPerformanceDemo from './components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue'
import RenderingPipelineDemo from './components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue'

// Cache Design Extra Components
import CacheArchitectureOverview from './components/appendix/cache-design/CacheArchitectureOverview.vue'
import CacheHierarchyDemo from './components/appendix/cache-design/CacheHierarchyDemo.vue'
import CachePatternComparisonDemo from './components/appendix/cache-design/CachePatternComparisonDemo.vue'
import EcommerceCacheArchitectureDemo from './components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue'
import CacheMonitoringDashboardDemo from './components/appendix/cache-design/CacheMonitoringDashboardDemo.vue'

// Cloud Storage CDN Extra Components
import EdgeNodeDistributionDemo from './components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue'
import CachePolicyDemo from './components/appendix/cloud-storage-cdn/CachePolicyDemo.vue'
import TrafficSchedulingDemo from './components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue'
import HttpsOptimizationDemo from './components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue'
import AccessAnalyticsDemo from './components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue'

// API Design Components
import ApiRequestDemo from './components/appendix/api-design/ApiRequestDemo.vue'
import RestfulUrlDemo from './components/appendix/api-design/RestfulUrlDemo.vue'
import StatusCodeDemo from './components/appendix/api-design/StatusCodeDemo.vue'
import ErrorHandlingDemo from './components/appendix/api-design/ErrorHandlingDemo.vue'
import ApiVersioningDemo from './components/appendix/api-design/ApiVersioningDemo.vue'
import ApiStyleCompare from './components/appendix/api-design/ApiStyleCompare.vue'
import ResponseStructureDemo from './components/appendix/api-design/ResponseStructureDemo.vue'
import DataFieldDesignDemo from './components/appendix/api-design/DataFieldDesignDemo.vue'
import ErrorResponseDesignDemo from './components/appendix/api-design/ErrorResponseDesignDemo.vue'

// JavaScript Intro Components
import VariableBoxDemo from './components/appendix/javascript-intro/VariableBoxDemo.vue'
import ReferenceDemo from './components/appendix/javascript-intro/ReferenceDemo.vue'
import FunctionMachineDemo from './components/appendix/javascript-intro/FunctionMachineDemo.vue'
import ScopeDemo from './components/appendix/javascript-intro/ScopeDemo.vue'
import ClosureDemo from './components/appendix/javascript-intro/ClosureDemo.vue'
import DOMTreeDemo from './components/appendix/javascript-intro/DOMTreeDemo.vue'
import AsyncRestaurantDemo from './components/appendix/javascript-intro/AsyncRestaurantDemo.vue'
import JSEventLoopDemo from './components/appendix/javascript-intro/JSEventLoopDemo.vue'
import VariableScopeDemo from './components/appendix/javascript-intro/VariableScopeDemo.vue'
import DataTypeDemo from './components/appendix/javascript-intro/DataTypeDemo.vue'
import ThisContextDemo from './components/appendix/javascript-intro/ThisContextDemo.vue'
import PrototypeDemo from './components/appendix/javascript-intro/PrototypeDemo.vue'
import AsyncDemo from './components/appendix/javascript-intro/AsyncDemo.vue'

// JavaScript Runtime Components
import RuntimeEnvironmentDemo from './components/appendix/js-runtime/RuntimeEnvironmentDemo.vue'
import CallStackDemo from './components/appendix/js-runtime/CallStackDemo.vue'
import TaskQueueDemo from './components/appendix/js-runtime/TaskQueueDemo.vue'
import MemoryLeakDemo from './components/appendix/js-runtime/MemoryLeakDemo.vue'
import GarbageCollectionDemo from './components/appendix/js-runtime/GarbageCollectionDemo.vue'

// Development Tools Components
import EnvVarOverviewDemo from './components/appendix/development-tools/EnvVarOverviewDemo.vue'
import PathSearchDemo from './components/appendix/development-tools/PathSearchDemo.vue'
import EnvScopeDemo from './components/appendix/development-tools/EnvScopeDemo.vue'
import EnvExportDemo from './components/appendix/development-tools/EnvExportDemo.vue'
import ApiKeyDangerDemo from './components/appendix/development-tools/ApiKeyDangerDemo.vue'
import DotEnvDemo from './components/appendix/development-tools/DotEnvDemo.vue'
import ServerSecretDemo from './components/appendix/development-tools/ServerSecretDemo.vue'

// Ports & Localhost Components
import PortAnalogyDemo from './components/appendix/ports-localhost/PortAnalogyDemo.vue'
import LocalhostLoopbackDemo from './components/appendix/ports-localhost/LocalhostLoopbackDemo.vue'
import PortConflictDemo from './components/appendix/ports-localhost/PortConflictDemo.vue'
import CommonPortsDemo from './components/appendix/ports-localhost/CommonPortsDemo.vue'
import DevServerFlowDemo from './components/appendix/ports-localhost/DevServerFlowDemo.vue'
import PortTroubleshootDemo from './components/appendix/ports-localhost/PortTroubleshootDemo.vue'
import PackageManagerOverviewDemo from './components/appendix/development-tools/PackageManagerOverviewDemo.vue'
import PackageInstallDemo from './components/appendix/development-tools/PackageInstallDemo.vue'
import DependencyTreeDemo from './components/appendix/development-tools/DependencyTreeDemo.vue'
import SSHAuthDemo from './components/appendix/development-tools/SSHAuthDemo.vue'
import RegexDemo from './components/appendix/development-tools/RegexDemo.vue'

// TypeScript Intro Components
import TypeAnnotationDemo from './components/appendix/typescript-intro/TypeAnnotationDemo.vue'
import InterfaceDemo from './components/appendix/typescript-intro/InterfaceDemo.vue'
import GenericDemo from './components/appendix/typescript-intro/GenericDemo.vue'
import TypeInferenceDemo from './components/appendix/typescript-intro/TypeInferenceDemo.vue'

// Server & Backend Components
import SerializationDemo from './components/appendix/server-backend/SerializationDemo.vue'
import HttpProtocolDemo from './components/appendix/server-backend/HttpProtocolDemo.vue'

// Engineering Excellence Components
import CodeSmellDemo from './components/appendix/engineering-excellence/CodeSmellDemo.vue'
import RefactoringDemo from './components/appendix/engineering-excellence/RefactoringDemo.vue'
import TestPyramidDemo from './components/appendix/engineering-excellence/TestPyramidDemo.vue'
import TDDCycleDemo from './components/appendix/engineering-excellence/TDDCycleDemo.vue'
import DesignPatternCatalogDemo from './components/appendix/engineering-excellence/DesignPatternCatalogDemo.vue'
import PatternPlaygroundDemo from './components/appendix/engineering-excellence/PatternPlaygroundDemo.vue'
import WebSecurityDemo from './components/appendix/engineering-excellence/WebSecurityDemo.vue'
import SecurityChecklistDemo from './components/appendix/engineering-excellence/SecurityChecklistDemo.vue'
import DocStructureDemo from './components/appendix/engineering-excellence/DocStructureDemo.vue'
import TechWritingPracticeDemo from './components/appendix/engineering-excellence/TechWritingPracticeDemo.vue'
import OpenSourceWorkflowDemo from './components/appendix/engineering-excellence/OpenSourceWorkflowDemo.vue'
import LicenseComparisonDemo from './components/appendix/engineering-excellence/LicenseComparisonDemo.vue'
import TechRadarDemo from './components/appendix/engineering-excellence/TechRadarDemo.vue'
import DecisionMatrixDemo from './components/appendix/engineering-excellence/DecisionMatrixDemo.vue'

// Data Components
import SqlDemo from './components/appendix/data/SqlDemo.vue'
import DataModelsDemo from './components/appendix/data/DataModelsDemo.vue'
import ABTestingDemo from './components/appendix/data/ABTestingDemo.vue'
import DescriptiveStatsDemo from './components/appendix/data/DescriptiveStatsDemo.vue'
import DataAggregationDemo from './components/appendix/data/DataAggregationDemo.vue'
import FunnelAnalysisDemo from './components/appendix/data/FunnelAnalysisDemo.vue'
import RetentionAnalysisDemo from './components/appendix/data/RetentionAnalysisDemo.vue'
import DataTrackingDemo from './components/appendix/data/DataTrackingDemo.vue'

// RAG Components
import RAGPipelineDemo from './components/appendix/rag/RAGPipelineDemo.vue'
import ChunkingStrategyDemo from './components/appendix/rag/ChunkingStrategyDemo.vue'
import RetrievalDemo from './components/appendix/rag/RetrievalDemo.vue'
import RAGArchitectureDemo from './components/appendix/rag/RAGArchitectureDemo.vue'
import RAGvsFineTuningDemo from './components/appendix/rag/RAGvsFineTuningDemo.vue'

// Embedding & Vector Components
import EmbeddingConceptDemo from './components/appendix/embedding-vector/EmbeddingConceptDemo.vue'
import VectorSimilarityDemo from './components/appendix/embedding-vector/VectorSimilarityDemo.vue'
import VectorIndexDemo from './components/appendix/embedding-vector/VectorIndexDemo.vue'
import VectorDatabaseDemo from './components/appendix/embedding-vector/VectorDatabaseDemo.vue'
import EmbeddingPipelineDemo from './components/appendix/embedding-vector/EmbeddingPipelineDemo.vue'

// AI Native App Components
import AINativeArchDemo from './components/appendix/ai-native-app/AINativeArchDemo.vue'
import AIDesignPrincipleDemo from './components/appendix/ai-native-app/AIDesignPrincipleDemo.vue'
import PromptDesignDemo from './components/appendix/ai-native-app/PromptDesignDemo.vue'
import AIUXPatternDemo from './components/appendix/ai-native-app/AIUXPatternDemo.vue'
import AIAppFlowDemo from './components/appendix/ai-native-app/AIAppFlowDemo.vue'

// Infrastructure as Code Components
import IaCConceptDemo from './components/appendix/infrastructure-as-code/IaCConceptDemo.vue'
import TerraformWorkflowDemo from './components/appendix/infrastructure-as-code/TerraformWorkflowDemo.vue'
import IaCToolComparisonDemo from './components/appendix/infrastructure-as-code/IaCToolComparisonDemo.vue'
import ConfigDriftDemo from './components/appendix/infrastructure-as-code/ConfigDriftDemo.vue'
import IaCBestPracticeDemo from './components/appendix/infrastructure-as-code/IaCBestPracticeDemo.vue'

// DNS & HTTPS Components
import DnsResolutionDemo from './components/appendix/dns-https/DnsResolutionDemo.vue'
import DnsRecordTypeDemo from './components/appendix/dns-https/DnsRecordTypeDemo.vue'
import HttpsHandshakeDemo from './components/appendix/dns-https/HttpsHandshakeDemo.vue'
import CertificateChainDemo from './components/appendix/dns-https/CertificateChainDemo.vue'
import DnsHttpsComparisonDemo from './components/appendix/dns-https/DnsHttpsComparisonDemo.vue'

// Model Finetuning Components
import FinetuningPipelineDemo from './components/appendix/model-finetuning/FinetuningPipelineDemo.vue'
import TrainingDataDemo from './components/appendix/model-finetuning/TrainingDataDemo.vue'
import LoRADemo from './components/appendix/model-finetuning/LoRADemo.vue'
import ModelQuantizationDemo from './components/appendix/model-finetuning/ModelQuantizationDemo.vue'
import ModelServingDemo from './components/appendix/model-finetuning/ModelServingDemo.vue'

// Incident Response Components
import SeverityLevelDemo from './components/appendix/incident-response/SeverityLevelDemo.vue'
import IncidentTimelineDemo from './components/appendix/incident-response/IncidentTimelineDemo.vue'
import IncidentCommandDemo from './components/appendix/incident-response/IncidentCommandDemo.vue'
import AlertEscalationDemo from './components/appendix/incident-response/AlertEscalationDemo.vue'
import PostmortemDemo from './components/appendix/incident-response/PostmortemDemo.vue'

// // Async Task Queues Components
// Async Task Queues Components
import AsyncTaskFlowDemo from './components/appendix/async-task-queues/AsyncTaskFlowDemo.vue'
import TaskWorkerDemo from './components/appendix/async-task-queues/TaskWorkerDemo.vue'
import TaskRetryDemo from './components/appendix/async-task-queues/TaskRetryDemo.vue'
import AsyncComparisonDemo from './components/appendix/async-task-queues/AsyncComparisonDemo.vue'

// // File Storage Components
// File Storage Components
import FileStorageTypeDemo from './components/appendix/file-storage/FileStorageTypeDemo.vue'
import FileUploadFlowDemo from './components/appendix/file-storage/FileUploadFlowDemo.vue'
import CDNAccelerationDemo from './components/appendix/file-storage/CDNAccelerationDemo.vue'

// // Rate Limiting Components
import RateLimitAlgorithmDemo from './components/appendix/rate-limiting/RateLimitAlgorithmDemo.vue'
import BackpressureDemo from './components/appendix/rate-limiting/BackpressureDemo.vue'

// Search Engines Components Registration
import InvertedIndexDemo from './components/appendix/search-engines/InvertedIndexDemo.vue'
import SearchRelevanceDemo from './components/appendix/search-engines/SearchRelevanceDemo.vue'

// Monolith to Microservices Components
import ArchEvolutionDemo from './components/appendix/monolith-to-microservices/ArchEvolutionDemo.vue'

// High Availability Components
import AvailabilityCalculatorDemo from './components/appendix/high-availability/AvailabilityCalculatorDemo.vue'
import FailoverStrategyDemo from './components/appendix/high-availability/FailoverStrategyDemo.vue'

// Distributed Systems Components
import CAPTheoremDemo from './components/appendix/distributed-systems/CAPTheoremDemo.vue'
import ConsistencyModelsDemo from './components/appendix/distributed-systems/ConsistencyModelsDemo.vue'
import DistributedChallengesDemo from './components/appendix/distributed-systems/DistributedChallengesDemo.vue'

// System Design Methodology Components
import SystemDesignStepsDemo from './components/appendix/system-design-methodology/SystemDesignStepsDemo.vue'
import CapacityEstimationDemo from './components/appendix/system-design-methodology/CapacityEstimationDemo.vue'

// Data Visualization Components
import ChartTypeSelectorDemo from './components/appendix/data-visualization/ChartTypeSelectorDemo.vue'
import DashboardLayoutDemo from './components/appendix/data-visualization/DashboardLayoutDemo.vue'

// Data Governance Components
import DataQualityDemo from './components/appendix/data-governance/DataQualityDemo.vue'
import DataGovernanceFrameworkDemo from './components/appendix/data-governance/DataGovernanceFrameworkDemo.vue'
import DataLineageDemo from './components/appendix/data-governance/DataLineageDemo.vue'

// Linux Basics Components
import LinuxFileSystemDemo from './components/appendix/linux-basics/LinuxFileSystemDemo.vue'
import LinuxCommandDemo from './components/appendix/linux-basics/LinuxCommandDemo.vue'
import LinuxPermissionsDemo from './components/appendix/linux-basics/LinuxPermissionsDemo.vue'

// Docker Containers Components
import DockerArchitectureDemo from './components/appendix/docker-containers/DockerArchitectureDemo.vue'
import DockerLifecycleDemo from './components/appendix/docker-containers/DockerLifecycleDemo.vue'

// Kubernetes Components
import K8sArchitectureDemo from './components/appendix/kubernetes/K8sArchitectureDemo.vue'
import K8sWorkloadsDemo from './components/appendix/kubernetes/K8sWorkloadsDemo.vue'

// Neural Networks Components
import NeuronDemo from './components/appendix/neural-networks/NeuronDemo.vue'
import NetworkLayersDemo from './components/appendix/neural-networks/NetworkLayersDemo.vue'
import NetworkArchitectureDemo from './components/appendix/neural-networks/NetworkArchitectureDemo.vue'

// Project Architecture Components
import ProjectArchitectureComparisonDemo from './components/appendix/project-architecture/ArchitectureComparisonDemo.vue'

// Appendix Navigation Component
import AppendixFlowMap from './components/AppendixFlowMap.vue'

import CopyOrDownloadAsMarkdownButtons from './components/CopyOrDownloadAsMarkdownButtons/index.vue'

export default {
  extends: DefaultTheme,
  Layout,
  enhanceApp({ app }) {
    app.use(ElementPlus)
    app.component(
      'CopyOrDownloadAsMarkdownButtons',
      CopyOrDownloadAsMarkdownButtons
    )
    app.component('HomeFeatures', HomeFeatures)
    app.component('WelcomeScreen', WelcomeScreen)
    app.component('NavGrid', NavGrid)
    app.component('NavCard', NavCard)
    app.component('CategoryIndex', CategoryIndex)
    app.component('ArticleGrid', ArticleGrid)
    app.component('RelatedArticlesSection', RelatedArticlesSection)
    app.component('StepBar', StepBar)
    app.component('ChapterIntroduction', ChapterIntroduction)
    app.component('ReadingProgress', ReadingProgress)
    app.component('SummaryCard', SummaryCard)
    app.component('WebTerminal', WebTerminal)
    app.component('TerminalGrid', TerminalGrid)
    app.component('CellInspector', CellInspector)
    app.component('EscapeSequences', EscapeSequences)
    app.component('EscapeParserDemo', EscapeParserDemo)
    app.component('CookedRawDemo', CookedRawDemo)
    app.component('InputVisualizer', InputVisualizer)
    app.component('SignalsDemo', SignalsDemo)
    app.component('FlowDiagram', FlowDiagram)
    app.component('BufferSwitchDemo', BufferSwitchDemo)
    app.component('AdvancedTUIDemo', AdvancedTUIDemo)
    app.component('ArchitectureDemo', ArchitectureDemo)
    app.component('TerminalDefinition', TerminalDefinition)
    app.component('TerminalOSDemo', TerminalOSDemo)
    app.component('TerminalHandsOn', TerminalHandsOn)

    // API Intro Components Registration
    app.component('ApiQuickStartDemo', ApiQuickStartDemo)
    app.component('ApiConceptDemo', ApiConceptDemo)
    app.component('RequestResponseFlow', RequestResponseFlow)
    app.component('ApiMethodDemo', ApiMethodDemo)
    app.component('ApiDocumentDemo', ApiDocumentDemo)
    app.component('ApiPlayground', ApiPlayground)
    app.component('RealWorldApiDemo', RealWorldApiDemo)
    app.component('FunctionApiDemo', FunctionApiDemo)
    app.component('ApiTypesComparison', ApiTypesComparison)
    app.component('ApiFunctionVsHttp', ApiFunctionVsHttp)
    app.component('DocumentTypesComparison', DocumentTypesComparison)
    app.component('HttpMethodsDemo', HttpMethodsDemo)
    app.component('StatusCodeCategories', StatusCodeCategories)

    // LLM Intro Components Registration
    app.component('EmbeddingDemo', EmbeddingDemo)
    app.component('LinearAttentionDemo', LinearAttentionDemo)
    app.component('LlmQuickStartDemo', LlmQuickStartDemo)
    app.component('MoEDemo', MoEDemo)
    app.component('NextTokenPrediction', NextTokenPrediction)
    app.component('RNNvsTransformer', RNNvsTransformer)
    app.component('ThinkingModelDemo', ThinkingModelDemo)
    app.component('TokenizationDemo', TokenizationDemo)
    app.component('TokenizerToMatrix', TokenizerToMatrix)
    app.component('TrainingInferenceDemo', TrainingInferenceDemo)

    // VLM Intro Components Registration
    app.component('AttentionDemo', AttentionDemo)
    app.component('FeatureAlignmentDemo', FeatureAlignmentDemo)
    app.component('LinearProjectionDemo', LinearProjectionDemo)
    app.component(
      'ModelArchitectureComparisonDemo',
      ModelArchitectureComparisonDemo
    )
    app.component('PatchifyDemo', PatchifyDemo)
    app.component('PositionalEmbeddingDemo', PositionalEmbeddingDemo)
    app.component('ProjectorDemo', ProjectorDemo)
    app.component('TrainingPipelineDemo', TrainingPipelineDemo)
    app.component('VLMInferenceDemo', VLMInferenceDemo)
    app.component('ViTOutputDemo', ViTOutputDemo)
    app.component('VlmQuickStartDemo', VlmQuickStartDemo)

    // Image Gen Intro Components Registration
    app.component('ImageGenArchitecture', ImageGenArchitecture)
    app.component('LatentSpaceViz', LatentSpaceViz)
    app.component('DiffusionProcessDemo', DiffusionProcessDemo)
    app.component('FlowMatchingDemo', FlowMatchingDemo)
    app.component('PromptVisualizer', PromptVisualizer)
    app.component('ImageGenQuickStartDemo', ImageGenQuickStartDemo)

    // Audio Intro Components Registration
    app.component('AudioWaveformDemo', AudioWaveformDemo)
    app.component('AudioTokenizationDemo', AudioTokenizationDemo)
    app.component('SpectrogramViz', SpectrogramViz)
    app.component('AutoregressiveAudioDemo', AutoregressiveAudioDemo)
    app.component('AudioQuickStartDemo', AudioQuickStartDemo)
    app.component('MelSpectrogramDemo', MelSpectrogramDemo)
    app.component('TTSPipelineDemo', TTSPipelineDemo)
    app.component('VoiceCloningDemo', VoiceCloningDemo)
    app.component('ASRvsTTSDemo', ASRvsTTSDemo)
    app.component('EmotionControlDemo', EmotionControlDemo)

    // Web Basics Components Registration
    app.component('WebTechTriad', WebTechTriad)
    app.component('UrlToBrowserDemo', UrlToBrowserDemo)
    app.component('UrlToBrowserQuickStart', UrlToBrowserQuickStart)

    app.component('GitCommitFlow', GitCommitFlow)
    app.component('GitBranchVisual', GitBranchVisual)
    app.component('GitSyncDemo', GitSyncDemo)
    app.component('GitCommandCheatsheet', GitCommandCheatsheet)

    app.component('NetworkLayers', NetworkLayers)
    app.component('TcpUdpComparison', TcpUdpComparison)
    app.component('SubnetCalculator', SubnetCalculator)
    app.component('NetworkTroubleshooting', NetworkTroubleshooting)

    // Computer Fundamentals Components Registration
    app.component('TransistorDemo', TransistorDemo)
    app.component('LogicGateDemo', LogicGateDemo)
    app.component('BinaryAdditionRulesDemo', BinaryAdditionRulesDemo)
    app.component('HalfAdderDemo', HalfAdderDemo)
    app.component('FullAdderDemo', FullAdderDemo)
    app.component('AdderDemo', AdderDemo)
    app.component('AdderChainDemo', AdderChainDemo)
    app.component('CompleteAdderDemo', CompleteAdderDemo)
    app.component('FunctionalUnitDemo', FunctionalUnitDemo)
    app.component('CpuArchitectureDemo', CpuArchitectureDemo)
    app.component('MinCpuDemo', MinCpuDemo)
    app.component('RegisterDemo', RegisterDemo)
    app.component('PipelineDemo', PipelineDemo)
    app.component('ControllerDemo', ControllerDemo)
    app.component('BusSystemDemo', BusSystemDemo)
    app.component('InstructionFormatDemo', InstructionFormatDemo)
    app.component('AddressingModeDemo', AddressingModeDemo)
    app.component('CacheDemo', CacheDemo)
    app.component('IOMethodDemo', IOMethodDemo)
    app.component('PSWFlagDemo', PSWFlagDemo)
    app.component('FlipFlopDemo', FlipFlopDemo)
    // app.component('EvolutionFlowDemo', EvolutionFlowDemo)
    app.component('ProcessDemo', ProcessDemo)
    app.component('MemoryDemo', MemoryDemo)
    app.component('FilesystemDemo', FilesystemDemo)
    app.component('EncodingDemo', EncodingDemo)
    app.component('StorageDemo', StorageDemo)
    app.component('TransmissionDemo', TransmissionDemo)
    app.component('DataStructureDemo', DataStructureDemo)
    app.component('AlgorithmDemo', AlgorithmDemo)
    app.component('LanguageMapDemo', LanguageMapDemo)
    app.component('TypeSystemDemo', TypeSystemDemo)
    app.component('CompilerDemo', CompilerDemo)
    app.component('StaticVsDynamicDemo', StaticVsDynamicDemo)
    app.component('StrongVsWeakDemo', StrongVsWeakDemo)
    app.component('TypeInferenceFlowDemo', TypeInferenceFlowDemo)
    app.component('LexerTokenDemo', LexerTokenDemo)
    app.component('CompileVsInterpretDemo', CompileVsInterpretDemo)
    app.component('CodeToInstructionDemo', CodeToInstructionDemo)
    app.component('CISCvsRISCDemo', CISCvsRISCDemo)
    app.component('TypeSafetyPracticeDemo', TypeSafetyPracticeDemo)
    app.component('GenericTypeDemo', GenericTypeDemo)
    app.component('ASTVisualizerDemo', ASTVisualizerDemo)
    app.component('CodeOptimizationDemo', CodeOptimizationDemo)
    app.component('CFNetworkLayers', CFNetworkLayers)
    app.component('CFSubnetCalculator', CFSubnetCalculator)
    app.component('CFTcpUdpComparison', CFTcpUdpComparison)

    // Computer Fundamentals Additional Components Registration
    app.component('OSArchitectureDemo', OSArchitectureDemo)
    app.component('ProgramLaunchDemo', ProgramLaunchDemo)
    app.component('DataLifecycleDemo', DataLifecycleDemo)
    app.component(
      'EncodingStorageTransmissionDemo',
      EncodingStorageTransmissionDemo
    )
    app.component('NetworkOverviewDemo', NetworkOverviewDemo)
    app.component('PhysicalLayerDemo', PhysicalLayerDemo)
    app.component('DataLinkLayerDemo', DataLinkLayerDemo)
    app.component('TransportLayerDemo', TransportLayerDemo)
    app.component('ApplicationLayerDemo', ApplicationLayerDemo)
    app.component('DataStructureOverviewDemo', DataStructureOverviewDemo)
    app.component('LinearStructuresDemo', LinearStructuresDemo)
    app.component('HashTableDemo', HashTableDemo)
    app.component('TreeStructureDemo', TreeStructureDemo)
    app.component('DataStructureSelectorDemo', DataStructureSelectorDemo)
    app.component('AlgorithmOverviewDemo', AlgorithmOverviewDemo)
    app.component('RecursiveThinkingDemo', RecursiveThinkingDemo)
    app.component('GreedyThinkingDemo', GreedyThinkingDemo)
    app.component('AlgorithmParadigmDemo', AlgorithmParadigmDemo)
    app.component('LanguageEvolutionDemo', LanguageEvolutionDemo)
    app.component('ProgrammingParadigmDemo', ProgrammingParadigmDemo)
    app.component('LanguageScenarioDemo', LanguageScenarioDemo)
    app.component(
      'ProgrammingLanguageComparisonDemo',
      ProgrammingLanguageComparisonDemo
    )
    app.component('CompilerAnalogyDemo', CompilerAnalogyDemo)
    app.component('SearchAlgorithmDemo', SearchAlgorithmDemo)
    app.component('SortingAlgorithmDemo', SortingAlgorithmDemo)
    app.component('NetworkPrincipleDemo', NetworkPrincipleDemo)
    app.component('DataEncodingBasicsDemo', DataEncodingBasicsDemo)
    app.component('StorageHierarchyDemo', StorageHierarchyDemo)
    app.component('GraphStructureDemo', GraphStructureDemo)
    app.component('LanguageTypeModelDemo', LanguageTypeModelDemo)
    app.component('CompilationPracticeDemo', CompilationPracticeDemo)

    // Vibe Coding Fullstack Components Registration
    app.component('DeveloperSkillShiftDemo', DeveloperSkillShiftDemo)
    app.component('ComputerFieldMapDemo', ComputerFieldMapDemo)
    app.component('FrontendTriadDemo', FrontendTriadDemo)
    app.component('FrontendFrameworkDemo', FrontendFrameworkDemo)
    app.component('BackendCoreDemo', BackendCoreDemo)
    app.component('ProgrammingLanguageMapDemo', ProgrammingLanguageMapDemo)
    app.component('LanguageSelectionDemo', LanguageSelectionDemo)
    app.component('FullstackSkillDemo', FullstackSkillDemo)
    app.component('AIvsTraditionalDemo', AIvsTraditionalDemo)
    app.component('CareerPathDemo', CareerPathDemo)
    app.component('LearningStrategyDemo', LearningStrategyDemo)
    app.component('VibeCodingFlowDemo', VibeCodingFlowDemo)
    app.component('PowerOnDemo', PowerOnDemo)
    app.component('BootProcessDemo', BootProcessDemo)
    app.component('BiosUefiDemo', BiosUefiDemo)
    app.component('BiosUefiInteractiveDemo', BiosUefiInteractiveDemo)
    app.component('AppLaunchDemo', AppLaunchDemo)
    app.component('DesktopDemo', DesktopDemo)
    app.component('OSBootInteractiveDemo', OSBootInteractiveDemo)
    app.component('BrowserArchitectureDemo', BrowserArchitectureDemo)
    app.component('URLRequestDemo', URLRequestDemo)
    app.component('RenderingDemo', RenderingDemo)
    app.component('FullProcessDemo', FullProcessDemo)

    // Data Encoding Components Registration
    app.component('GarbledTextDemo', GarbledTextDemo)
    app.component('CharacterEncodingExplorer', CharacterEncodingExplorer)
    app.component('StoragePyramidDemo', StoragePyramidDemo)
    app.component('DataTransmissionDemo', DataTransmissionDemo)
    app.component('PhotoUploadJourneyDemo', PhotoUploadJourneyDemo)
    app.component('ImageEncodingDemo', ImageEncodingDemo)
    app.component('AudioEncodingDemo', AudioEncodingDemo)

    // Deployment appendix
    app.component('DeploymentOverviewDemo', DeploymentOverviewDemo)
    app.component('DeploymentBuildDemo', DeploymentBuildDemo)
    app.component('DeploymentServerDemo', DeploymentServerDemo)
    app.component('DeploymentDnsDemo', DeploymentDnsDemo)
    app.component('DeploymentHttpsDemo', DeploymentHttpsDemo)
    app.component('DeploymentCicdDemo', DeploymentCicdDemo)
    app.component('DeploymentMonitorDemo', DeploymentMonitorDemo)
    app.component('CssBoxModel', CssBoxModel)
    app.component('CssFlexbox', CssFlexbox)
    app.component('CssLayoutDemo', CssLayoutDemo)
    app.component('CssPlaygroundDemo', CssPlaygroundDemo)
    app.component('CssCommonProperties', CssCommonProperties)
    app.component('CssSelectorsDemo', CssSelectorsDemo)
    app.component('DomManipulator', DomManipulator)
    app.component('SemanticTagsDemo', SemanticTagsDemo)
    app.component('DnsLookupDemo', DnsLookupDemo)
    app.component('TcpHandshakeDemo', TcpHandshakeDemo)
    app.component('UrlParserDemo', UrlParserDemo)
    app.component('HttpExchangeDemo', HttpExchangeDemo)
    app.component('BrowserRenderingDemo', BrowserRenderingDemo)

    // Browser & Frontend Components Registration (a11y & i18n)
    app.component('AccessibilityDemo', AccessibilityDemo)
    app.component('InternationalizationDemo', InternationalizationDemo)

    app.component('FrontendEvolutionDemo', FrontendEvolutionDemo)
    app.component('SliceRequestDemo', SliceRequestDemo)
    app.component('ResponsiveGridDemo', ResponsiveGridDemo)
    app.component('JQueryVsStateDemo', JQueryVsStateDemo)
    app.component('VueReactComparisonDemo', VueReactComparisonDemo)
    app.component('RoutingModeDemo', RoutingModeDemo)
    app.component('SpaStatePreservationDemo', SpaStatePreservationDemo)
    app.component('BundlerSizeDemo', BundlerSizeDemo)
    app.component('RenderingStrategyDemo', RenderingStrategyDemo)
    app.component('BigFrontendScopeDemo', BigFrontendScopeDemo)
    app.component('AiEvolutionDemo', AiEvolutionDemo)
    app.component('FoundationDemo', FoundationDemo)
    app.component('ExpertSystemWaveDemo', ExpertSystemWaveDemo)
    app.component('AIErasComparisonDemo', AIErasComparisonDemo)
    app.component('RuleBasedVsLearningDemo', RuleBasedVsLearningDemo)
    app.component('PerceptronDemo', PerceptronDemo)
    app.component('AIEvolutionTimelineDemo', AIEvolutionTimelineDemo)
    app.component('CombinatorialExplosionDemo', CombinatorialExplosionDemo)
    app.component(
      'NeuralNetworkVisualizationDemo',
      NeuralNetworkVisualizationDemo
    )
    app.component('BackpropagationDemo', BackpropagationDemo)
    app.component('AttentionMechanismDemo', AttentionMechanismDemo)
    app.component(
      'DiscriminativeVsGenerativeDemo',
      DiscriminativeVsGenerativeDemo
    )
    app.component('GPTEvolutionDemo', GPTEvolutionDemo)

    // Transformer & Attention Components Registration
    app.component('TransformerQuickStartDemo', TransformerQuickStartDemo)
    app.component('RnnVsTransformerDemo', RnnVsTransformerDemo)
    app.component('SelfAttentionDemo', SelfAttentionDemo)
    app.component('QKVMechanismDemo', QKVMechanismDemo)
    app.component('MultiHeadAttentionDemo', MultiHeadAttentionDemo)
    app.component('TransformerArchitectureDemo', TransformerArchitectureDemo)
    app.component('PositionalEncodingDemo', PositionalEncodingDemo)
    app.component('AttentionDecompositionDemo', AttentionDecompositionDemo)

    // AI Protocols Components Registration
    app.component('McpVisualDemo', McpVisualDemo)
    app.component('A2AVisualDemo', A2AVisualDemo)
    app.component('McpDetailedDemo', McpDetailedDemo)
    app.component('A2ADetailedDemo', A2ADetailedDemo)
    app.component('ProtocolComparisonDemo', ProtocolComparisonDemo)
    app.component('ProtocolWorkflowDemo', ProtocolWorkflowDemo)

    app.component('ImperativeVsDeclarativeDemo', ImperativeVsDeclarativeDemo)
    app.component('ComponentReusabilityDemo', ComponentReusabilityDemo)
    app.component('FrameworkMotivationDemo', FrameworkMotivationDemo)
    app.component('ManualVsAutoSyncDemo', ManualVsAutoSyncDemo)
    app.component('ReactivityMechanismDemo', ReactivityMechanismDemo)
    app.component('VirtualDomDiffDemo', VirtualDomDiffDemo)
    app.component('FrameworkSpectrumDemo', FrameworkSpectrumDemo)
    app.component('DataUIGapDemo', DataUIGapDemo)
    app.component('DeclarativeFormulaDemo', DeclarativeFormulaDemo)
    app.component('DomOperationCostDemo', DomOperationCostDemo)
    app.component('ComponentTreeDemo', ComponentTreeDemo)
    app.component('WhatIsDomDemo', WhatIsDomDemo)
    app.component('WhyNoAutoSyncDemo', WhyNoAutoSyncDemo)

    app.component('BackendEvolutionDemo', BackendEvolutionDemo)
    app.component('BackendQuickStartDemo', BackendQuickStartDemo)
    app.component('EvolutionIntroDemo', EvolutionIntroDemo)
    app.component('PhysicalServerDemo', PhysicalServerDemo)
    app.component('MonolithDemo', MonolithDemo)
    app.component('ContainerDockerDemo', ContainerDockerDemo)
    app.component('MicroservicesDemo', MicroservicesDemo)
    app.component('KubernetesDemo', KubernetesDemo)
    app.component('ServerlessDemo', ServerlessDemo)
    app.component('ArchitectureComparisonDemo', ArchitectureComparisonDemo)
    app.component('DeploymentFlowDemo', DeploymentFlowDemo)
    app.component('TechStackTimelineDemo', TechStackTimelineDemo)
    app.component('ScalingStrategyDemo', ScalingStrategyDemo)
    app.component('MonolithVsMicroserviceDemo', MonolithVsMicroserviceDemo)
    app.component('CgiQueueDemo', CgiQueueDemo)
    app.component('MonolithReleaseRiskDemo', MonolithReleaseRiskDemo)
    app.component('MicroserviceLatencyDemo', MicroserviceLatencyDemo)
    app.component('CacheHitRatioDemo', CacheHitRatioDemo)
    app.component('ServerlessCostAutoScaleDemo', ServerlessCostAutoScaleDemo)

    // Frontend Performance Components
    app.component('PerformanceMetricsDemo', PerformanceMetricsDemo)
    app.component('PerformanceOverviewDemo', PerformanceOverviewDemo)
    app.component('ReflowRepaintDemo', ReflowRepaintDemo)
    app.component('ImageOptimizationDemo', ImageOptimizationDemo)
    app.component('LazyLoadingDemo', LazyLoadingDemo)
    app.component('CachingStrategyDemo', CachingStrategyDemo)
    app.component('CriticalRenderingPathDemo', CriticalRenderingPathDemo)
    app.component('VirtualScrollingDemo', VirtualScrollingDemo)

    // Canvas Intro Components Registration
    app.component('CanvasBasicsDemo', CanvasBasicsDemo)
    app.component('CoordinateSystemDemo', CoordinateSystemDemo)
    app.component('AnimationLoopDemo', AnimationLoopDemo)
    app.component('EventHandlingDemo', EventHandlingDemo)
    app.component('ParticleSystemDemo', ParticleSystemDemo)
    app.component('PerformanceDemo', PerformanceDemo)

    // Cache Design Components Registration
    app.component('CacheArchitectureDemo', CacheArchitectureDemo)
    app.component('LocalityPrincipleDemo', LocalityPrincipleDemo)
    app.component('CacheLifecycleDemo', CacheLifecycleDemo)
    app.component('LocalVsDistributedCacheDemo', LocalVsDistributedCacheDemo)
    app.component('MultiLevelCacheDemo', MultiLevelCacheDemo)
    app.component('CachePatternsDemo', CachePatternsDemo)
    app.component('CacheProblemsDemo', CacheProblemsDemo)
    app.component('ProductCacheDemo', ProductCacheDemo)

    // Auth Design Components Registration
    app.component('AuthEvolutionDemo', AuthEvolutionDemo)
    app.component('AuthBasicsDemo', AuthBasicsDemo)
    app.component('AuthInteractiveLoginDemo', AuthInteractiveLoginDemo)
    app.component('AuthNvsAuthZDemo', AuthNvsAuthZDemo)
    app.component('SessionCookieDemo', SessionCookieDemo)
    app.component('JWTWorkflowDemo', JWTWorkflowDemo)
    app.component('SessionVsJWTDemo', SessionVsJWTDemo)
    app.component('OAuth2FlowDemo', OAuth2FlowDemo)
    app.component('PasswordHashingDemo', PasswordHashingDemo)
    app.component('CSRFDefenseDemo', CSRFDefenseDemo)

    // Queue Design Components Registration
    app.component('MessageQueueDemo', MessageQueueDemo)
    app.component('PeakShavingDemo', PeakShavingDemo)
    app.component('MessageQueueComponentsDemo', MessageQueueComponentsDemo)
    app.component('PointToPointVsPubSubDemo', PointToPointVsPubSubDemo)
    app.component('MessageQueueComparisonDemo', MessageQueueComparisonDemo)
    app.component('CouplingDemo', CouplingDemo)
    app.component('DecouplingDemo', DecouplingDemo)
    app.component('PubSubDemo', PubSubDemo)
    app.component('DeadLetterQueueDemo', DeadLetterQueueDemo)
    app.component('DelayedMessageDemo', DelayedMessageDemo)
    app.component('SeckillSystemDemo', SeckillSystemDemo)

    // Prompt Engineering Components Registration
    app.component('PromptQuickStartDemo', PromptQuickStartDemo)
    app.component('PromptComparisonDemo', PromptComparisonDemo)
    app.component('FewShotDemo', FewShotDemo)
    app.component('ChainOfThoughtDemo', ChainOfThoughtDemo)
    app.component('PromptTemplatesDemo', PromptTemplatesDemo)
    app.component('PromptRobustnessDemo', PromptRobustnessDemo)
    app.component('PromptSecurityDemo', PromptSecurityDemo)
    app.component('TrainingProcessDemo', TrainingProcessDemo)

    // Context Engineering Components Registration
    app.component('AgentContextFlow', AgentContextFlow)
    app.component('IntroProblemReasonSolution', IntroProblemReasonSolution)
    app.component('ContextWindowVisualizer', ContextWindowVisualizer)
    app.component('SlidingWindowDemo', SlidingWindowDemo)
    app.component('SelectiveContextDemo', SelectiveContextDemo)
    app.component('RAGSimulationDemo', RAGSimulationDemo)
    app.component('ContextCompressionDemo', ContextCompressionDemo)
    app.component('MemoryPalaceDemo', MemoryPalaceDemo)
    app.component('MemoryPalaceActionDemo', MemoryPalaceActionDemo)
    app.component('KVCacheDemo', KVCacheDemo)
    app.component('LostInMiddleDemo', LostInMiddleDemo)

    // Frontend Engineering Components Registration
    app.component('BuildPipelineDemo', BuildPipelineDemo)
    app.component('BundlerComparisonDemo', BundlerComparisonDemo)
    app.component('TreeShakingDemo', TreeShakingDemo)
    app.component('CodeSplittingDemo', CodeSplittingDemo)
    app.component('HotReloadDemo', HotReloadDemo)
    app.component('DependencyGraphDemo', DependencyGraphDemo)
    app.component('SourceMapDemo', SourceMapDemo)
    app.component('AssetFingerprintDemo', AssetFingerprintDemo)

    // Frontend Routing Components Registration
    app.component('HashVsHistoryDemo', HashVsHistoryDemo)
    app.component('DynamicRoutesDemo', DynamicRoutesDemo)
    app.component('MpaRoutingDemo', MpaRoutingDemo)
    app.component('NestedRoutesDemo', NestedRoutesDemo)
    app.component('RouteGuardsDemo', RouteGuardsDemo)
    app.component('RouteMatchingDemo', RouteMatchingDemo)
    app.component('RouterArchitectureDemo', RouterArchitectureDemo)
    app.component('RoutingModesDemo', RoutingModesDemo)
    app.component('SpaNavigationDemo', SpaNavigationDemo)

    // Agent Intro Components Registration
    app.component('AgentWorkflowDemo', AgentWorkflowDemo)
    app.component('AgentLevelDemo', AgentLevelDemo)
    app.component('AgentArchitectureDemo', AgentArchitectureDemo)
    app.component('AgentTaskFlowDemo', AgentTaskFlowDemo)
    app.component('FrameworkComparisonDemo', FrameworkComparisonDemo)
    app.component('FrameworkSelectionDemo', FrameworkSelectionDemo)
    app.component('AgentChallengesDemo', AgentChallengesDemo)
    app.component('AgentFutureDemo', AgentFutureDemo)
    app.component('AgentQuickStartDemo', AgentQuickStartDemo)
    app.component('AgentToolUseDemo', AgentToolUseDemo)
    app.component('AgentPlanningDemo', AgentPlanningDemo)
    app.component('AgentMemoryDemo', AgentMemoryDemo)
    app.component('AgentMultiToolPrinciple', AgentMultiToolPrinciple)
    app.component('AgentMemoryPrinciple', AgentMemoryPrinciple)

    // Database Intro Components Registration
    app.component('DatabaseIndexDemo', DatabaseIndexDemo)
    app.component('RelationalDataDemo', RelationalDataDemo)
    app.component('SqlPlaygroundDemo', SqlPlaygroundDemo)

    // IDE Intro Components Registration
    app.component('VirtualVSCodeDemo', VirtualVSCodeDemo)
    app.component('DemoIde', VirtualVSCodeDemo) // Alias
    app.component('IdeArchitectureDemo', IdeArchitectureDemo)
    app.component('AiHelpDemo', AiHelpDemo)
    app.component('BrowserDevToolsDemo', BrowserDevToolsDemo)
    app.component('BrowserDevToolsLiveDemo', BrowserDevToolsLiveDemo)
    app.component('DevToolsElementsDemo', DevToolsElementsDemo)
    app.component('DevToolsConsoleDemo', DevToolsConsoleDemo)
    app.component('DevToolsNetworkDemo', DevToolsNetworkDemo)
    app.component('DevToolsSourcesDemo', DevToolsSourcesDemo)
    app.component('DevToolsApplicationDemo', DevToolsApplicationDemo)

    // Tracking Design Components Registration
    app.component('TrackingOverviewDemo', TrackingOverviewDemo)
    app.component('TrackingTypesDemo', TrackingTypesDemo)
    app.component(
      'TrackingMethodsComparisonDemo',
      TrackingMethodsComparisonDemo
    )
    app.component('DataModelDesignDemo', DataModelDesignDemo)
    app.component('DataCollectionDemo', DataCollectionDemo)
    app.component('DataPipelineDemo', DataPipelineDemo)
    app.component('PrivacyComplianceDemo', PrivacyComplianceDemo)
    app.component('RealWorldCaseDemo', RealWorldCaseDemo)
    app.component('ToolSelectionDemo', ToolSelectionDemo)

    // Operations Components Registration
    app.component('MonitoringDashboardDemo', MonitoringDashboardDemo)
    app.component('AlertFlowDemo', AlertFlowDemo)
    app.component('TraceVisualizationDemo', TraceVisualizationDemo)
    app.component('IncidentResponseDemo', IncidentResponseDemo)
    app.component('CapacityPlanningDemo', CapacityPlanningDemo)

    // Backend Languages Components Registration
    app.component('BackendLanguagesDemo', BackendLanguagesDemo)
    app.component(
      'ProgrammingLanguageComparisonDemo',
      ProgrammingLanguageComparisonDemo
    )
    app.component('PerformanceBenchmarkDemo', PerformanceBenchmarkDemo)
    app.component('SyntaxComparisonDemo', SyntaxComparisonDemo)
    app.component('ConcurrencyModelDemo', ConcurrencyModelDemo)
    app.component('LanguageSelectorDemo', LanguageSelectorDemo)
    app.component('DeveloperEfficiencyDemo', DeveloperEfficiencyDemo)
    app.component('LanguageEcosystemDemo', LanguageEcosystemDemo)
    app.component('MemoryManagementDemo', MemoryManagementDemo)
    app.component('LanguageScopeDemo', LanguageScopeDemo)

    // Concurrency Models Components Registration
    app.component('ProcessThreadCoroutineDemo', ProcessThreadCoroutineDemo)
    app.component('ProcessIsolationDemo', ProcessIsolationDemo)
    app.component('ThreadSchedulingDemo', ThreadSchedulingDemo)
    app.component('CoroutineLightweightDemo', CoroutineLightweightDemo)
    app.component('AsyncAwaitDemo', AsyncAwaitDemo)
    app.component('EventLoopDemo', EventLoopDemo)
    app.component('ConcurrentVsParallelDemo', ConcurrentVsParallelDemo)
    app.component('GoroutineGreenThreadDemo', GoroutineGreenThreadDemo)

    // Component State Management Components Registration
    app.component('ComponentHierarchyDemo', ComponentHierarchyDemo)
    app.component('PropsFlowDemo', PropsFlowDemo)
    app.component('EventBusDemo', EventBusDemo)
    app.component(
      'StateManagementComparisonDemo',
      StateManagementComparisonDemo
    )
    app.component('ReduxFlowDemo', ReduxFlowDemo)
    app.component('VuexPiniaDemo', VuexPiniaDemo)
    app.component('MobxReactivityDemo', MobxReactivityDemo)
    app.component('ZustandJotaiDemo', ZustandJotaiDemo)

    // Scheduled Tasks Components Registration
    app.component('CronExpressionDemo', CronExpressionDemo)
    app.component('TaskSchedulerDemo', TaskSchedulerDemo)
    app.component('BatchProcessingDemo', BatchProcessingDemo)
    app.component('JobQueueDemo', JobQueueDemo)
    app.component('RetryMechanismDemo', RetryMechanismDemo)
    app.component('DistributedLockDemo', DistributedLockDemo)
    app.component('TaskMonitoringDemo', TaskMonitoringDemo)
    app.component('SchedulingConflictDemo', SchedulingConflictDemo)

    // Cloud Services Components Registration
    app.component('CloudServicesMapDemo', CloudServicesMapDemo)
    app.component('AwsVsAliyunDemo', AwsVsAliyunDemo)
    app.component('ComputeServicesDemo', ComputeServicesDemo)
    app.component('StorageServicesDemo', StorageServicesDemo)
    app.component('NetworkServicesDemo', NetworkServicesDemo)
    app.component('SecurityServicesDemo', SecurityServicesDemo)
    app.component('PricingModelDemo', PricingModelDemo)
    app.component('ServiceSelectionDemo', ServiceSelectionDemo)
    app.component('DatabaseServicesDemo', DatabaseServicesDemo)
    app.component('K8sServicesDemo', K8sServicesDemo)

    // Cloud Services Simple Components Registration (new)
    app.component('CloudServicesOverview', CloudServicesOverview)
    app.component('ProviderComparison', ProviderComparison)
    app.component('PricingCalculator', PricingCalculator)
    app.component('ComputeInstanceDemo', ComputeInstanceDemo)
    app.component('StorageTypeDemo', StorageTypeDemo)
    app.component('ApiCallDemo', ApiCallDemo)
    app.component('CloudHistoryDemo', CloudHistoryDemo)
    app.component('DeployWorkflowDemo', DeployWorkflowDemo)
    app.component('RegionLatencyDemo', RegionLatencyDemo)

    // Cloud IAM Simple Components Registration (new)
    app.component('IAMStructure', IAMStructure)
    app.component('PolicyEditorDemo', PolicyEditorDemo)

    // Cloud IAM Components Registration
    app.component('IamRamComparisonDemo', IamRamComparisonDemo)
    app.component('IdentityProviderDemo', IdentityProviderDemo)
    app.component('RolePolicyDemo', RolePolicyDemo)
    app.component('PermissionHierarchyDemo', PermissionHierarchyDemo)
    app.component('AccessKeyManagementDemo', AccessKeyManagementDemo)
    app.component('MfaSecurityDemo', MfaSecurityDemo)
    app.component('CrossAccountAccessDemo', CrossAccountAccessDemo)
    app.component('BestPracticesDemo', BestPracticesDemo)

    // Gateway Proxy Components Registration
    app.component('ReverseProxyDemo', ReverseProxyDemo)
    app.component('ApiGatewayDemo', ApiGatewayDemo)
    app.component('NginxArchitectureDemo', NginxArchitectureDemo)
    app.component('RoutingRulesDemo', RoutingRulesDemo)
    app.component('RateLimitingDemo', RateLimitingDemo)
    app.component('AuthMiddlewareDemo', AuthMiddlewareDemo)
    app.component('LoadBalancingDemo', LoadBalancingDemo)
    app.component('SslTerminationDemo', SslTerminationDemo)

    // Load Balancing Components Registration
    app.component('LoadBalancerTypesDemo', LoadBalancerTypesDemo)
    app.component('HealthCheckDemo', HealthCheckDemo)
    app.component('SessionPersistenceDemo', SessionPersistenceDemo)
    app.component('WeightedRoutingDemo', WeightedRoutingDemo)
    app.component('BlueGreenDeploymentDemo', BlueGreenDeploymentDemo)
    app.component('CanaryReleaseDemo', CanaryReleaseDemo)
    app.component('AutoScalingDemo', AutoScalingDemo)
    app.component('MultiRegionDemo', MultiRegionDemo)

    // Backend Layered Architecture Components Registration
    app.component('LayeredArchitectureDemo', LayeredArchitectureDemo)
    app.component('ControllerLayerDemo', ControllerLayerDemo)
    app.component('ServiceLayerDemo', ServiceLayerDemo)
    app.component('RepositoryLayerDemo', RepositoryLayerDemo)
    app.component('DomainModelDemo', DomainModelDemo)
    app.component('DtoFlowDemo', DtoFlowDemo)
    app.component('DependencyDirectionDemo', DependencyDirectionDemo)
    app.component('CleanArchitectureDemo', CleanArchitectureDemo)

    // Browser Rendering Pipeline Components Registration
    app.component('DomToRenderTreeDemo', DomToRenderTreeDemo)
    app.component('LayoutReflowDemo', LayoutReflowDemo)
    app.component('PaintLayerDemo', PaintLayerDemo)
    app.component('CompositeDemo', CompositeDemo)
    app.component('MacroMicroTaskDemo', MacroMicroTaskDemo)
    app.component('RenderingPerformanceDemo', RenderingPerformanceDemo)
    app.component('RenderingPipelineDemo', RenderingPipelineDemo)
    app.component('EventLoopDemo', JSEventLoopDemo) // Alias for browser rendering context

    // Cache Design Extra Components Registration
    app.component('CacheArchitectureOverview', CacheArchitectureOverview)
    app.component('CacheHierarchyDemo', CacheHierarchyDemo)
    app.component('CachePatternComparisonDemo', CachePatternComparisonDemo)
    app.component(
      'EcommerceCacheArchitectureDemo',
      EcommerceCacheArchitectureDemo
    )
    app.component('CacheMonitoringDashboardDemo', CacheMonitoringDashboardDemo)

    // Cloud Storage CDN Extra Components Registration
    app.component('EdgeNodeDistributionDemo', EdgeNodeDistributionDemo)
    app.component('CachePolicyDemo', CachePolicyDemo)
    app.component('TrafficSchedulingDemo', TrafficSchedulingDemo)
    app.component('HttpsOptimizationDemo', HttpsOptimizationDemo)
    app.component('AccessAnalyticsDemo', AccessAnalyticsDemo)

    // API Design Components Registration
    app.component('ApiRequestDemo', ApiRequestDemo)
    app.component('RestfulUrlDemo', RestfulUrlDemo)
    app.component('StatusCodeDemo', StatusCodeDemo)
    app.component('ErrorHandlingDemo', ErrorHandlingDemo)
    app.component('ApiVersioningDemo', ApiVersioningDemo)
    app.component('ApiStyleCompare', ApiStyleCompare)
    app.component('ResponseStructureDemo', ResponseStructureDemo)
    app.component('DataFieldDesignDemo', DataFieldDesignDemo)
    app.component('ErrorResponseDesignDemo', ErrorResponseDesignDemo)

    // Database Intro Extra Components Registration
    app.component('DatabaseEvolutionDemo', DatabaseEvolutionDemo)
    app.component('DatabaseRelationDemo', DatabaseRelationDemo)
    app.component('BPlusTreeDemo', BPlusTreeDemo)
    app.component('TransactionACIDDemo', TransactionACIDDemo)
    app.component('QueryOptimizationDemo', QueryOptimizationDemo)

    // Queue Design Extra Components Registration
    app.component('MQArchitectureDemo', MQArchitectureDemo)
    app.component('ProducerConsumerDemo', ProducerConsumerDemo)
    app.component('ReliabilityDemo', ReliabilityDemo)
    app.component('IdempotenceDemo', IdempotenceDemo)
    app.component('MQComparisonDemo', MQComparisonDemo)

    // JavaScript Intro Components Registration
    app.component('VariableBoxDemo', VariableBoxDemo)
    app.component('ReferenceDemo', ReferenceDemo)
    app.component('FunctionMachineDemo', FunctionMachineDemo)
    app.component('ScopeDemo', ScopeDemo)
    app.component('VariableScopeDemo', VariableScopeDemo)
    app.component('DataTypeDemo', DataTypeDemo)
    app.component('ClosureDemo', ClosureDemo)
    app.component('ThisContextDemo', ThisContextDemo)
    app.component('PrototypeDemo', PrototypeDemo)
    app.component('AsyncDemo', AsyncDemo)
    app.component('DOMTreeDemo', DOMTreeDemo)
    app.component('AsyncRestaurantDemo', AsyncRestaurantDemo)
    app.component('JSEventLoopDemo', JSEventLoopDemo)

    // JavaScript Runtime Components Registration
    app.component('RuntimeEnvironmentDemo', RuntimeEnvironmentDemo)
    app.component('CallStackDemo', CallStackDemo)
    app.component('TaskQueueDemo', TaskQueueDemo)
    app.component('MemoryLeakDemo', MemoryLeakDemo)
    app.component('GarbageCollectionDemo', GarbageCollectionDemo)

    // Development Tools Components Registration
    app.component('EnvVarOverviewDemo', EnvVarOverviewDemo)
    app.component('PathSearchDemo', PathSearchDemo)
    app.component('EnvScopeDemo', EnvScopeDemo)
    app.component('EnvExportDemo', EnvExportDemo)
    app.component('ApiKeyDangerDemo', ApiKeyDangerDemo)
    app.component('DotEnvDemo', DotEnvDemo)
    app.component('ServerSecretDemo', ServerSecretDemo)

    // Ports & Localhost Components Registration
    app.component('PortAnalogyDemo', PortAnalogyDemo)
    app.component('LocalhostLoopbackDemo', LocalhostLoopbackDemo)
    app.component('PortConflictDemo', PortConflictDemo)
    app.component('CommonPortsDemo', CommonPortsDemo)
    app.component('DevServerFlowDemo', DevServerFlowDemo)
    app.component('PortTroubleshootDemo', PortTroubleshootDemo)
    app.component('PackageManagerOverviewDemo', PackageManagerOverviewDemo)
    app.component('PackageInstallDemo', PackageInstallDemo)
    app.component('DependencyTreeDemo', DependencyTreeDemo)
    app.component('SSHAuthDemo', SSHAuthDemo)
    app.component('RegexDemo', RegexDemo)

    // TypeScript Intro Components Registration
    app.component('TypeAnnotationDemo', TypeAnnotationDemo)
    app.component('InterfaceDemo', InterfaceDemo)
    app.component('GenericDemo', GenericDemo)
    app.component('TypeInferenceDemo', TypeInferenceDemo)

    // Server & Backend Components Registration
    app.component('SerializationDemo', SerializationDemo)
    app.component('HttpProtocolDemo', HttpProtocolDemo)

    // Data Components Registration
    app.component('SqlDemo', SqlDemo)
    app.component('DataModelsDemo', DataModelsDemo)
    app.component('ABTestingDemo', ABTestingDemo)
    app.component('DescriptiveStatsDemo', DescriptiveStatsDemo)
    app.component('DataAggregationDemo', DataAggregationDemo)
    app.component('FunnelAnalysisDemo', FunnelAnalysisDemo)
    app.component('RetentionAnalysisDemo', RetentionAnalysisDemo)
    app.component('DataTrackingDemo', DataTrackingDemo)

    // Engineering Excellence Components Registration
    app.component('CodeSmellDemo', CodeSmellDemo)
    app.component('RefactoringDemo', RefactoringDemo)
    app.component('TestPyramidDemo', TestPyramidDemo)
    app.component('TDDCycleDemo', TDDCycleDemo)
    app.component('DesignPatternCatalogDemo', DesignPatternCatalogDemo)
    app.component('PatternPlaygroundDemo', PatternPlaygroundDemo)
    app.component('WebSecurityDemo', WebSecurityDemo)
    app.component('SecurityChecklistDemo', SecurityChecklistDemo)
    app.component('DocStructureDemo', DocStructureDemo)
    app.component('TechWritingPracticeDemo', TechWritingPracticeDemo)
    app.component('OpenSourceWorkflowDemo', OpenSourceWorkflowDemo)
    app.component('LicenseComparisonDemo', LicenseComparisonDemo)
    app.component('TechRadarDemo', TechRadarDemo)
    app.component('DecisionMatrixDemo', DecisionMatrixDemo)

    // RAG Components Registration
    app.component('RAGPipelineDemo', RAGPipelineDemo)
    app.component('ChunkingStrategyDemo', ChunkingStrategyDemo)
    app.component('RetrievalDemo', RetrievalDemo)
    app.component('RAGArchitectureDemo', RAGArchitectureDemo)
    app.component('RAGvsFineTuningDemo', RAGvsFineTuningDemo)

    // Embedding & Vector Components Registration
    app.component('EmbeddingConceptDemo', EmbeddingConceptDemo)
    app.component('VectorSimilarityDemo', VectorSimilarityDemo)
    app.component('VectorIndexDemo', VectorIndexDemo)
    app.component('VectorDatabaseDemo', VectorDatabaseDemo)
    app.component('EmbeddingPipelineDemo', EmbeddingPipelineDemo)

    // AI Native App Components Registration
    app.component('AINativeArchDemo', AINativeArchDemo)
    app.component('AIDesignPrincipleDemo', AIDesignPrincipleDemo)
    app.component('PromptDesignDemo', PromptDesignDemo)
    app.component('AIUXPatternDemo', AIUXPatternDemo)
    app.component('AIAppFlowDemo', AIAppFlowDemo)

    // Infrastructure as Code Components Registration
    app.component('IaCConceptDemo', IaCConceptDemo)
    app.component('TerraformWorkflowDemo', TerraformWorkflowDemo)
    app.component('IaCToolComparisonDemo', IaCToolComparisonDemo)
    app.component('ConfigDriftDemo', ConfigDriftDemo)
    app.component('IaCBestPracticeDemo', IaCBestPracticeDemo)

    // DNS & HTTPS Components Registration
    app.component('DnsResolutionDemo', DnsResolutionDemo)
    app.component('DnsRecordTypeDemo', DnsRecordTypeDemo)
    app.component('HttpsHandshakeDemo', HttpsHandshakeDemo)
    app.component('CertificateChainDemo', CertificateChainDemo)
    app.component('DnsHttpsComparisonDemo', DnsHttpsComparisonDemo)

    // Model Finetuning Components Registration
    app.component('FinetuningPipelineDemo', FinetuningPipelineDemo)
    app.component('TrainingDataDemo', TrainingDataDemo)
    app.component('LoRADemo', LoRADemo)
    app.component('ModelQuantizationDemo', ModelQuantizationDemo)
    app.component('ModelServingDemo', ModelServingDemo)

    // Incident Response Components Registration
    app.component('SeverityLevelDemo', SeverityLevelDemo)
    app.component('IncidentTimelineDemo', IncidentTimelineDemo)
    app.component('IncidentCommandDemo', IncidentCommandDemo)
    app.component('AlertEscalationDemo', AlertEscalationDemo)
    app.component('PostmortemDemo', PostmortemDemo)

    // // Async Task Queues Components Registration
    // Async Task Queues Components Registration
    app.component('AsyncTaskFlowDemo', AsyncTaskFlowDemo)
    app.component('TaskWorkerDemo', TaskWorkerDemo)
    app.component('TaskRetryDemo', TaskRetryDemo)
    app.component('AsyncComparisonDemo', AsyncComparisonDemo)

    // // File Storage Components Registration
    // File Storage Components Registration
    app.component('FileStorageTypeDemo', FileStorageTypeDemo)
    app.component('FileUploadFlowDemo', FileUploadFlowDemo)
    app.component('CDNAccelerationDemo', CDNAccelerationDemo)

    // // Rate Limiting Components Registration
    app.component('RateLimitAlgorithmDemo', RateLimitAlgorithmDemo)
    app.component('BackpressureDemo', BackpressureDemo)

    // Search Engines Components Registration
    app.component('InvertedIndexDemo', InvertedIndexDemo)
    app.component('SearchRelevanceDemo', SearchRelevanceDemo)

    // Data Visualization Components Registration
    app.component('ChartTypeSelectorDemo', ChartTypeSelectorDemo)
    app.component('DashboardLayoutDemo', DashboardLayoutDemo)

    // Data Governance Components Registration
    app.component('DataQualityDemo', DataQualityDemo)
    app.component('DataGovernanceFrameworkDemo', DataGovernanceFrameworkDemo)
    app.component('DataLineageDemo', DataLineageDemo)

    // Distributed Systems Components Registration
    app.component('CAPTheoremDemo', CAPTheoremDemo)
    app.component('ConsistencyModelsDemo', ConsistencyModelsDemo)
    app.component('DistributedChallengesDemo', DistributedChallengesDemo)

    // High Availability Components Registration
    app.component('AvailabilityCalculatorDemo', AvailabilityCalculatorDemo)
    app.component('FailoverStrategyDemo', FailoverStrategyDemo)

    // Monolith to Microservices Components Registration
    app.component('ArchEvolutionDemo', ArchEvolutionDemo)

    // System Design Methodology Components Registration
    app.component('SystemDesignStepsDemo', SystemDesignStepsDemo)
    app.component('CapacityEstimationDemo', CapacityEstimationDemo)

    // Docker Containers Components Registration
    app.component('DockerArchitectureDemo', DockerArchitectureDemo)
    app.component('DockerLifecycleDemo', DockerLifecycleDemo)

    // Linux Basics Components Registration
    app.component('LinuxFileSystemDemo', LinuxFileSystemDemo)
    app.component('LinuxCommandDemo', LinuxCommandDemo)
    app.component('LinuxPermissionsDemo', LinuxPermissionsDemo)

    // Kubernetes Components Registration
    app.component('K8sArchitectureDemo', K8sArchitectureDemo)
    app.component('K8sWorkloadsDemo', K8sWorkloadsDemo)

    // Neural Networks Components Registration
    app.component('NeuronDemo', NeuronDemo)
    app.component('NetworkLayersDemo', NetworkLayersDemo)
    app.component('NetworkArchitectureDemo', NetworkArchitectureDemo)

    // Project Architecture Components Registration
    app.component(
      'ProjectArchitectureComparisonDemo',
      ProjectArchitectureComparisonDemo
    )

    // Appendix Navigation Component Registration
    app.component('AppendixFlowMap', AppendixFlowMap)
  },
  setup() {
    const route = useRoute()
    const { frontmatter } = useData()
    let viewer = null
    let mermaidViewer = null
    let mermaidViewerWrapper = null
    let mermaidViewerObjectUrl = null
    let mermaidApi = null
    let themeObserver = null
    let currentMermaidTheme = null
    const COLLAPSIBLE_CODE_MIN_LINES = 14

    // Skip browser-only initialization during SSR
    if (import.meta.env.SSR) {
      return
    }

    const getMermaidTheme = () =>
      document.documentElement.classList.contains('dark') ? 'dark' : 'default'

    const loadMermaid = async () => {
      if (mermaidApi) return mermaidApi
      const mermaidModule = await import('mermaid')
      mermaidApi = mermaidModule.default ?? mermaidModule
      return mermaidApi
    }

    const renderMermaidDiagrams = async (force = false) => {
      const mermaidBlocks = document.querySelectorAll(
        '.vp-doc div.language-mermaid, .vp-doc .mermaid-diagram[data-source]'
      )

      if (!mermaidBlocks.length) return

      const mermaid = await loadMermaid()
      const nextTheme = getMermaidTheme()

      if (force || currentMermaidTheme !== nextTheme) {
        mermaid.initialize({
          startOnLoad: false,
          securityLevel: 'loose',
          theme: nextTheme
        })
        currentMermaidTheme = nextTheme
      }

      let index = 0
      for (const block of mermaidBlocks) {
        let source = ''
        let container = block

        if (block.classList.contains('language-mermaid')) {
          source = block.querySelector('code')?.textContent?.trim() ?? ''
          if (!source) continue

          container = document.createElement('div')
          container.className = 'mermaid-diagram'
          container.dataset.source = source
          block.replaceWith(container)
        } else {
          source = block.dataset.source ?? ''
          if (!source) continue
        }

        try {
          const diagramId = `mermaid-${route.path.replace(/\W+/g, '-')}-${Date.now()}-${index}`
          const { svg, bindFunctions } = await mermaid.render(diagramId, source)
          container.innerHTML = svg
          container.classList.remove('mermaid-diagram-error')
          container.setAttribute('role', 'button')
          container.setAttribute('tabindex', '0')
          container.setAttribute('aria-label', 'Open Mermaid diagram in fullscreen viewer')
          container.onclick = (event) => {
            if (event.target.closest?.('a')) return
            openMermaidViewer(container)
          }
          container.onkeydown = (event) => {
            if (event.key === 'Enter' || event.key === ' ') {
              event.preventDefault()
              openMermaidViewer(container)
            }
          }
          bindFunctions?.(container)
        } catch (error) {
          console.error('Mermaid render failed:', error)
          container.innerHTML = ''
          container.classList.add('mermaid-diagram-error')
        }

        index += 1
      }
    }

    const cleanupMermaidViewer = () => {
      if (mermaidViewer) {
        mermaidViewer.destroy()
        mermaidViewer = null
      }

      if (mermaidViewerWrapper) {
        mermaidViewerWrapper.remove()
        mermaidViewerWrapper = null
      }

      if (mermaidViewerObjectUrl) {
        URL.revokeObjectURL(mermaidViewerObjectUrl)
        mermaidViewerObjectUrl = null
      }

      document.body.classList.remove('mermaid-viewer-open')
      document.body.classList.remove('viewer-ready')
    }

    const openMermaidViewer = (container) => {
      const svg = container.querySelector('svg')
      if (!svg) return

      cleanupMermaidViewer()

      const serializer = new XMLSerializer()
      let svgMarkup = serializer.serializeToString(svg)

      if (!svgMarkup.includes('xmlns="http://www.w3.org/2000/svg"')) {
        svgMarkup = svgMarkup.replace(
          '<svg',
          '<svg xmlns="http://www.w3.org/2000/svg"'
        )
      }

      const blob = new Blob([svgMarkup], {
        type: 'image/svg+xml;charset=utf-8'
      })
      mermaidViewerObjectUrl = URL.createObjectURL(blob)

      mermaidViewerWrapper = document.createElement('div')
      mermaidViewerWrapper.className = 'mermaid-viewer-source'

      const previewImage = document.createElement('img')
      previewImage.src = mermaidViewerObjectUrl
      previewImage.alt = 'Mermaid diagram preview'
      mermaidViewerWrapper.append(previewImage)
      document.body.append(mermaidViewerWrapper)

      mermaidViewer = new Viewer(mermaidViewerWrapper, {
        button: true,
        navbar: false,
        title: false,
        toolbar: true,
        tooltip: true,
        movable: true,
        zoomable: true,
        rotatable: false,
        scalable: false,
        transition: false,
        fullscreen: true,
        keyboard: true,
        url: 'src',
        shown() {
          document.body.classList.add('mermaid-viewer-open')
          document.body.classList.add('viewer-ready')
        },
        viewed() {
          requestAnimationFrame(() => {
            const imageData = mermaidViewer?.imageData
            const viewerData = mermaidViewer?.viewerData
            if (!imageData || !viewerData) return

            const widthScale = (viewerData.width * 0.94) / imageData.width
            const heightScale = (viewerData.height * 0.94) / imageData.height
            const targetScale = Math.min(widthScale, heightScale)

            if (targetScale > 1.02) {
              mermaidViewer.zoomTo(imageData.ratio * targetScale, false)
            }
          })
        },
        hidden() {
          cleanupMermaidViewer()
        }
      })

      mermaidViewer.view(0)
    }

    const initRenderedMermaidFeatures = async (force = false) => {
      await renderMermaidDiagrams(force)
    }

    const getCodeToggleLabels = () => {
      const isChineseRoute =
        route.path.startsWith('/zh-cn/') || route.path.startsWith('/zh-tw/')

      return isChineseRoute
        ? {
            expand: '展开代码',
            collapse: '收起代码'
          }
        : {
            expand: 'Expand code',
            collapse: 'Collapse code'
          }
    }

    const getCodeLineCount = (source) => {
      const normalized = source.replace(/\s+$/, '')
      if (!normalized) return 0
      return normalized.split('\n').length
    }

    const updateCodeToggleButton = (block, button, lineCount) => {
      const labels = getCodeToggleLabels()
      const isCollapsed = block.classList.contains('is-code-collapsed')
      const nextLabel = isCollapsed ? labels.expand : labels.collapse

      button.textContent = `${nextLabel} (${lineCount} 行)`
      button.setAttribute('aria-expanded', String(!isCollapsed))
      button.setAttribute('title', nextLabel)
    }

    const initCollapsibleCodeBlocks = () => {
      const codeBlocks = document.querySelectorAll(
        '.vp-doc div[class*="language-"]:not(.language-mermaid)'
      )

      codeBlocks.forEach((block) => {
        const pre = block.querySelector('pre')
        const code = pre?.querySelector('code')
        if (!pre || !code) return

        const lineCount = getCodeLineCount(code.textContent ?? '')
        const existingToggle = block.querySelector('.code-collapse-toggle')

        if (lineCount < COLLAPSIBLE_CODE_MIN_LINES) {
          block.classList.remove('is-collapsible-code', 'is-code-collapsed')
          existingToggle?.remove()
          return
        }

        block.classList.add('is-collapsible-code')

        let toggle = existingToggle
        if (!toggle) {
          toggle = document.createElement('button')
          toggle.type = 'button'
          toggle.className = 'code-collapse-toggle'
          toggle.addEventListener('click', () => {
            block.classList.toggle('is-code-collapsed')
            updateCodeToggleButton(block, toggle, lineCount)
          })
          block.append(toggle)
        }

        block.classList.add('is-code-collapsed')
        updateCodeToggleButton(block, toggle, lineCount)
      })
    }

    const initViewer = () => {
      // 销毁旧实例
      if (viewer) {
        viewer.destroy()
        viewer = null
      }

      // 找到文章内容容器
      const doc = document.querySelector('.vp-doc')
      if (doc) {
        // 初始化 Viewer，配置一些常用选项
        viewer = new Viewer(doc, {
          button: true, // 显示右上角关闭按钮
          navbar: true, // 显示底部缩略图导航
          title: true, // 显示图片标题（alt 属性）
          toolbar: true, // 显示工具栏（缩放、旋转等）
          tooltip: true, // 显示缩放百分比
          movable: true, // 允许拖拽
          zoomable: true, // 允许缩放
          rotatable: true, // 允许旋转
          scalable: true, // 允许翻转
          transition: false, // 禁用自带动画，确保打开瞬间无飞入
          fullscreen: true, // 允许全屏播放
          shown() {
            // 打开完成后，标记为 ready，CSS 此时才会介入 transition
            document.body.classList.add('viewer-ready')
          },
          hide() {
            // 关闭前移除标记，确保关闭瞬间无动画
            document.body.classList.remove('viewer-ready')
          },
          keyboard: true, // 允许键盘控制
          url: 'src', // 图片源
          // 过滤掉不想查看的图片（比如表情包等小图标，如果需要的话）
          filter(image) {
            return (
              !image.classList.contains('no-viewer') &&
              !image.classList.contains('nav-title-logo')
            )
          }
        })
      }
    }

    const initTypewriter = () => {
      const taglineData = frontmatter.value.hero?.tagline
      if (Array.isArray(taglineData) && taglineData.length > 0) {
        const taglineEl = document.querySelector('.VPHomeHero .tagline')
        if (taglineEl) {
          taglineEl.innerHTML = ''

          const typeIt = new TypeIt(taglineEl, {
            speed: 50,
            startDelay: 500,
            loop: true
          })

          taglineData.forEach((text) => {
            typeIt.type(text).pause(2000).delete().pause(500)
          })

          typeIt.go()
        }
      }
    }

    const optimizeImages = () => {
      const images = document.querySelectorAll('.vp-doc img')
      images.forEach((img) => {
        if (img.complete) {
          applyImageStyle(img)
        } else {
          img.onload = () => applyImageStyle(img)
        }
      })
    }

    const applyImageStyle = (img) => {
      if (img.classList.contains('nav-title-logo')) return
      const { naturalWidth, naturalHeight } = img
      if (!naturalWidth || !naturalHeight) return

      const ratio = naturalHeight / naturalWidth
      img.classList.remove(
        'img-tall',
        'img-very-tall',
        'img-ultra-tall',
        'img-limit-width',
        'img-limit-height'
      )

      img.style.maxWidth = ''
      img.style.maxHeight = ''
      img.style.width = ''
      img.style.height = ''

      if (ratio <= 1) {
        img.classList.add('img-limit-width')
        return
      }

      img.classList.add('img-tall')
      if (ratio > 2.2) {
        img.classList.add('img-ultra-tall')
      } else if (ratio > 1.3) {
        img.classList.add('img-very-tall')
      }
    }

    onMounted(async () => {
      initViewer()
      initTypewriter()
      optimizeImages()
      await initRenderedMermaidFeatures(true)
      initCollapsibleCodeBlocks()

      themeObserver = new MutationObserver(() => {
        const nextTheme = getMermaidTheme()
        if (nextTheme === currentMermaidTheme) return
        nextTick(async () => {
          await initRenderedMermaidFeatures(true)
        })
      })

      themeObserver.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class']
      })
    })

    watch(
      () => route.path,
      () =>
        nextTick(async () => {
          cleanupMermaidViewer()
          initViewer()
          initTypewriter()
          optimizeImages()
          await initRenderedMermaidFeatures(true)
          initCollapsibleCodeBlocks()
        })
    )

    onBeforeUnmount(() => {
      cleanupMermaidViewer()
      if (themeObserver) {
        themeObserver.disconnect()
        themeObserver = null
      }
    })
  }
}