add text notes

frontend/src/styles.css

@@ -1427,6 +1427,101 @@ html, body, #root {
   height: 8px !important;
 }
 
+/* ── Text Note node ────────────────────────────────────────────────── */
+.text-note-node {
+  width: 100%;
+  height: 100%;
+  border: 1px solid;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  cursor: grab;
+  box-sizing: border-box;
+}
+.text-note-node.selected {
+  outline: 2px solid var(--selection);
+  outline-offset: 1px;
+}
+.text-note-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 8px;
+  border-bottom: 1px solid rgba(255,255,255,0.07);
+  flex-shrink: 0;
+}
+.text-note-color-btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.1s;
+}
+.text-note-color-btn:hover { transform: scale(1.25); }
+.text-note-color-btn.active {
+  border-color: rgba(255,255,255,0.7);
+}
+.text-note-hint {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-faint);
+  user-select: none;
+  white-space: nowrap;
+}
+.text-note-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 12px;
+  cursor: text;
+  font-size: 13px;
+  line-height: 1.55;
+  color: inherit;
+  min-height: 0;
+}
+.text-note-content h1 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: inherit; }
+.text-note-content h2 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; color: inherit; }
+.text-note-content h3 { font-size: 13px; font-weight: 600; margin: 6px 0 3px; color: inherit; }
+.text-note-content p  { margin: 0 0 5px; }
+.text-note-content ul,
+.text-note-content ol { margin: 0 0 5px; padding-left: 18px; }
+.text-note-content li { margin-bottom: 2px; }
+.text-note-content code {
+  font-family: monospace;
+  font-size: 11px;
+  background: rgba(0,0,0,0.3);
+  border-radius: 3px;
+  padding: 1px 4px;
+}
+.text-note-content strong { font-weight: 600; }
+.text-note-content em { font-style: italic; opacity: 0.85; }
+.text-note-content hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 8px 0; }
+.text-note-content blockquote {
+  border-left: 3px solid rgba(255,255,255,0.2);
+  margin: 4px 0;
+  padding-left: 10px;
+  opacity: 0.8;
+}
+.text-note-placeholder { color: var(--text-faint); font-style: italic; }
+.text-note-textarea {
+  flex: 1;
+  background: rgba(0,0,0,0.25);
+  border: none;
+  outline: none;
+  color: inherit;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 10px 12px;
+  resize: none;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /* ── Context menu ──────────────────────────────────────────────────── */
 .context-menu {
   position: fixed;