knot 1.1.0

Codebase Graph + Vector RAG Indexer for Java, TypeScript, JavaScript, Kotlin, Rust, Python, Groovy, C/C++, Build Systems, and HTML/CSS codebases
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

/**
 * Phase 4 Test: Hybrid Web Ecosystem
 * This JavaScript file tests cross-language references (JS → HTML IDs, JS → CSS classes)
 */

// DOM element references - Phase 4 cross-language linking
const appContainer = document.getElementById('app-container');
const mainHeader = document.getElementById('main-header');
const contentArea = document.getElementById('content-area');
const toggleBtn = document.getElementById('toggle-btn');
const loadBtn = document.getElementById('load-btn');
const statusText = document.getElementById('status-text');
const dashboard = document.getElementById('dashboard');
const sidebar = document.getElementById('sidebar');
const navList = document.getElementById('nav-list');
const footer = document.getElementById('footer');

// Alternative selector using querySelector
const headerNav = document.querySelector('#main-header');
const contentSection = document.querySelector('main#content-area');

/**
 * Initialize the application
 */
function initializeApp() {
    // Add event listeners
    toggleBtn.addEventListener('click', handleToggleTheme);
    loadBtn.addEventListener('click', handleLoadData);
    
    // Update status
    statusText.textContent = 'Status: Initialized';
}

/**
 * Handle theme toggle
 * References CSS classes for styling
 */
function handleToggleTheme() {
    const isDark = appContainer.classList.contains('dark-theme');
    
    if (isDark) {
        appContainer.classList.remove('dark-theme');
        appContainer.classList.add('light-theme');
        toggleBtn.classList.remove('btn-dark');
        toggleBtn.classList.add('btn-primary');
    } else {
        appContainer.classList.add('dark-theme');
        appContainer.classList.remove('light-theme');
        toggleBtn.classList.add('btn-dark');
        toggleBtn.classList.remove('btn-primary');
    }
    
    // Update status message
    updateStatusMessage('Theme toggled');
}

/**
 * Handle data loading
 * References CSS classes and HTML elements
 */
function handleLoadData() {
    // Show loading state using CSS classes
    dashboard.classList.add('loading');
    loadBtn.classList.add('btn-disabled');
    statusText.textContent = 'Status: Loading...';
    
    // Simulate async operation
    setTimeout(() => {
        // Restore normal state
        dashboard.classList.remove('loading');
        loadBtn.classList.remove('btn-disabled');
        statusText.textContent = 'Status: Data loaded';
        
        // Populate content
        updateContentArea();
    }, 1000);
}

/**
 * Update content area with data
 */
function updateContentArea() {
    const contentItems = contentArea.querySelectorAll('.content-item');
    contentItems.forEach((item) => {
        item.classList.add('active');
    });
}

/**
 * Update the status message
 */
function updateStatusMessage(message) {
    const element = document.getElementById('status-text');
    if (element) {
        element.textContent = `Status: ${message}`;
        element.classList.add('status-updated');
    }
}

/**
 * Setup navigation
 * References HTML id and CSS classes
 */
function setupNavigation() {
    const navItems = document.getElementById('nav-list');
    if (navItems) {
        const links = navItems.querySelectorAll('a');
        links.forEach((link) => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const href = link.getAttribute('href');
                navigateToSection(href);
            });
            // Add active styling via CSS class
            link.classList.add('nav-link-active');
        });
    }
}

/**
 * Navigate to a section
 */
function navigateToSection(sectionId) {
    const section = document.querySelector(sectionId);
    if (section) {
        section.classList.add('visible');
        section.classList.remove('hidden');
    }
}

/**
 * Initialize when DOM is ready
 */
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeApp);
} else {
    initializeApp();
}

// Setup navigation after a short delay
setTimeout(setupNavigation, 500);