npm - noteconnection - Versions diffs - 0.9.0 - Mend

noteconnection 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/LICENSE +21 -0
package/README.md +198 -0
package/dist/backend/CommunityDetection.js +58 -0
package/dist/backend/FileLoader.js +110 -0
package/dist/backend/GraphBuilder.js +347 -0
package/dist/backend/GraphMetrics.js +70 -0
package/dist/backend/algorithms/CycleDetection.js +63 -0
package/dist/backend/algorithms/HybridEngine.js +70 -0
package/dist/backend/algorithms/StatisticalAnalyzer.js +123 -0
package/dist/backend/algorithms/TopologicalSort.js +69 -0
package/dist/backend/algorithms/VectorSpace.js +87 -0
package/dist/backend/build_dag.js +164 -0
package/dist/backend/config.js +17 -0
package/dist/backend/graph.js +108 -0
package/dist/backend/main.js +67 -0
package/dist/backend/parser.js +94 -0
package/dist/backend/test_robustness/test_hybrid.js +60 -0
package/dist/backend/test_robustness/test_statistics.js +58 -0
package/dist/backend/test_robustness/test_vector.js +54 -0
package/dist/backend/test_robustness.js +113 -0
package/dist/backend/types.js +3 -0
package/dist/backend/utils/frontmatterParser.js +121 -0
package/dist/backend/utils/stringUtils.js +66 -0
package/dist/backend/workers/keywordMatchWorker.js +22 -0
package/dist/core/Graph.js +121 -0
package/dist/core/Graph.test.js +37 -0
package/dist/core/types.js +2 -0
package/dist/frontend/analysis.js +356 -0
package/dist/frontend/app.js +1447 -0
package/dist/frontend/data.js +8356 -0
package/dist/frontend/graph_data.json +8356 -0
package/dist/frontend/index.html +279 -0
package/dist/frontend/reader.js +177 -0
package/dist/frontend/settings.js +84 -0
package/dist/frontend/source_manager.js +61 -0
package/dist/frontend/styles.css +577 -0
package/dist/frontend/styles_analysis.css +145 -0
package/dist/index.js +121 -0
package/dist/server.js +149 -0
package/package.json +39 -0

