stellavault 0.2.0 → 0.3.0

package/packages/graph/src/components/NodeDetail.tsx

@@ -1,232 +0,0 @@
-// 사이드패널: 클릭된 노드의 문서 미리보기
-
-import { useEffect, useState, useRef, useMemo } from 'react';
-import Markdown from 'react-markdown';
-import { fetchDocument } from '../api/client.js';
-import { useGraphStore } from '../stores/graph-store.js';
-
-interface DocData {
-  id: string;
-  title: string;
-  filePath: string;
-  content: string;
-  tags: string[];
-  lastModified: string;
-  related: Array<{ id: string; title: string; score: number }>;
-}
-
-export function NodeDetail() {
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-  const selectNode = useGraphStore((s) => s.selectNode);
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const [doc, setDoc] = useState<DocData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const cacheRef = useRef<Map<string, DocData>>(new Map());
-
-  useEffect(() => {
-    if (!selectedNodeId) { setDoc(null); return; }
-
-    const cached = cacheRef.current.get(selectedNodeId);
-    if (cached) { setDoc(cached); return; }
-
-    let cancelled = false;
-    setLoading(true);
-    fetchDocument(selectedNodeId)
-      .then((data: any) => {
-        if (!cancelled) { setDoc(data); cacheRef.current.set(selectedNodeId, data); }
-      })
-      .catch(() => { if (!cancelled) setDoc(null); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
-  }, [selectedNodeId]);
-
-  if (!selectedNodeId) return null;
-
-  // Theme colors
-  const bg = isDark ? '#0d0d18' : '#fafafa';
-  const border = isDark ? 'rgba(100, 120, 255, 0.15)' : 'rgba(0, 0, 0, 0.08)';
-  const textPrimary = isDark ? '#e0e0f0' : '#1a1a2e';
-  const textSecondary = isDark ? '#556' : '#888';
-  const textBody = isDark ? '#b0b0c0' : '#444';
-  const tagBg = isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(80, 100, 200, 0.08)';
-  const tagColor = isDark ? '#88aaff' : '#4466aa';
-  const btnBg = isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(80, 100, 200, 0.06)';
-  const btnBorder = isDark ? 'rgba(100, 120, 255, 0.2)' : 'rgba(80, 100, 200, 0.15)';
-  const btnColor = isDark ? '#88aaff' : '#4466aa';
-
-  return (
-    <div style={{
-      width: '380px', background: bg,
-      borderLeft: `1px solid ${border}`,
-      display: 'flex', flexDirection: 'column', overflow: 'hidden',
-    }}>
-      <div style={{
-        padding: '10px 16px',
-        borderBottom: `1px solid ${border}`,
-        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-      }}>
-        <span style={{ fontSize: '11px', color: textSecondary, textTransform: 'uppercase', letterSpacing: '1px' }}>
-          Document Preview
-        </span>
-        <button
-          onClick={() => selectNode(null)}
-          style={{ background: 'none', border: 'none', color: textSecondary, cursor: 'pointer', fontSize: '14px', padding: '2px 6px' }}
-        >
-          x
-        </button>
-      </div>
-
-      {loading ? (
-        <div style={{ padding: '24px 16px', color: textSecondary }}>Loading...</div>
-      ) : doc ? (
-        <div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
-          <h2 style={{ fontSize: '16px', fontWeight: 600, color: textPrimary, marginBottom: '6px', lineHeight: 1.3 }}>
-            {doc.title}
-          </h2>
-          {doc.tags.length > 0 && (
-            <div style={{ display: 'flex', gap: '5px', flexWrap: 'wrap', marginBottom: '10px' }}>
-              {doc.tags.map((tag) => (
-                <span key={tag} style={{ fontSize: '10px', color: tagColor, background: tagBg, padding: '1px 7px', borderRadius: '4px' }}>
-                  #{tag}
-                </span>
-              ))}
-            </div>
-          )}
-          <div style={{ fontSize: '10px', color: textSecondary, marginBottom: '12px' }}>
-            {new Date(doc.lastModified).toLocaleDateString('ko-KR')}
-          </div>
-          <button
-            onClick={() => {
-              setTimeout(() => (window as any).__sv_pulse?.(doc.id), 100);
-            }}
-            style={{
-              width: '100%', padding: '7px', marginBottom: '8px',
-              background: btnBg, border: `1px solid ${btnBorder}`,
-              borderRadius: '5px', color: btnColor, fontSize: '11px', cursor: 'pointer',
-            }}
-          >
-            Explore connections
-          </button>
-          <button
-            onClick={async () => {
-              const relFile = (doc.filePath ?? doc.title).replace(/\\/g, '/').replace(/\.md$/, '');
-              let vault = 'Evan';
-              try {
-                const res = await fetch('http://127.0.0.1:3333/api/stats');
-                const stats = await res.json();
-                if (stats.vaultName) vault = stats.vaultName;
-              } catch { /* fallback */ }
-              const uri = `obsidian://open?vault=${encodeURIComponent(vault)}&file=${encodeURIComponent(relFile)}`;
-              window.location.href = uri;
-            }}
-            style={{
-              width: '100%', padding: '7px', marginBottom: '14px',
-              background: isDark ? 'rgba(140, 100, 255, 0.08)' : 'rgba(120, 80, 200, 0.05)',
-              border: `1px solid ${isDark ? 'rgba(140, 100, 255, 0.15)' : 'rgba(120, 80, 200, 0.12)'}`,
-              borderRadius: '5px', color: isDark ? '#a088ff' : '#6644aa', fontSize: '11px', cursor: 'pointer',
-            }}
-          >
-            Open in Obsidian
-          </button>
-          <ContentAccordion content={doc.content} isDark={isDark} />
-          {doc.related.length > 0 && (
-            <div style={{ marginTop: '20px', paddingTop: '12px', borderTop: `1px solid ${border}` }}>
-              <div style={{ fontSize: '10px', color: textSecondary, textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '6px' }}>
-                Related
-              </div>
-              {doc.related.map((r) => (
-                <div
-                  key={r.id}
-                  onClick={() => selectNode(r.id)}
-                  style={{ padding: '4px 0', fontSize: '11px', color: isDark ? '#778' : '#555', cursor: 'pointer' }}
-                >
-                  {r.title}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function ContentAccordion({ content, isDark }: { content: string; isDark: boolean }) {
-  const sections = useMemo(() => {
-    const parts: Array<{ heading: string; body: string }> = [];
-    const lines = content.split('\n');
-    let currentHeading = 'Overview';
-    let currentBody: string[] = [];
-
-    for (const line of lines) {
-      const match = line.match(/^#{1,3}\s+(.+)$/);
-      if (match) {
-        if (currentBody.length > 0) {
-          parts.push({ heading: currentHeading, body: currentBody.join('\n') });
-        }
-        currentHeading = match[1];
-        currentBody = [];
-      } else {
-        currentBody.push(line);
-      }
-    }
-    if (currentBody.length > 0) {
-      parts.push({ heading: currentHeading, body: currentBody.join('\n') });
-    }
-
-    return parts;
-  }, [content]);
-
-  const bodyColor = isDark ? '#b0b0c0' : '#444';
-
-  if (content.length < 500 || sections.length <= 1) {
-    return (
-      <div style={{ fontSize: '13px', lineHeight: 1.7, color: bodyColor }}>
-        <Markdown>{content}</Markdown>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {sections.map((sec, i) => (
-        <AccordionSection key={i} heading={sec.heading} body={sec.body} defaultOpen={i === 0} isDark={isDark} />
-      ))}
-    </div>
-  );
-}
-
-function AccordionSection({ heading, body, defaultOpen, isDark }: { heading: string; body: string; defaultOpen: boolean; isDark: boolean }) {
-  const [open, setOpen] = useState(defaultOpen);
-  const trimmed = body.trim();
-  if (!trimmed) return null;
-
-  return (
-    <div style={{ borderBottom: `1px solid ${isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.05)'}`, marginBottom: '4px' }}>
-      <button
-        onClick={() => setOpen(!open)}
-        style={{
-          width: '100%', textAlign: 'left', background: 'none', border: 'none',
-          padding: '8px 0', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
-        }}
-      >
-        <span style={{
-          fontSize: '10px', color: isDark ? '#556' : '#999', transition: 'transform 0.2s',
-          transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
-          display: 'inline-block',
-        }}>
-          ▶
-        </span>
-        <span style={{ fontSize: '12px', fontWeight: 600, color: isDark ? '#99a' : '#555' }}>
-          {heading}
-        </span>
-      </button>
-      {open && (
-        <div style={{ fontSize: '13px', lineHeight: 1.7, color: isDark ? '#b0b0c0' : '#444', paddingBottom: '8px' }}>
-          <Markdown>{trimmed}</Markdown>
-        </div>
-      )}
-    </div>
-  );
-}

package/packages/graph/src/components/PulseParticle.tsx

@@ -1,232 +0,0 @@
-// 빛 입자 + 궤적 — 작고 화려한 입자가 부드럽게 이동, 지나간 경로 표시
-
-import { useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
-import { useGraphStore } from '../stores/graph-store.js';
-import { pulseData } from '../hooks/usePulse.js';
-
-const TRAIL_LENGTH = 60; // 궤적 점 개수
-
-export function PulseAnimator() {
-  const coreRef = useRef<THREE.Points>(null);
-  const glowRef = useRef<THREE.Points>(null);
-  const trailRef = useRef<THREE.Line>(null);
-  const theme = useGraphStore((s) => s.theme);
-  const isLight = theme === 'light';
-
-  const stepRef = useRef(0);
-  const tRef = useRef(0);
-  const litRef = useRef<string[]>([]);
-  const flashRef = useRef(0);
-
-  // 궤적 위치 버퍼 (ring buffer)
-  const trailBuf = useRef(new Float32Array(TRAIL_LENGTH * 3));
-  const trailHead = useRef(0);
-  const trailCount = useRef(0);
-
-  // 원형 텍스처 (노드와 동일 스타일)
-  const texture = useRef<THREE.Texture | null>(null);
-  if (!texture.current) {
-    const sz = 64;
-    const cv = document.createElement('canvas');
-    cv.width = sz; cv.height = sz;
-    const ctx = cv.getContext('2d')!;
-    const g = ctx.createRadialGradient(sz/2, sz/2, 0, sz/2, sz/2, sz/2);
-    g.addColorStop(0, 'rgba(255,255,255,1)');
-    g.addColorStop(0.2, 'rgba(180,220,255,0.9)');
-    g.addColorStop(0.5, 'rgba(100,180,255,0.3)');
-    g.addColorStop(1, 'rgba(60,120,255,0)');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, sz, sz);
-    texture.current = new THREE.CanvasTexture(cv);
-  }
-
-  useFrame(() => {
-    const core = coreRef.current;
-    const glow = glowRef.current;
-    const trail = trailRef.current;
-    if (!core || !glow || !trail) return;
-
-    if (!pulseData.running || pulseData.visitOrder.length === 0) {
-      core.visible = false;
-      glow.visible = false;
-      trail.visible = false;
-      return;
-    }
-
-    core.visible = true;
-    glow.visible = true;
-    trail.visible = true;
-
-    const { visitOrder, positions } = pulseData;
-    const step = stepRef.current;
-
-    if (step >= visitOrder.length - 1) {
-      pulseData.running = false;
-      core.visible = false;
-      glow.visible = false;
-      // 탐색 완료 — 하이라이트 3초간 유지 후 해제
-      const finalLit = [...litRef.current];
-      setTimeout(() => {
-        // 아직 같은 하이라이트 상태이면 해제
-        const current = useGraphStore.getState().highlightedNodeIds;
-        if (finalLit.length > 0 && finalLit.every(id => current.has(id))) {
-          useGraphStore.getState().setHighlightedNodes([]);
-        }
-        useGraphStore.getState().setPulseParticlePos(null);
-        stepRef.current = 0;
-        tRef.current = 0;
-        litRef.current = [];
-        trailCount.current = 0;
-        if (trail) trail.visible = false;
-      }, 3000);
-      return;
-    }
-
-    const from = positions.get(visitOrder[step]) ?? [0, 0, 0];
-    const to = positions.get(visitOrder[step + 1]) ?? [0, 0, 0];
-
-    // 부드러운 이동
-    tRef.current += 0.03;
-    const t = tRef.current;
-    const ease = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-
-    const x = from[0] + (to[0] - from[0]) * ease;
-    const y = from[1] + (to[1] - from[1]) * ease;
-    const z = from[2] + (to[2] - from[2]) * ease;
-
-    // 코어 입자 위치
-    const corePos = core.geometry.getAttribute('position') as THREE.BufferAttribute;
-    corePos.setXYZ(0, x, y, z);
-    corePos.needsUpdate = true;
-
-    const glowPos = glow.geometry.getAttribute('position') as THREE.BufferAttribute;
-    glowPos.setXYZ(0, x, y, z);
-    glowPos.needsUpdate = true;
-
-    // 궤적 기록
-    const tb = trailBuf.current;
-    const hi = trailHead.current % TRAIL_LENGTH;
-    tb[hi * 3] = x;
-    tb[hi * 3 + 1] = y;
-    tb[hi * 3 + 2] = z;
-    trailHead.current++;
-    trailCount.current = Math.min(trailCount.current + 1, TRAIL_LENGTH);
-
-    // 궤적 라인 업데이트
-    const trailPos = trail.geometry.getAttribute('position') as THREE.BufferAttribute;
-    const count = trailCount.current;
-    for (let i = 0; i < TRAIL_LENGTH; i++) {
-      if (i < count) {
-        const idx = ((trailHead.current - count + i) % TRAIL_LENGTH + TRAIL_LENGTH) % TRAIL_LENGTH;
-        trailPos.setXYZ(i, tb[idx * 3], tb[idx * 3 + 1], tb[idx * 3 + 2]);
-      } else {
-        trailPos.setXYZ(i, x, y, z); // 아직 안 채워진 부분은 현재 위치
-      }
-    }
-    trailPos.needsUpdate = true;
-    trail.geometry.setDrawRange(0, count);
-
-    // 플래시 감쇠
-    flashRef.current *= 0.88;
-
-    // Light mode: 진한 색 + NormalBlending / Dark mode: 밝은 색 + AdditiveBlending
-    const currentIsLight = useGraphStore.getState().theme === 'light';
-
-    // 코어
-    const coreMat = core.material as THREE.PointsMaterial;
-    coreMat.size = (currentIsLight ? 12 : 8) + flashRef.current * 6;
-    coreMat.color.set(currentIsLight ? '#1144cc' : '#ffffff');
-    coreMat.blending = currentIsLight ? THREE.NormalBlending : THREE.AdditiveBlending;
-    coreMat.opacity = currentIsLight ? 1.0 : 0.95;
-
-    // 글로우
-    const glowMat = glow.material as THREE.PointsMaterial;
-    glowMat.size = (currentIsLight ? 28 : 20) + flashRef.current * 15;
-    glowMat.opacity = currentIsLight ? (0.3 + flashRef.current * 0.3) : (0.25 + flashRef.current * 0.2);
-    glowMat.color.set(currentIsLight ? '#2266dd' : '#66ddff');
-    glowMat.blending = currentIsLight ? THREE.NormalBlending : THREE.AdditiveBlending;
-
-    // 궤적
-    const trailMat = trail.material as THREE.LineBasicMaterial;
-    trailMat.color.set(currentIsLight ? '#2255bb' : '#44bbff');
-    trailMat.opacity = currentIsLight ? 0.5 : 0.25;
-    trailMat.blending = currentIsLight ? THREE.NormalBlending : THREE.AdditiveBlending;
-
-    // 노드 도착
-    if (t >= 1) {
-      tRef.current = 0;
-      stepRef.current++;
-
-      const arrivedId = visitOrder[Math.min(step + 1, visitOrder.length - 1)];
-      if (!litRef.current.includes(arrivedId)) {
-        litRef.current.push(arrivedId);
-        useGraphStore.getState().setHighlightedNodes([...litRef.current]);
-      }
-      flashRef.current = 1;
-
-      // 도착 노드 툴팁 표시 (0.8초 후 자동 해제)
-      useGraphStore.getState().hoverNode(arrivedId);
-      setTimeout(() => {
-        // 아직 같은 노드를 표시 중이면 해제
-        if (useGraphStore.getState().hoveredNodeId === arrivedId) {
-          useGraphStore.getState().hoverNode(null);
-        }
-      }, 800);
-    }
-  });
-
-  return (
-    <group>
-      {/* 궤적 라인 — 시안 글로우 */}
-      <primitive
-        ref={trailRef}
-        object={(() => {
-          const geo = new THREE.BufferGeometry();
-          geo.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(TRAIL_LENGTH * 3), 3));
-          const mat = new THREE.LineBasicMaterial({
-            color: '#44bbff', transparent: true, opacity: 0.25,
-            depthWrite: false, blending: THREE.AdditiveBlending,
-          });
-          return new THREE.Line(geo, mat);
-        })()}
-        visible={false}
-      />
-
-      {/* 글로우 (부드러운 빛 번짐) */}
-      <points ref={glowRef} visible={false}>
-        <bufferGeometry>
-          <bufferAttribute attach="attributes-position" args={[new Float32Array(3), 3]} />
-        </bufferGeometry>
-        <pointsMaterial
-          color="#66ddff"
-          size={20}
-          transparent
-          opacity={0.25}
-          depthWrite={false}
-          blending={THREE.AdditiveBlending}
-          sizeAttenuation
-          map={texture.current}
-        />
-      </points>
-
-      {/* 코어 (밝은 화이트 점) */}
-      <points ref={coreRef} visible={false}>
-        <bufferGeometry>
-          <bufferAttribute attach="attributes-position" args={[new Float32Array(3), 3]} />
-        </bufferGeometry>
-        <pointsMaterial
-          color="#ffffff"
-          size={8}
-          transparent
-          opacity={0.95}
-          depthWrite={false}
-          blending={THREE.AdditiveBlending}
-          sizeAttenuation
-          map={texture.current}
-        />
-      </points>
-    </group>
-  );
-}

package/packages/graph/src/components/SearchBar.tsx

@@ -1,107 +0,0 @@
-// 검색바 — 상단 헤더에 통합, 결과 수 표시, 검색 히스토리
-
-import { useRef, useState } from 'react';
-import { useSearch } from '../hooks/useSearch.js';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export function SearchBar() {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { search, clearSearch } = useSearch();
-  const query = useGraphStore((s) => s.searchQuery);
-  const highlightedCount = useGraphStore((s) => s.highlightedNodeIds.size);
-  const searchHistory = useGraphStore((s) => s.searchHistory);
-  const clearSearchHistory = useGraphStore((s) => s.clearSearchHistory);
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const [showHistory, setShowHistory] = useState(false);
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <div style={{
-        position: 'relative',
-        display: 'flex', alignItems: 'center',
-        background: isDark ? 'rgba(100, 120, 255, 0.06)' : 'rgba(0, 0, 0, 0.03)',
-        border: `1px solid ${isDark ? 'rgba(100, 120, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'}`,
-        borderRadius: '6px', padding: '0 10px',
-      }}>
-        <span style={{ fontSize: '12px', color: isDark ? '#556' : '#999', marginRight: '6px' }}>
-          {'\u{1F50D}'}
-        </span>
-        <input
-          ref={inputRef}
-          type="text"
-          placeholder="Search knowledge..."
-          value={query}
-          onChange={(e) => search(e.target.value)}
-          onFocus={() => setShowHistory(true)}
-          onBlur={() => setTimeout(() => setShowHistory(false), 200)}
-          onKeyDown={(e) => { if (e.key === 'Escape') { clearSearch(); setShowHistory(false); inputRef.current?.blur(); } }}
-          style={{
-            background: 'transparent', border: 'none', outline: 'none',
-            color: isDark ? '#c0c0f0' : '#2a2a4a',
-            fontSize: '12px', padding: '5px 0',
-            width: '160px',
-          }}
-        />
-        {query && (
-          <button
-            onClick={clearSearch}
-            style={{
-              background: 'none', border: 'none',
-              color: isDark ? '#556' : '#999',
-              cursor: 'pointer', fontSize: '12px', padding: '0 2px',
-            }}
-          >
-            x
-          </button>
-        )}
-
-        {/* 검색 히스토리 드롭다운 */}
-        {showHistory && !query && searchHistory.length > 0 && (
-          <div style={{
-            position: 'absolute', top: '100%', left: 0, marginTop: '4px',
-            background: isDark ? 'rgba(10,10,20,0.95)' : 'rgba(255,255,255,0.97)',
-            border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
-            borderRadius: '8px', padding: '4px', minWidth: '220px',
-            backdropFilter: 'blur(8px)', zIndex: 100,
-            boxShadow: isDark ? 'none' : '0 4px 16px rgba(0,0,0,0.08)',
-          }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 6px', marginBottom: '2px' }}>
-              <span style={{ fontSize: '9px', color: isDark ? '#556' : '#999', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
-                Recent
-              </span>
-              <button
-                onMouseDown={(e) => { e.preventDefault(); clearSearchHistory(); }}
-                style={{
-                  fontSize: '9px', color: isDark ? '#556' : '#999', background: 'none', border: 'none',
-                  cursor: 'pointer', textDecoration: 'underline',
-                }}
-              >
-                Clear
-              </button>
-            </div>
-            {searchHistory.slice(0, 10).map((q) => (
-              <div
-                key={q}
-                onMouseDown={(e) => { e.preventDefault(); search(q); setShowHistory(false); }}
-                style={{
-                  padding: '4px 8px', fontSize: '11px', cursor: 'pointer', borderRadius: '4px',
-                  color: isDark ? '#aab' : '#444',
-                }}
-                onMouseEnter={(e) => { (e.target as HTMLElement).style.background = isDark ? 'rgba(100,120,255,0.1)' : 'rgba(0,0,0,0.04)'; }}
-                onMouseLeave={(e) => { (e.target as HTMLElement).style.background = 'transparent'; }}
-              >
-                {q}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-      {query && highlightedCount > 0 && (
-        <span style={{ fontSize: '11px', color: isDark ? '#88aaff' : '#5577cc' }}>
-          {highlightedCount} found
-        </span>
-      )}
-    </div>
-  );
-}