noteconnection 0.9.0

package/dist/frontend/styles.css

@@ -0,0 +1,577 @@
+/* NoteConnection Main Styles */
+
+body {
+    margin: 0;
+    overflow: hidden;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #1e1e1e; /* Dark theme */
+    color: #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#graph-wrapper {
+    flex: 1; /* Takes remaining space */
+    position: relative;
+    overflow: hidden;
+    min-height: 200px;
+}
+
+#graph-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#controls {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: rgba(45, 45, 45, 0.95);
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    z-index: 10;
+    border: 1px solid #444;
+    width: 240px;
+}
+
+/* Focus Mode Button */
+#focus-exit-btn {
+    position: absolute;
+    top: 20px;
+    left: 50%; /* Center */
+    transform: translateX(-50%);
+    background: rgba(45, 45, 45, 0.95);
+    padding: 10px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    z-index: 100; /* Higher than controls */
+    border: 1px solid #61dafb;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#focus-exit-btn button {
+    background: #2c5282;
+    color: white;
+    border: none;
+    padding: 5px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+#focus-exit-btn button:hover {
+    background: #3b6b9e;
+}
+
+h3 {
+    margin: 0 0 10px 0;
+    font-size: 1.2rem;
+    color: #61dafb;
+}
+
+.stats {
+    font-size: 0.85rem;
+    margin-bottom: 10px;
+    color: #aaa;
+}
+
+.filter-controls label {
+    display: block;
+    margin: 5px 0;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.search-box input {
+    width: 100%;
+    padding: 5px;
+    margin-top: 5px;
+    border-radius: 4px;
+    border: 1px solid #555;
+    background: #333;
+    color: white;
+    box-sizing: border-box;
+}
+
+/* D3 Elements */
+.node circle {
+    stroke: #fff;
+    stroke-width: 1.5px;
+    transition: all 0.3s ease;
+}
+
+.node text {
+    font-size: 10px;
+    fill: #ccc;
+    pointer-events: none;
+    text-shadow: 1px 1px 2px #000;
+}
+
+.link {
+    stroke: #555;
+    stroke-opacity: 0.6;
+    fill: none;
+}
+
+.link.highlight-in {
+    stroke: #ff6b6b;
+    stroke-opacity: 1;
+    stroke-width: 2px;
+}
+
+.link.highlight-out {
+    stroke: #4ecdc4;
+    stroke-opacity: 1;
+    stroke-width: 2px;
+}
+
+.node.highlight-main {
+    fill: #ffd700 !important;
+    stroke-width: 3px;
+    r: 8 !important;
+}
+
+/* Tooltip */
+div.tooltip {
+    position: absolute;
+    text-align: left;
+    padding: 8px;
+    font-size: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid #777;
+    border-radius: 4px;
+    pointer-events: none;
+    color: white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    z-index: 100;
+}
+
+/* --- Analysis Panel & Split Layout Styles --- */
+
+/* Resizer Handle */
+#analysis-resizer {
+    height: 6px;
+    background: #444;
+    cursor: row-resize;
+    display: none; /* Hidden by default */
+    z-index: 50;
+    border-top: 1px solid #555;
+    border-bottom: 1px solid #333;
+    transition: background 0.2s;
+    flex-shrink: 0;
+}
+
+#analysis-resizer:hover, #analysis-resizer.resizing {
+    background: #61dafb;
+}
+
+/* Bottom Analysis Panel */
+#analysis-panel {
+    display: none; /* Hidden by default */
+    height: 300px; /* Default height */
+    min-height: 150px;
+    background-color: #2d2d2d;
+    border-top: 1px solid #555;
+    color: #e0e0e0;
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0; /* Critical: Prevent being crushed */
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
+    z-index: 60;
+}
+
+#analysis-panel.open {
+    display: flex !important; /* Force flex when open */
+}
+
+/* Quick Distribution Sparkline */
+#quick-distribution {
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 1px solid #555;
+    height: 24px;
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 1px;
+    vertical-align: middle;
+    width: 100px;
+}
+
+/* Panel Internal Structure */
+.panel-header {
+    padding: 8px 15px;
+    background: #333;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.panel-header h2 {
+    margin: 0;
+    font-size: 1rem;
+    color: #61dafb;
+}
+
+.panel-body {
+    padding: 15px;
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Close Button in Panel */
+.close-panel {
+    color: #aaa;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-panel:hover {
+    color: white;
+}
+
+/* Controls inside Panel */
+#histogram-container {
+    width: 100%;
+    height: 180px;
+    background: #1e1e1e;
+    margin-bottom: 15px;
+    border: 1px solid #444;
+    flex-shrink: 0;
+}
+
+.export-controls {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    background: #333;
+    padding: 15px;
+    border-radius: 4px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.stats-preview {
+    align-self: center;
+    font-weight: bold;
+    color: #61dafb;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+}
+
+/* Node Table Styles */
+.sortable { cursor: pointer; user-select: none; }
+.sortable:hover { color: white; }
+.node-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 5px; padding: 4px 5px; border-bottom: 1px solid #333; font-size: 0.85rem; }
+/* Settings Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 2000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(2px);
+}
+
+.modal-content {
+    background: #2d2d2d;
+    width: 400px;
+    max-width: 90%;
+    border-radius: 8px;
+    border: 1px solid #555;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.modal-header {
+    padding: 15px;
+    background: #333;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h2 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #61dafb;
+}
+
+.modal-close {
+    cursor: pointer;
+    font-size: 1.2rem;
+    color: #aaa;
+    background: none;
+    border: none;
+}
+
+.modal-close:hover {
+    color: white;
+}
+
+.modal-body {
+    padding: 20px;
+    color: #e0e0e0;
+}
+
+.settings-group {
+    margin-bottom: 20px;
+}
+
+.settings-group h3 {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    color: #888;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #444;
+    padding-bottom: 5px;
+}
+
+.setting-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 0.9rem;
+}
+
+.setting-item label {
+    flex: 1;
+}
+
+.setting-item input[type="range"] {
+    flex: 2;
+    margin: 0 10px;
+}
+
+.setting-item .value-display {
+    width: 40px;
+    text-align: right;
+    font-family: monospace;
+    color: #61dafb;
+}
+
+.modal-footer {
+    padding: 15px;
+    background: #333;
+    border-top: 1px solid #444;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.btn {
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    border: none;
+    font-size: 0.9rem;
+}
+
+.btn-secondary {
+    background: #555;
+    color: white;
+}
+
+.btn-primary {
+    background: #2c5282;
+    color: white;
+}
+
+/* Reading Window */
+.reading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 1500;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(3px);
+}
+
+.reading-box {
+    background: #1e1e1e;
+    color: #e0e0e0;
+    border: 1px solid #555;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.reading-box.window-mode {
+    width: 70%;
+    height: 80%;
+    border-radius: 8px;
+}
+
+.reading-box.fullscreen-mode {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    border: none;
+}
+
+.reading-header {
+    padding: 10px 20px;
+    background: #2d2d2d;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#reading-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #61dafb;
+}
+
+.reading-controls {
+    display: flex;
+    gap: 10px;
+}
+
+.reader-btn {
+    background: #444;
+    border: 1px solid #555;
+    color: #e0e0e0;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 4px 8px;
+    font-size: 0.9rem;
+}
+
+.reader-btn:hover {
+    background: #555;
+}
+
+.reader-btn.close {
+    background: #742a2a;
+    border-color: #742a2a;
+}
+
+.reader-btn.close:hover {
+    background: #9b2c2c;
+}
+
+.reading-body {
+    padding: 30px;
+    overflow-y: auto;
+    font-family: 'Segoe UI', sans-serif;
+    line-height: 1.6;
+    flex: 1;
+}
+
+/* Content Styling */
+.reading-body h1, .reading-body h2, .reading-body h3 {
+    color: #61dafb;
+    border-bottom: 1px solid #333;
+    padding-bottom: 5px;
+}
+
+.reading-body code {
+    background: #333;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+}
+
+.reading-body pre {
+    background: #252525;
+    padding: 10px;
+    border-radius: 5px;
+    overflow-x: auto;
+    border: 1px solid #444;
+}
+
+.reading-body blockquote {
+    border-left: 4px solid #61dafb;
+    margin: 0;
+    padding-left: 10px;
+    color: #aaa;
+}
+
+/* Image Resizing & Locking */
+.reading-body img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #444;
+    margin: 10px 0;
+    display: block;
+}
+
+/* Unlocked State: Allow Image Resizing via CSS */
+.reading-body.unlocked img {
+    resize: both;
+    overflow: hidden; /* Required for resize to work */
+    cursor: nwse-resize;
+    max-width: none; /* Allow resizing beyond container if needed, or keep max-width */
+}
+
+/* Zoom support on body */
+.reading-body.unlocked {
+    /* User can zoom via buttons logic */
+}
+
+.reading-body.locked {
+    /* Locked state */
+}
+
+/* Mermaid background */
+.mermaid {
+    background: transparent;
+    border: 1px solid #444;
+    padding: 10px;
+    border-radius: 4px;
+    margin: 10px 0;
+    transition: border 0.3s;
+}
+
+/* Unlocked State: Allow Mermaid Resizing */
+.reading-body.unlocked .mermaid {
+    resize: both;
+    overflow: hidden; /* Required for resize to work */
+    border: 1px dashed #61dafb; /* Visual cue */
+    min-width: 200px;
+    min-height: 100px;
+    max-width: 100%; /* Can be overridden by user resize */
+}
+
+/* Ensure SVG fills the resized container */
+.mermaid svg {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: none !important;
+}

package/dist/frontend/styles_analysis.css

@@ -0,0 +1,145 @@
+/* Split Pane Layout Styles */
+
+/* Main Layout Setup */
+body {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+}
+
+#graph-wrapper {
+    flex: 1; /* Takes remaining space */
+    position: relative;
+    overflow: hidden;
+    min-height: 200px;
+}
+
+#graph-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* Resizer Handle */
+#analysis-resizer {
+    height: 6px;
+    background: #444;
+    cursor: row-resize;
+    display: none; /* Hidden by default */
+    z-index: 50;
+    border-top: 1px solid #555;
+    border-bottom: 1px solid #333;
+    transition: background 0.2s;
+}
+
+#analysis-resizer:hover, #analysis-resizer.resizing {
+    background: #61dafb;
+}
+
+/* Bottom Analysis Panel */
+#analysis-panel {
+    display: none; /* Hidden by default */
+    height: 300px; /* Default height */
+    min-height: 150px;
+    background-color: #2d2d2d;
+    border-top: 1px solid #555;
+    color: #e0e0e0;
+    display: none; /* Toggled via JS */
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0; /* Critical: Prevent being crushed by graph-wrapper */
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
+    z-index: 60;
+}
+
+#analysis-panel.open {
+    display: flex; /* Class-based toggle is safer */
+}
+
+/* Quick Distribution Sparkline */
+#quick-distribution {
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 1px solid #555;
+    height: 24px;
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 1px;
+    vertical-align: middle;
+    width: 100px;
+}
+
+/* Panel Internal Structure */
+.panel-header {
+    padding: 8px 15px;
+    background: #333;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.panel-header h2 {
+    margin: 0;
+    font-size: 1rem;
+    color: #61dafb;
+}
+
+.panel-body {
+    padding: 15px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+/* Close Button in Panel */
+.close-panel {
+    color: #aaa;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-panel:hover {
+    color: white;
+}
+
+/* Controls inside Panel */
+#histogram-container {
+    width: 100%;
+    height: 180px; /* Adapted for panel */
+    background: #1e1e1e;
+    margin-bottom: 15px;
+    border: 1px solid #444;
+}
+
+/* Export Controls Grid for Horizontal Layout */
+.export-controls {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    background: #333;
+    padding: 15px;
+    border-radius: 4px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.stats-preview {
+    align-self: center;
+    font-weight: bold;
+    color: #61dafb;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+}