package/dist/frontend/index.html ADDED Viewed

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NoteConnection Knowledge Graph</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <!-- Reading Mode Dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script src="data.js"></script> <!-- Defines const graphData -->
+</head>
+<body>
+    <!-- Top Graph Area -->
+    <div id="graph-wrapper">
+        <button id="exit-focus-btn" style="display: none;">Exit Focus Mode</button>
+        <div id="source-control" style="position: absolute; top: 10px; left: 20px; z-index: 1000; display: flex; gap: 5px;">
+            <select id="folder-select" style="background: #333; color: white; border: 1px solid #555; padding: 2px;">
+                <option value="" disabled selected>Select Knowledge Base...</option>
+                <option value="ALL_FOLDERS">All Folders</option>
+            </select>
+            <button id="btn-load-source" style="background: #2c5282; color: white; border: 1px solid #555; padding: 2px 8px; cursor: pointer;">Load</button>
+        </div>
+        <div style="position: absolute; top: 10px; right: 20px; z-index: 1000;">
+            <select id="lang-select" style="background: #333; color: white; border: 1px solid #555; padding: 2px;">
+                <option value="en">English</option>
+                <option value="zh">中文</option>
+            </select>
+        </div>
+        <div id="controls">
+            <h3>NoteConnection</h3>
+                                <div class="stats" style="display: flex; align-items: center;">
+                                    <span><span data-i18n="nodes">Nodes:</span> <span id="node-count">0</span> | <span data-i18n="edges">Edges:</span> <span id="edge-count">0</span></span>
+                                    <div id="quick-distribution" title="Degree Distribution"></div>
+                                </div>            <div class="filter-controls">
+                <label><input type="radio" name="mode" value="all" checked> <span data-i18n="show_all">Show All</span></label>
+                <label><input type="radio" name="mode" value="in"> <span data-i18n="show_in">Incoming Only</span></label>
+                <label><input type="radio" name="mode" value="out"> <span data-i18n="show_out">Outgoing Only</span></label>
+            </div>
+            <div class="view-mode-controls" style="margin-top: 10px; border-top: 1px solid #555; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="view_mode">View Mode:</span>
+                <label style="font-size: 0.9rem; margin-right: 10px;"><input type="radio" name="viewMode" value="nodes" checked> <span data-i18n="view_nodes">Nodes</span></label>
+                <label style="font-size: 0.9rem;"><input type="radio" name="viewMode" value="clusters"> <span data-i18n="view_clusters">Clusters</span></label>
+            </div>
+            <div class="degree-controls" style="margin-top: 10px; border-top: 1px solid #555; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="degree_basis">Degree Basis:</span>
+                <label style="font-size: 0.9rem; margin-right: 5px;"><input type="radio" name="degreeMode" value="all" checked> <span data-i18n="all">All</span></label>
+                <label style="font-size: 0.9rem; margin-right: 5px;"><input type="radio" name="degreeMode" value="in"> <span data-i18n="in">In</span></label>
+                <label style="font-size: 0.9rem;"><input type="radio" name="degreeMode" value="out"> <span data-i18n="out">Out</span></label>
+            </div>
+            <div class="color-controls" style="margin-top: 5px; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="color_by">Color By:</span>
+                <label style="font-size: 0.9rem; display: inline-block; margin-right: 10px;"><input type="radio" name="colorMode" value="degree" checked> <span data-i18n="degree">Degree</span></label>
+                <label style="font-size: 0.9rem; display: inline-block;"><input type="radio" name="colorMode" value="cluster"> <span data-i18n="cluster">Cluster</span></label>
+            </div>
+            <div class="size-controls" style="margin-top: 5px; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="size_by">Size By:</span>
+                <label style="font-size: 0.9rem; display: inline-block; margin-right: 10px;"><input type="radio" name="sizeMode" value="uniform"> <span data-i18n="uniform">Uniform</span></label>
+                <label style="font-size: 0.9rem; display: inline-block; margin-right: 10px;"><input type="radio" name="sizeMode" value="degree" checked> <span data-i18n="degree">Degree</span></label>
+                <label style="font-size: 0.9rem; display: inline-block;"><input type="radio" name="sizeMode" value="centrality"> <span data-i18n="centrality">Centrality</span></label>
+            </div>
+            <div class="opacity-controls" style="margin-top: 5px; padding-top: 5px;">
+                <label style="font-size: 0.85rem; color: #aaa; display: block;"><span data-i18n="label_opacity">Label Opacity:</span> <span id="label-opacity-val">100%</span></label>
+                <input type="range" id="label-opacity-slider" min="0" max="100" value="100" style="width: 100%;">
+            </div>
+            <div class="search-box">
+                 <input type="text" id="search-input" placeholder="Search node..." data-i18n-placeholder="search_placeholder">
+            </div>
+            <div class="renderer-controls" style="margin-top: 10px; border-top: 1px solid #555; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="renderer">Renderer:</span>
+                <label style="font-size: 0.9rem; margin-right: 10px;"><input type="radio" name="rendererMode" value="svg" checked> SVG</label>
+                <label style="font-size: 0.9rem;"><input type="radio" name="rendererMode" value="canvas"> Canvas</label>
+            </div>
+            <div class="layout-controls" style="margin-top: 10px; border-top: 1px solid #555; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="layout">Layout:</span>
+                <label style="font-size: 0.9rem; margin-right: 10px;"><input type="radio" name="layoutMode" value="force" checked> <span data-i18n="layout_force">Force</span></label>
+                <label style="font-size: 0.9rem;"><input type="radio" name="layoutMode" value="dag"> <span data-i18n="layout_dag">DAG (Hierarchical)</span></label>
+            </div>
+            <div class="simulation-controls" style="margin-top: 10px; border-top: 1px solid #555; padding-top: 5px;">
+                <span style="font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 3px;" data-i18n="simulation">Simulation:</span>
+                <label style="display: flex; align-items: center; margin-bottom: 5px;">
+                    <input type="checkbox" id="freeze-layout">
+                    <span style="margin-left: 5px; font-size: 0.9rem;" data-i18n="freeze_layout">Freeze Layout</span>
+                </label>
+                <label style="font-size: 0.8rem; color: #aaa; display: block;"><span data-i18n="speed">Speed (Damping):</span> <span id="sim-speed-val">0.4</span></label>
+                <input type="range" id="sim-speed-slider" min="0" max="1" step="0.01" value="0.4" style="width: 100%;">
+            </div>
+            <div class="advanced-controls" style="margin-top: 15px; border-top: 1px solid #555; padding-top: 10px;">
+                <label style="font-size: 0.9rem; color: #aaa;"><span data-i18n="min_degree">Min Degree:</span> <span id="min-degree-val">0</span></label>
+                <input type="range" id="min-degree-slider" min="0" max="20" value="0" style="width: 100%;">
+                <label style="display: flex; align-items: center; margin-top: 5px;">
+                    <input type="checkbox" id="show-orphans">
+                    <span style="margin-left: 5px;" data-i18n="show_orphans">Show Orphans</span>
+                </label>
+                <button id="export-btn" style="margin-top: 10px; width: 100%; padding: 5px; cursor: pointer; background: #333; color: white; border: 1px solid #555; border-radius: 4px;" data-i18n="export_image">Export Image</button>
+                <button id="save-layout-btn" style="margin-top: 5px; width: 100%; padding: 5px; cursor: pointer; background: #333; color: white; border: 1px solid #555; border-radius: 4px;" data-i18n="save_layout">Save Layout (JSON)</button>
+                <button id="analysis-btn" style="margin-top: 5px; width: 100%; padding: 5px; cursor: pointer; background: #2c5282; color: white; border: 1px solid #555; border-radius: 4px;" data-i18n="analysis_export">Analysis & Export</button>
+            </div>
+        </div>
+        <!-- Focus Mode Exit Button -->
+        <div id="focus-exit-btn" style="display: none; align-items: center; gap: 15px;">
+            <span id="focus-node-name" style="color: #61dafb; font-weight: bold;"></span>
+            <div style="display: flex; align-items: center; gap: 5px;">
+                <label for="focus-spacing-slider" style="color: #aaa; font-size: 0.8rem;">V-Space:</label>
+                <input type="range" id="focus-spacing-slider" min="50" max="500" value="250" style="width: 80px;" title="Vertical Spacing">
+            </div>
+            <div style="display: flex; align-items: center; gap: 5px;">
+                <label for="focus-h-spacing-slider" style="color: #aaa; font-size: 0.8rem;">H-Space:</label>
+                <input type="range" id="focus-h-spacing-slider" min="20" max="300" value="80" style="width: 80px;" title="Horizontal Spacing">
+            </div>
+            <button id="btn-arrange-focus" data-i18n="auto_arrange" style="margin-right: 5px;">Auto-Arrange</button>
+            <button id="btn-exit-focus" data-i18n="exit_focus">Exit Focus Mode</button>
+        </div>
+        <div id="graph-container">
+            <canvas id="graph-canvas" style="display: none; width: 100%; height: 100%;"></canvas>
+        </div>
+    </div>
+    <!-- Resizer Handle -->
+    <div id="analysis-resizer"></div>
+    <!-- Bottom Analysis Panel -->
+    <div id="analysis-panel">
+        <div class="panel-header">
+            <h2 data-i18n="analysis_title">Degree Analysis</h2>
+            <span class="close-panel">&times;</span>
+        </div>
+        <div class="panel-body">
+            <div id="histogram-container"></div>
+            <div class="export-controls">
+                <div class="control-group">
+                    <label data-i18n="filter_strategy">Filter Strategy:</label>
+                    <select id="export-strategy" style="width: 100%; margin-top: 5px;">
+                        <option value="top-percent" data-i18n="strat_top">Top X% (by Degree)</option>
+                        <option value="min-degree" data-i18n="strat_min">Min Degree > X</option>
+                    </select>
+                </div>
+                <div class="control-group">
+                    <label data-i18n="cluster_filter">Cluster Filter:</label>
+                    <select id="cluster-filter" style="width: 100%; margin-top: 5px;">
+                        <option value="all" data-i18n="cluster_all">All Clusters</option>
+                        <!-- Clusters injected here -->
+                    </select>
+                </div>
+                <div class="control-group">
+                    <label><span data-i18n="threshold">Threshold:</span> <span id="export-threshold-val">5</span></label>
+                    <input type="range" id="export-threshold-slider" min="1" max="100" value="5" style="width: 100%;">
+                </div>
+                <div class="stats-preview">
+                    <span data-i18n="selected">Selected:</span> <span id="selected-count">0</span>
+                </div>
+                <div class="action-buttons">
+                    <button id="export-json-btn" style="flex: 1;" data-i18n="export_json">JSON</button>
+                    <button id="export-zip-btn" style="flex: 1;" data-i18n="export_zip">ZIP (MD)</button>
+                </div>
+            </div>
+            <!-- Node List Table -->
+            <div id="node-list-wrapper" style="margin-top: 15px; flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+                <h3 style="margin: 0 0 5px 0; font-size: 0.9rem; color: #aaa;" data-i18n="filtered_nodes">Filtered Nodes</h3>
+                <div class="table-header" style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 5px; padding: 5px; background: #222; font-weight: bold; font-size: 0.85rem;">
+                    <div class="sortable" data-sort="name"><span data-i18n="th_name">Name</span> <span></span></div>
+                    <div class="sortable" data-sort="cluster"><span data-i18n="th_cluster">Cluster</span> <span></span></div>
+                    <div class="sortable" data-sort="in"><span data-i18n="th_in">In</span> <span></span></div>
+                    <div class="sortable" data-sort="out"><span data-i18n="th_out">Out</span> <span></span></div>
+                    <div class="sortable" data-sort="total"><span data-i18n="th_total">Total</span> <span></span></div>
+                </div>
+                <div id="node-table-body" style="overflow-y: auto; flex: 1; border: 1px solid #444;">
+                    <!-- Rows injected here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Reading Window -->
+    <div id="reading-window" class="reading-overlay" style="display: none;">
+        <div id="reading-content-box" class="reading-box window-mode">
+            <div class="reading-header">
+                <span id="reading-title">Title</span>
+                <div class="reading-controls">
+                    <button id="btn-reader-lock" class="reader-btn" title="Lock/Unlock Sizing">🔒</button>
+                    <button id="btn-reader-zoom-out" class="reader-btn">A-</button>
+                    <button id="btn-reader-zoom-in" class="reader-btn">A+</button>
+                    <button id="btn-reader-close" class="reader-btn close">&times;</button>
+                </div>
+            </div>
+            <div id="reading-body" class="reading-body locked">
+                <!-- Content injected here -->
+            </div>
+        </div>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="modal-overlay" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 data-i18n="settings_title">Settings</h2>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="settings-group">
+                    <h3 data-i18n="grp_physics">Physics</h3>
+                    <div class="setting-item">
+                        <label data-i18n="lbl_repulsion">Repulsion Strength</label>
+                        <input type="range" id="set-charge" min="-1000" max="-50" step="50">
+                        <span class="value-display" id="val-charge"></span>
+                    </div>
+                    <div class="setting-item">
+                        <label data-i18n="lbl_distance">Link Distance</label>
+                        <input type="range" id="set-distance" min="20" max="300" step="10">
+                        <span class="value-display" id="val-distance"></span>
+                    </div>
+                    <div class="setting-item">
+                        <label data-i18n="lbl_collision">Collision Radius</label>
+                        <input type="range" id="set-collision" min="5" max="50" step="5">
+                        <span class="value-display" id="val-collision"></span>
+                    </div>
+                </div>
+                <div class="settings-group">
+                    <h3 data-i18n="grp_visuals">Visuals</h3>
+                    <div class="setting-item">
+                        <label data-i18n="lbl_opacity">Edge Opacity</label>
+                        <input type="range" id="set-opacity" min="0.1" max="1.0" step="0.1">
+                        <span class="value-display" id="val-opacity"></span>
+                    </div>
+                </div>
+                <div class="settings-group">
+                    <h3 data-i18n="grp_reading">Reading</h3>
+                    <div class="setting-item">
+                        <label data-i18n="lbl_reading_mode">Open Mode</label>
+                        <select id="set-reading-mode" style="background: #444; color: white; border: 1px solid #555; padding: 2px;">
+                            <option value="window" data-i18n="opt_window">Window</option>
+                            <option value="fullscreen" data-i18n="opt_fullscreen">Full Screen</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="btn-reset-settings" data-i18n="btn_reset">Reset</button>
+                <button class="btn btn-primary modal-close" data-i18n="btn_done">Done</button>
+            </div>
+        </div>
+    </div>
+    <!-- Settings Toggle Button (Absolute Position top right) -->
+    <button id="btn-open-settings" style="position: absolute; top: 10px; right: 110px; z-index: 1000; background: #333; color: white; border: 1px solid #555; padding: 3px 8px; cursor: pointer;">
+        ⚙️ <span data-i18n="btn_settings">Settings</span>
+    </button>
+    <script src="settings.js"></script>
+    <script src="reader.js"></script>
+    <script src="app.js"></script>
+    <script src="analysis.js"></script>
+    <script src="source_manager.js"></script>
+</body>
+</html>

package/dist/frontend/reader.js ADDED Viewed

@@ -0,0 +1,177 @@
+/**
+ * Reader Module
+ * Handles rendering of Markdown, Math, Mermaid, and window management.
+ */
+class Reader {
+    constructor() {
+        this.window = document.getElementById('reading-window');
+        this.contentBox = document.getElementById('reading-content-box');
+        this.body = document.getElementById('reading-body');
+        this.title = document.getElementById('reading-title');
+        this.isLocked = true;
+        this.currentZoom = 1.0;
+        this.init();
+    }
+    init() {
+        // Close Button
+        document.getElementById('btn-reader-close').addEventListener('click', () => {
+            this.close();
+        });
+        // Close on overlay click
+        this.window.addEventListener('click', (e) => {
+            if (e.target === this.window) this.close();
+        });
+        // Lock Toggle
+        document.getElementById('btn-reader-lock').addEventListener('click', () => {
+            this.toggleLock();
+        });
+        // Zoom Controls
+        document.getElementById('btn-reader-zoom-in').addEventListener('click', () => this.zoom(0.1));
+        document.getElementById('btn-reader-zoom-out').addEventListener('click', () => this.zoom(-0.1));
+        // Initialize Mermaid
+        if (window.mermaid) {
+            mermaid.initialize({ startOnLoad: false, theme: 'dark' });
+        }
+    }
+    open(node) {
+        // 1. Set Title
+        this.title.innerText = node.label;
+        // 2. Prepare Content
+        let rawContent = node.content || "*No content available.*";
+        let htmlContent = marked.parse(rawContent);
+        this.body.innerHTML = htmlContent;
+        // 3. Show Window EARLY (Crucial for Mermaid layout calculation)
+        const settings = window.settingsManager.get('reading', 'mode');
+        this.contentBox.className = `reading-box ${settings === 'fullscreen' ? 'fullscreen-mode' : 'window-mode'}`;
+        this.window.style.display = 'flex';
+        // 4. Render Latex (KaTeX)
+        if (window.renderMathInElement) {
+            renderMathInElement(this.body, {
+                delimiters: [
+                    {left: '$$', right: '$$', display: true},
+                    {left: '$', right: '$', display: false}
+                ]
+            });
+        }
+        // 5. Render Mermaid
+        if (window.mermaid) {
+            // Re-configure for robustness & High Contrast
+            mermaid.initialize({
+                startOnLoad: false,
+                theme: 'dark', // Switch to 'dark' base for better defaults
+                themeVariables: {
+                    darkMode: true,
+                    background: '#1e1e1e', // Match app bg
+                    mainBkg: '#1e1e1e',    // Container bg
+                    // Node Colors (High Contrast)
+                    primaryColor: '#2d2d2d',
+                    primaryTextColor: '#ffffff',
+                    primaryBorderColor: '#61dafb',
+                    // Edges & Arrows
+                    lineColor: '#a0a0a0',
+                    secondaryColor: '#333',
+                    tertiaryColor: '#2d2d2d',
+                    // Text
+                    textColor: '#ffffff',
+                    fontSize: '16px' // Bump base size
+                },
+                securityLevel: 'loose', // Allow HTML in nodes
+                htmlLabels: true
+            });
+            const mermaidBlocks = this.body.querySelectorAll('pre code.language-mermaid');
+            mermaidBlocks.forEach((block, index) => {
+                // Robust Decoding: Handle HTML entities (e.g., &gt; -> >)
+                const txt = document.createElement("textarea");
+                txt.innerHTML = block.innerHTML;
+                const graphDefinition = txt.value;
+                const parentPre = block.parentElement;
+                // Create container
+                const div = document.createElement('div');
+                div.className = 'mermaid';
+                div.id = `mermaid-${index}`;
+                div.textContent = graphDefinition; // Use textContent to set raw text
+                parentPre.parentNode.replaceChild(div, parentPre);
+            });
+            if (mermaidBlocks.length > 0) {
+                // Slight delay to ensure DOM is reflowed after show
+                setTimeout(() => {
+                    mermaid.run().catch(err => {
+                        console.error("Mermaid error:", err);
+                        // Fallback: Show error in UI
+                        // Mermaid usually handles this, but we can log it.
+                    });
+                }, 10);
+            }
+        }
+        // 6. Reset State
+        this.isLocked = true;
+        this.currentZoom = 1.0;
+        this.updateLockState();
+        this.updateZoom();
+    }
+    close() {
+        this.window.style.display = 'none';
+    }
+    toggleLock() {
+        this.isLocked = !this.isLocked;
+        this.updateLockState();
+    }
+    updateLockState() {
+        const btn = document.getElementById('btn-reader-lock');
+        const zoomBtns = document.querySelectorAll('#btn-reader-zoom-in, #btn-reader-zoom-out');
+        if (this.isLocked) {
+            this.body.classList.add('locked');
+            this.body.classList.remove('unlocked');
+            btn.innerText = "🔒";
+            btn.title = "Locked: Sizing fixed";
+            zoomBtns.forEach(b => b.disabled = true);
+        } else {
+            this.body.classList.add('unlocked');
+            this.body.classList.remove('locked');
+            btn.innerText = "🔓";
+            btn.title = "Unlocked: Adjust size enabled";
+            zoomBtns.forEach(b => b.disabled = false);
+        }
+    }
+    zoom(delta) {
+        if (this.isLocked) return;
+        this.currentZoom = Math.max(0.5, Math.min(3.0, this.currentZoom + delta));
+        this.updateZoom();
+    }
+    updateZoom() {
+        this.body.style.fontSize = `${this.currentZoom}rem`;
+        // Scale images if needed, but CSS 'resize' handles explicit image resizing in unlocked mode.
+        // Font size scaling handles text content scaling.
+    }
+}
+const reader = new Reader();
+window.reader = reader;

package/dist/frontend/settings.js ADDED Viewed

@@ -0,0 +1,84 @@
+/**
+ * Settings Manager Module
+ * Handles configuration persistence, defaults, and application.
+ */
+const defaultSettings = {
+    physics: {
+        chargeStrength: -300,
+        linkDistance: 100,
+        collisionRadius: 20
+    },
+    visuals: {
+        edgeOpacity: 0.6,
+        baseNodeSize: 5
+    },
+    reading: {
+        mode: 'window' // 'window' or 'fullscreen'
+    }
+};
+class SettingsManager {
+    constructor() {
+        this.settings = this.load();
+        this.listeners = [];
+    }
+    load() {
+        const saved = localStorage.getItem('nc_settings');
+        if (saved) {
+            try {
+                // Merge saved settings with defaults to ensure new keys exist
+                const parsed = JSON.parse(saved);
+                return this.deepMerge(defaultSettings, parsed);
+            } catch (e) {
+                console.error("Failed to parse settings", e);
+                return JSON.parse(JSON.stringify(defaultSettings));
+            }
+        }
+        return JSON.parse(JSON.stringify(defaultSettings));
+    }
+    save() {
+        localStorage.setItem('nc_settings', JSON.stringify(this.settings));
+        this.notify();
+    }
+    get(category, key) {
+        return this.settings[category][key];
+    }
+    set(category, key, value) {
+        if (!this.settings[category]) this.settings[category] = {};
+        this.settings[category][key] = value;
+        this.save();
+    }
+    // Helper for deep merging defaults
+    deepMerge(target, source) {
+        for (const key of Object.keys(source)) {
+            if (source[key] instanceof Object && key in target) {
+                Object.assign(source[key], this.deepMerge(target[key], source[key]));
+            }
+        }
+        Object.assign(target || {}, source);
+        return target;
+    }
+    // Observer pattern for live updates
+    subscribe(callback) {
+        this.listeners.push(callback);
+    }
+    notify() {
+        this.listeners.forEach(cb => cb(this.settings));
+    }
+    reset() {
+        this.settings = JSON.parse(JSON.stringify(defaultSettings));
+        this.save();
+    }
+}
+const settingsManager = new SettingsManager();
+window.settingsManager = settingsManager; // Expose globally

package/dist/frontend/source_manager.js ADDED Viewed

@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const folderSelect = document.getElementById('folder-select');
+    const loadBtn = document.getElementById('btn-load-source');
+    if (!folderSelect || !loadBtn) return;
+    // Fetch folders
+    fetch('/api/folders')
+        .then(response => response.json())
+        .then(data => {
+            if (data.folders) {
+                data.folders.forEach(folder => {
+                    const option = document.createElement('option');
+                    option.value = folder;
+                    option.textContent = folder;
+                    folderSelect.appendChild(option);
+                });
+            }
+        })
+        .catch(err => {
+            console.warn('Backend API not available (likely running static).', err);
+            // Optional: Hide controls if API fails
+            const container = document.getElementById('source-control');
+            if (container) container.style.display = 'none';
+        });
+    // Handle Load
+    loadBtn.addEventListener('click', () => {
+        const target = folderSelect.value;
+        if (!target) {
+            alert('Please select a folder first.');
+            return;
+        }
+        loadBtn.disabled = true;
+        loadBtn.textContent = '...';
+        fetch('/api/build', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ target: target })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                // Reload graph data logic.
+                // Reload page to refresh data.js
+                window.location.reload();
+            } else {
+                alert('Build Failed: ' + data.error);
+            }
+        })
+        .catch(err => {
+            alert('Error: ' + err);
+        })
+        .finally(() => {
+            loadBtn.disabled = false;
+            loadBtn.textContent = 'Load';
+        });
+    });
+});