stellavault 0.2.0 → 0.2.1

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

@@ -1,197 +0,0 @@
-// 우주 배경: 다층 별 + 성운 효과 + 은하수
-
-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

@@ -1,53 +0,0 @@
-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

@@ -1,148 +0,0 @@
-// 지식 타임라인 — 시간 축 슬라이더로 노트 생성/수정 이력 필터
-
-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>
-  );
-}