§3.1DemoMount — जीवंत

काम का बँटवारा पैकेज का जाना-पहचाना ही है: माउंट-मार्कअप (मंच, controls-slot, caption-slot) पैकेज में आता है; डेमो-मॉड्यूल और उसका लोडर साइट के हैं। यह साइट अपना लोडर src/lib/demo-loader.ts में रखती है और लेआउट से एक बार mountAllDemos() पुकारती है; पुकार हर पन्ने पर चलती है, पर डेमो-मॉड्यूल का chunk सिर्फ़ उसी पन्ने के लिए मँगाया जाता है जिस पर कोई [data-demo] माउंट हो।

जो डेमो अपने canvas पर पॉइंटर-इनपुट लेता है, वह interactive भेजता है — तब मंच स्पर्श-इशारों पर दावा करता है और crosshair दिखाता है। यह वाला निष्क्रिय है (सिर्फ़ रेंडर), इसलिए झंडा नहीं भेजता और canvas पर उँगली फिराने से पन्ना ही स्क्रॉल होता है। यह पन्ने के अपने स्याही-टोकन से दो-स्रोत तरंग-व्यतिकरण खींचता है, इसलिए थीम के पीछे-पीछे चलता है:

डेमो · दो-स्रोत तरंग-व्यतिकरण

डेमो · दो-स्रोत तरंग-व्यतिकरण

दो बिंदु-स्रोत गोलाकार तरंगें छोड़ते हैं; जहाँ शिखर से शिखर मिलता है वहाँ स्याही जम जाती है, जहाँ शिखर से गर्त — वहाँ काग़ज़ झाँकता है। थीम पलटिए — डेमो जीवित टोकनों से खुद को नई स्याही में रँग लेता है।

मॉड्यूल-अनुबंध एक default export है — mount(ctx), जो सफ़ाई करने वाला फ़ंक्शन लौटाता है; waves/interference जैसी मॉड्यूल-id को लोडर जैसे चाहे हल करे (यहाँ import.meta.glob से)।

§3.2पन्ने का साज़ो-सामान

बाक़ी कंपोनेंट नोट को भरते नहीं, चौखट देते हैं:

• Hero नोट खोलता है: kicker, डिस्प्ले-शीर्षक, पूरी Markdown पाइपलाइन से गुज़रने वाला आमुख, एक मेटा-पंक्ति, और वैकल्पिक tocLabel जो साइडबार में बिना-क्रमांक की "भूमिका" पंक्ति जोड़ देता है। नोट के frontmatter का title छोटा प्रामाणिक नाम ही रहता है — <title> और कार्डों के लिए; हीरो का शीर्षक लंबा हो सकता है।
• PartHero हब का अध्याय खोलता है — इसी पन्ने का सिर। उसका kicker कभी हाथ से नहीं लिखा जाता: रूट अध्याय का "भाग III · …" लेबल props.partLabel बनाकर भेजता है।
• Part लंबे एक-पन्ना नोट को भागों में काटता है; क्रमांकन-प्रीसेट उसे साइडबार की "भाग II · …" जैसी समूह-पंक्तियाँ बना देता है। kitchen-sink इसी तरह कटा है।
• HubCard और .hub-grid हब के लैंडिंग-कार्ड हैं; .path उसका पढ़ने-का-रास्ता बक्सा — दोनों इस गैलरी के अवलोकन पर।
• LocalToc पन्ना-भीतर जंप-लिस्ट रेंडर करता है; दोनों क्रमांकन-प्रीसेटों के ToC-आकार स्वीकारता है, और तय-योग्य न्यूनतम से नीचे खुद छिप जाता है। नीचे जीवंत — इसी अध्याय के अपने ToC पर।
• SidebarMemory स्क्रॉल होने वाले साइडबार को पन्ना बदलने पर वहीं रखता है जहाँ पाठक छोड़ गया था, और मौजूदा प्रविष्टि (डिफ़ॉल्ट [aria-current="page"]) जब भी नज़र से बाहर होती, उसे बीच में ले आता है। साइडबार के स्क्रॉल-बॉक्स के भीतर, नेविगेशन-मार्कअप के बाद रखिए; यह पहले paint से पहले चलता है, इसलिए साइडबार कभी ऊपर से झिलमिलाकर शुरू नहीं होता। डेमो का अपना साइडबार इसे ढोता है।
• LineageSvg हाथ से बने SVG (कोई पद्धति-वंशावली, कोई वर्गीकरण-वृक्ष) को कार्ड की चौखट देता है — एक नीचे है।
• PageFooter नोट के पैर की महीन छपाई है — यहाँ हर नोट के नीचे की पंक्ति।
• ब्राउज़ के हिस्से विकी अध्याय में रहते हैं; गैलरी का Markdown-पक्ष kitchen-sink है।

§3.3LocalToc और LineageSvg, जीवंत

LocalToc को इसी पन्ने का बिल्ड-समय ToC थमाया गया — वही डेटा जो साइडबार बरतता है, नोट को props.toc के रूप में मिला हुआ:

और LineageSvg हाथ से लिखे आरेख के इर्द-गिर्द, जिसकी स्याही पूरी तरह semantic टोकनों की है — इसलिए वह दोनों थीमों पर बैठता है:

§3.4बिना कंपोनेंट का साज़ो-सामान

कुछ हिस्से base.css की सादी क्लासें हैं — उन साइटों के लिए जो उन्हें अपने लेआउट से रेंडर करती हैं या गद्य में HTML लिख देती हैं: