stellavault 0.1.0

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

@@ -0,0 +1,197 @@
+// 우주 배경: 다층 별 + 성운 효과 + 은하수
+
+import { useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { useGraphStore } from '../stores/graph-store.js';
+
+// 원형 별 텍스처
+function createStarTexture(): THREE.Texture {
+  const size = 64;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d')!;
+  const gradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+  gradient.addColorStop(0, 'rgba(255,255,255,1)');
+  gradient.addColorStop(0.15, 'rgba(255,255,255,0.8)');
+  gradient.addColorStop(0.4, 'rgba(200,220,255,0.2)');
+  gradient.addColorStop(1, 'rgba(200,220,255,0)');
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, size, size);
+  const tex = new THREE.CanvasTexture(canvas);
+  tex.needsUpdate = true;
+  return tex;
+}
+
+// 성운 텍스처 (부드러운 구름)
+function createNebulaTexture(r: number, g: number, b: number): THREE.Texture {
+  const size = 128;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d')!;
+  const gradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+  gradient.addColorStop(0, `rgba(${r},${g},${b},0.7)`);
+  gradient.addColorStop(0.3, `rgba(${r},${g},${b},0.35)`);
+  gradient.addColorStop(0.6, `rgba(${r},${g},${b},0.12)`);
+  gradient.addColorStop(1, `rgba(${r},${g},${b},0)`);
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, size, size);
+  const tex = new THREE.CanvasTexture(canvas);
+  tex.needsUpdate = true;
+  return tex;
+}
+
+const starTexture = createStarTexture();
+
+// 성운 컬러 프리셋
+const NEBULA_PRESETS = [
+  { r: 100, g: 60, b: 200 },   // 보라
+  { r: 30, g: 80, b: 220 },    // 딥블루
+  { r: 180, g: 50, b: 120 },   // 핑크
+  { r: 40, g: 120, b: 200 },   // 시안
+  { r: 130, g: 40, b: 180 },   // 인디고
+  { r: 60, g: 100, b: 180 },   // 스틸블루
+];
+
+const nebulaTextures = NEBULA_PRESETS.map(c => createNebulaTexture(c.r, c.g, c.b));
+
+// --- 별 레이어 ---
+function Stars({ count, minR, maxR, size, opacity, speed }: {
+  count: number; minR: number; maxR: number; size: number; opacity: number; speed: number;
+}) {
+  const ref = useRef<THREE.Points>(null);
+
+  const { positions, colors } = useMemo(() => {
+    const pos = new Float32Array(count * 3);
+    const col = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+      const r = minR + Math.random() * (maxR - minR);
+      const theta = Math.acos(2 * Math.random() - 1);
+      const phi = Math.random() * 2 * Math.PI;
+      pos[i * 3] = r * Math.sin(theta) * Math.cos(phi);
+      pos[i * 3 + 1] = r * Math.cos(theta);
+      pos[i * 3 + 2] = r * Math.sin(theta) * Math.sin(phi);
+
+      // 별 색상 다양화 (화이트~블루~옐로우)
+      const temp = Math.random();
+      if (temp < 0.6) {
+        // 화이트~블루
+        col[i * 3] = 0.8 + Math.random() * 0.2;
+        col[i * 3 + 1] = 0.85 + Math.random() * 0.15;
+        col[i * 3 + 2] = 0.95 + Math.random() * 0.05;
+      } else if (temp < 0.8) {
+        // 옐로우
+        col[i * 3] = 1;
+        col[i * 3 + 1] = 0.9 + Math.random() * 0.1;
+        col[i * 3 + 2] = 0.6 + Math.random() * 0.2;
+      } else {
+        // 블루
+        col[i * 3] = 0.5 + Math.random() * 0.3;
+        col[i * 3 + 1] = 0.6 + Math.random() * 0.3;
+        col[i * 3 + 2] = 1;
+      }
+    }
+    return { positions: pos, colors: col };
+  }, [count, minR, maxR]);
+
+  useFrame(({ clock }) => {
+    if (ref.current) {
+      ref.current.rotation.y = clock.getElapsedTime() * speed;
+    }
+  });
+
+  return (
+    <points ref={ref}>
+      <bufferGeometry>
+        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
+      </bufferGeometry>
+      <pointsMaterial
+        vertexColors
+        transparent
+        opacity={opacity}
+        depthWrite={false}
+        blending={THREE.AdditiveBlending}
+        sizeAttenuation
+        size={size}
+        map={starTexture}
+      />
+    </points>
+  );
+}
+
+// --- 성운 레이어 ---
+function Nebulae() {
+  const ref = useRef<THREE.Group>(null);
+
+  const clouds = useMemo(() => {
+    const items: Array<{
+      pos: [number, number, number];
+      scale: number;
+      texIdx: number;
+      opacity: number;
+    }> = [];
+
+    // 뇌 주변 + 배경에 성운 구름 대량 배치
+    for (let i = 0; i < 25; i++) {
+      const theta = Math.acos(2 * Math.random() - 1);
+      const phi = Math.random() * 2 * Math.PI;
+      const r = 300 + Math.random() * 900;
+      items.push({
+        pos: [
+          r * Math.sin(theta) * Math.cos(phi),
+          r * Math.cos(theta),
+          r * Math.sin(theta) * Math.sin(phi),
+        ],
+        scale: 300 + Math.random() * 600,
+        texIdx: Math.floor(Math.random() * nebulaTextures.length),
+        opacity: 0.06 + Math.random() * 0.12,
+      });
+    }
+    return items;
+  }, []);
+
+  useFrame(({ clock }) => {
+    if (ref.current) {
+      ref.current.rotation.y = clock.getElapsedTime() * 0.002;
+    }
+  });
+
+  return (
+    <group ref={ref}>
+      {clouds.map((cloud, i) => (
+        <sprite key={i} position={cloud.pos} scale={[cloud.scale, cloud.scale, 1]}>
+          <spriteMaterial
+            map={nebulaTextures[cloud.texIdx]}
+            transparent
+            opacity={cloud.opacity}
+            depthWrite={false}
+            blending={THREE.AdditiveBlending}
+          />
+        </sprite>
+      ))}
+    </group>
+  );
+}
+
+// --- 메인 ---
+export function StarField() {
+  // Light mode에서는 별/성운 숨김 — 밝은 배경에 부적합
+  const theme = useGraphStore((s) => s.theme);
+  if (theme === 'light') return null;
+
+  return (
+    <group>
+      {/* 원경 별 (작고 많음) */}
+      <Stars count={3000} minR={1200} maxR={2500} size={1.2} opacity={0.5} speed={0.003} />
+      {/* 중경 별 (중간) */}
+      <Stars count={800} minR={800} maxR={1400} size={2} opacity={0.6} speed={0.005} />
+      {/* 근경 밝은 별 (크고 적음) */}
+      <Stars count={150} minR={600} maxR={1000} size={3.5} opacity={0.8} speed={0.007} />
+      {/* 성운 */}
+      <Nebulae />
+    </group>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { useGraphStore } from '../stores/graph-store.js';
+import { ExportPanel } from './ExportPanel.js';
+
+export function StatusBar() {
+  const nodes = useGraphStore((s) => s.nodes);
+  const edges = useGraphStore((s) => s.edges);
+  const clusters = useGraphStore((s) => s.clusters);
+  const loading = useGraphStore((s) => s.loading);
+  const mode = useGraphStore((s) => s.mode);
+  const lodLevel = useGraphStore((s) => s.lodLevel);
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+
+  return (
+    <div style={{
+      padding: '6px 16px',
+      background: isDark ? 'rgba(10, 10, 20, 0.8)' : 'rgba(240, 242, 248, 0.95)',
+      borderTop: `1px solid ${isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)'}`,
+      fontSize: '11px',
+      color: isDark ? '#667' : '#556',
+      display: 'flex',
+      gap: '20px',
+      alignItems: 'center',
+    }}>
+      {loading ? (
+        <span>Loading...</span>
+      ) : (
+        <>
+          <span>{nodes.length} docs</span>
+          <span>{edges.length} edges</span>
+          <span>{clusters.length} clusters</span>
+          <span style={{ color: '#556' }}>|</span>
+          <span style={{ color: mode === 'semantic' ? '#88aaff' : '#88cc88' }}>
+            {mode === 'semantic' ? 'AI Semantic' : 'Obsidian Folders'}
+          </span>
+          <span style={{ color: '#556' }}>|</span>
+          <span style={{ color: lodLevel === 'universe' ? '#c088ff' : lodLevel === 'note' ? '#88ffaa' : '#88aaff' }}>
+            {lodLevel}
+          </span>
+          <span style={{ color: '#445', maxWidth: '40%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {clusters.map(c => c.label).join(' · ')}
+          </span>
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <ExportPanel />
+            <span style={{ color: '#334', fontSize: '10px' }}>
+              ESC=reset · /=search
+            </span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,148 @@
+// 지식 타임라인 — 시간 축 슬라이더로 노트 생성/수정 이력 필터
+
+import { useMemo, useCallback } from 'react';
+import { useGraphStore } from '../stores/graph-store.js';
+
+export function Timeline() {
+  const nodes = useGraphStore((s) => s.nodes);
+  const showTimeline = useGraphStore((s) => s.showTimeline);
+  const timelineRange = useGraphStore((s) => s.timelineRange);
+  const setTimelineRange = useGraphStore((s) => s.setTimelineRange);
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+
+  // 전체 날짜 범위 계산
+  const { minMs, maxMs, histogram } = useMemo(() => {
+    const timestamps: number[] = [];
+    for (const n of nodes) {
+      if (n.lastModified) {
+        const ms = new Date(n.lastModified).getTime();
+        if (!isNaN(ms)) timestamps.push(ms);
+      }
+    }
+    if (timestamps.length === 0) return { minMs: 0, maxMs: 0, histogram: [] as number[] };
+
+    const min = Math.min(...timestamps);
+    const max = Math.max(...timestamps);
+    const range = max - min || 1;
+
+    // 50 bin 히스토그램
+    const bins = 50;
+    const hist = new Array(bins).fill(0);
+    for (const ts of timestamps) {
+      const idx = Math.min(Math.floor(((ts - min) / range) * bins), bins - 1);
+      hist[idx]++;
+    }
+    return { minMs: min, maxMs: max, histogram: hist };
+  }, [nodes]);
+
+  // 현재 범위 내 노드 수
+  const activeCount = useMemo(() => {
+    if (!timelineRange) return nodes.length;
+    const [start, end] = timelineRange;
+    return nodes.filter((n) => {
+      if (!n.lastModified) return true;
+      const ms = new Date(n.lastModified).getTime();
+      return ms >= start && ms <= end;
+    }).length;
+  }, [nodes, timelineRange]);
+
+  const handleStartChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = Number(e.target.value);
+    const end = timelineRange ? timelineRange[1] : maxMs;
+    setTimelineRange([Math.min(val, end), end]);
+  }, [timelineRange, maxMs, setTimelineRange]);
+
+  const handleEndChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = Number(e.target.value);
+    const start = timelineRange ? timelineRange[0] : minMs;
+    setTimelineRange([start, Math.max(val, start)]);
+  }, [timelineRange, minMs, setTimelineRange]);
+
+  const resetRange = useCallback(() => {
+    setTimelineRange(null);
+  }, [setTimelineRange]);
+
+  if (!showTimeline || minMs === 0) return null;
+
+  const startVal = timelineRange ? timelineRange[0] : minMs;
+  const endVal = timelineRange ? timelineRange[1] : maxMs;
+  const maxHist = Math.max(1, ...histogram);
+
+  const formatDate = (ms: number) => new Date(ms).toLocaleDateString('ko-KR', { year: 'numeric', month: 'short', day: 'numeric' });
+
+  return (
+    <div style={{
+      padding: '8px 16px',
+      background: isDark ? 'rgba(10,10,20,0.9)' : 'rgba(240,242,248,0.97)',
+      borderTop: `1px solid ${isDark ? 'rgba(100,120,255,0.1)' : 'rgba(0,0,0,0.08)'}`,
+      backdropFilter: 'blur(8px)',
+    }}>
+      {/* 히스토그램 */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', gap: '1px', height: '30px', marginBottom: '4px' }}>
+        {histogram.map((count, i) => {
+          const binStart = minMs + (i / histogram.length) * (maxMs - minMs);
+          const binEnd = minMs + ((i + 1) / histogram.length) * (maxMs - minMs);
+          const inRange = binStart >= startVal && binEnd <= endVal;
+          return (
+            <div
+              key={i}
+              style={{
+                flex: 1,
+                height: `${(count / maxHist) * 100}%`,
+                minHeight: count > 0 ? '2px' : '0',
+                background: inRange
+                  ? (isDark ? 'rgba(100,180,255,0.6)' : 'rgba(59,130,246,0.5)')
+                  : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.08)'),
+                borderRadius: '1px 1px 0 0',
+                transition: 'background 0.15s',
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* 슬라이더 */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span style={{ fontSize: '10px', color: isDark ? '#667' : '#999', minWidth: '90px' }}>
+          {formatDate(startVal)}
+        </span>
+        <input
+          type="range"
+          min={minMs}
+          max={maxMs}
+          value={startVal}
+          onChange={handleStartChange}
+          style={{ flex: 1, accentColor: isDark ? '#6488ff' : '#3b82f6' }}
+        />
+        <input
+          type="range"
+          min={minMs}
+          max={maxMs}
+          value={endVal}
+          onChange={handleEndChange}
+          style={{ flex: 1, accentColor: isDark ? '#6488ff' : '#3b82f6' }}
+        />
+        <span style={{ fontSize: '10px', color: isDark ? '#667' : '#999', minWidth: '90px', textAlign: 'right' }}>
+          {formatDate(endVal)}
+        </span>
+        <button
+          onClick={resetRange}
+          style={{
+            fontSize: '10px', padding: '2px 6px', border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
+            borderRadius: '3px', cursor: 'pointer',
+            background: isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)',
+            color: isDark ? '#aab' : '#555',
+          }}
+        >
+          Reset
+        </button>
+      </div>
+
+      {/* 상태 */}
+      <div style={{ fontSize: '10px', color: isDark ? '#556' : '#888', marginTop: '2px', textAlign: 'center' }}>
+        {activeCount}/{nodes.length} docs in range
+      </div>
+    </div>
+  );
+}