stellavault 0.2.0 → 0.2.1

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

@@ -1,214 +0,0 @@
-// 대시보드 레이아웃 — 호버=툴팁, 클릭=사이드패널, 모션 제어
-
-import { useState, useRef } from 'react';
-import { Graph3D } from './Graph3D.js';
-import { NodeDetail } from './NodeDetail.js';
-import { StatusBar } from './StatusBar.js';
-import { SearchBar } from './SearchBar.js';
-import { ClusterFilter } from './ClusterFilter.js';
-import { TypeFilter } from './TypeFilter.js';
-import { Timeline } from './Timeline.js';
-import { MotionToggle } from './MotionToggle.js';
-import { MotionOverlay } from './MotionOverlay.js';
-import { useMotion } from '../hooks/useMotion.js';
-import { useGraphStore } from '../stores/graph-store.js';
-import { ToolsPanel } from './ToolsPanel.js';
-import { MultiverseView } from './MultiverseView.js';
-
-export function Layout() {
-  const viewMode = useGraphStore((s) => s.viewMode);
-  const setViewMode = useGraphStore((s) => s.setViewMode);
-
-  // 멀티버스 모드면 멀티버스 뷰 렌더링
-  if (viewMode === 'multiverse') {
-    return <MultiverseView />;
-  }
-
-  // 기존 universe 모드
-  const error = useGraphStore((s) => s.error);
-  const loading = useGraphStore((s) => s.loading);
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-  const mode = useGraphStore((s) => s.mode);
-  const setMode = useGraphStore((s) => s.setMode);
-  const theme = useGraphStore((s) => s.theme);
-  const toggleTheme = useGraphStore((s) => s.toggleTheme);
-  const showDecay = useGraphStore((s) => s.showDecayOverlay);
-  const toggleDecay = useGraphStore((s) => s.toggleDecayOverlay);
-  const showConstellation = useGraphStore((s) => s.showConstellation);
-  const toggleConstellation = useGraphStore((s) => s.toggleConstellation);
-  const showTimeline = useGraphStore((s) => s.showTimeline);
-  const toggleTimeline = useGraphStore((s) => s.toggleTimeline);
-  const isDark = theme === 'dark';
-
-  // 모션 제어
-  const controlsRef = useRef<any>(null);
-  // controlsRef는 Graph3D 안의 OrbitControls — window로 전달
-  const getControls = () => (window as any).__sv_controls ?? controlsRef;
-  const motion = useMotion(getControls());
-  const [motionActive, setMotionActive] = useState(false);
-  const [motionLoading, setMotionLoading] = useState(false);
-  const [motionVideo, setMotionVideo] = useState<HTMLVideoElement | null>(null);
-
-  const toggleMotion = async () => {
-    if (motionActive) {
-      motion.stop();
-      setMotionActive(false);
-      setMotionVideo(null);
-    } else {
-      setMotionLoading(true);
-      try {
-        await motion.start();
-        setMotionActive(true);
-        setMotionVideo(motion.videoRef.current);
-      } catch (err) {
-        console.error('Motion start failed:', err);
-      }
-      setMotionLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: isDark ? '#050510' : '#f0f2f8' }}>
-      {/* Header */}
-      <div style={{
-        padding: '8px 16px',
-        background: isDark ? 'rgba(10, 10, 20, 0.8)' : 'rgba(240, 242, 248, 0.95)',
-        borderBottom: `1px solid ${isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)'}`,
-        display: 'flex',
-        alignItems: 'center',
-        gap: '12px',
-        backdropFilter: 'blur(8px)',
-        position: 'relative',
-        zIndex: 10,
-      }}>
-        <button
-          onClick={() => setViewMode('multiverse')}
-          style={{
-            padding: '4px 10px', fontSize: '11px', border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
-            borderRadius: '4px', cursor: 'pointer',
-            background: isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)',
-            color: isDark ? '#88aaff' : '#4466aa', marginRight: '8px',
-          }}
-        >
-          Multiverse
-        </button>
-        <span style={{ fontSize: '14px', fontWeight: 600, color: isDark ? '#c0c0f0' : '#2a2a4a', letterSpacing: '0.5px' }}>
-          Stellavault
-        </span>
-        <span style={{ color: isDark ? 'rgba(100, 120, 255, 0.5)' : 'rgba(60, 60, 120, 0.5)', fontSize: '12px', marginRight: '12px' }}>
-          Neural Knowledge Graph
-        </span>
-        <SearchBar />
-        <div style={{
-          marginLeft: 'auto', display: 'flex', gap: '6px', alignItems: 'center',
-        }}>
-          <MotionToggle active={motionActive} loading={motionLoading} onToggle={toggleMotion} isDark={isDark} />
-          <div style={{
-            display: 'flex', gap: '2px',
-            background: isDark ? 'rgba(100, 120, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)',
-            borderRadius: '6px', padding: '2px',
-          }}>
-            {(['semantic', 'folder'] as const).map((m) => {
-              const active = mode === m;
-              return (
-                <button
-                  key={m}
-                  onClick={() => setMode(m)}
-                  style={{
-                    padding: '4px 12px', fontSize: '11px', border: 'none', borderRadius: '4px', cursor: 'pointer',
-                    background: active
-                      ? (isDark ? 'rgba(100, 120, 255, 0.3)' : 'rgba(0, 0, 0, 0.08)')
-                      : 'transparent',
-                    color: active
-                      ? (isDark ? '#c0d0ff' : '#2a2a4a')
-                      : (isDark ? '#556' : '#888'),
-                    fontWeight: active ? 600 : 400,
-                  }}
-                >
-                  {m === 'semantic' ? 'AI Semantic' : 'Obsidian Folders'}
-                </button>
-              );
-            })}
-          </div>
-          <button
-            onClick={toggleConstellation}
-            style={{
-              padding: '4px 8px', fontSize: '11px',
-              border: `1px solid ${showConstellation ? (isDark ? 'rgba(100,200,255,0.3)' : 'rgba(0,100,200,0.2)') : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)')}`,
-              borderRadius: '4px', cursor: 'pointer',
-              background: showConstellation ? (isDark ? 'rgba(100,200,255,0.15)' : 'rgba(0,100,200,0.08)') : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
-              color: showConstellation ? (isDark ? '#66ccff' : '#0066aa') : (isDark ? '#aab' : '#555'),
-            }}
-          >
-            Stars
-          </button>
-          <ClusterFilter />
-          <TypeFilter />
-          <button
-            onClick={toggleTimeline}
-            style={{
-              padding: '4px 8px', fontSize: '11px',
-              border: `1px solid ${showTimeline ? (isDark ? 'rgba(100,180,255,0.3)' : 'rgba(0,100,200,0.2)') : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)')}`,
-              borderRadius: '4px', cursor: 'pointer',
-              background: showTimeline ? (isDark ? 'rgba(100,180,255,0.15)' : 'rgba(0,100,200,0.08)') : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
-              color: showTimeline ? (isDark ? '#66aaff' : '#0066aa') : (isDark ? '#aab' : '#555'),
-            }}
-          >
-            Timeline
-          </button>
-          <button
-            onClick={toggleDecay}
-            style={{
-              padding: '4px 8px', fontSize: '11px',
-              border: `1px solid ${showDecay ? (isDark ? 'rgba(255,150,50,0.3)' : 'rgba(200,100,0,0.2)') : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)')}`,
-              borderRadius: '4px', cursor: 'pointer',
-              background: showDecay ? (isDark ? 'rgba(255,150,50,0.15)' : 'rgba(200,100,0,0.08)') : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
-              color: showDecay ? (isDark ? '#ffaa44' : '#aa6600') : (isDark ? '#aab' : '#555'),
-            }}
-          >
-            Decay
-          </button>
-          <button
-            onClick={toggleTheme}
-            style={{
-              padding: '4px 8px', fontSize: '11px',
-              border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
-              borderRadius: '4px', cursor: 'pointer',
-              background: isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)',
-              color: isDark ? '#aab' : '#555',
-            }}
-          >
-            {isDark ? 'Light' : 'Dark'}
-          </button>
-        </div>
-        {loading && (
-          <span style={{ fontSize: '11px', color: '#88aaff' }}>
-            {mode === 'semantic' ? 'Mapping neural connections...' : 'Loading folder structure...'}
-          </span>
-        )}
-      </div>
-
-      {error && (
-        <div style={{ padding: '10px 16px', background: 'rgba(255, 50, 50, 0.1)', color: '#ef4444', fontSize: '12px' }}>
-          {error}
-        </div>
-      )}
-
-      {/* Main */}
-      <div style={{ flex: 1, display: 'flex', overflow: 'hidden', position: 'relative' }}>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <Graph3D />
-          {/* 모션 웹캠 PIP */}
-          {motionActive && (
-            <MotionOverlay videoElement={motionVideo} currentGesture={motion.currentGesture} />
-          )}
-        </div>
-        {selectedNodeId && <NodeDetail />}
-      </div>
-
-      <Timeline />
-      <ToolsPanel />
-      <StatusBar />
-    </div>
-  );
-}

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

@@ -1,81 +0,0 @@
-// 웹캠 PIP 미리보기 + 현재 제스처 상태 표시
-
-import { useEffect, useRef } from 'react';
-
-const GESTURE_LABELS: Record<string, string> = {
-  rotate: '✋ Rotate',
-  pan: '✊ Pan',
-  zoom: '🤏 Zoom',
-  select: '👆 Select',
-  reset: '👋 Reset',
-  none: '...',
-};
-
-interface Props {
-  videoElement: HTMLVideoElement | null;
-  currentGesture: React.RefObject<string>;
-}
-
-export function MotionOverlay({ videoElement, currentGesture }: Props) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const labelRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!videoElement || !canvasRef.current) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    let animId: number;
-
-    function draw() {
-      if (!videoElement || !ctx) return;
-      ctx.save();
-      // 좌우 반전 (거울 모드)
-      ctx.scale(-1, 1);
-      ctx.drawImage(videoElement, -canvas.width, 0, canvas.width, canvas.height);
-      ctx.restore();
-
-      // 제스처 라벨 업데이트
-      if (labelRef.current) {
-        const g = currentGesture.current ?? 'none';
-        labelRef.current.textContent = GESTURE_LABELS[g] ?? g;
-      }
-
-      animId = requestAnimationFrame(draw);
-    }
-
-    draw();
-    return () => cancelAnimationFrame(animId);
-  }, [videoElement, currentGesture]);
-
-  if (!videoElement) return null;
-
-  return (
-    <div style={{
-      position: 'absolute', bottom: '16px', right: '16px',
-      borderRadius: '12px', overflow: 'hidden',
-      border: '1px solid rgba(100, 120, 255, 0.3)',
-      boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
-      zIndex: 50,
-    }}>
-      <canvas
-        ref={canvasRef}
-        width={192}
-        height={144}
-        style={{ display: 'block', background: '#111' }}
-      />
-      <div
-        ref={labelRef}
-        style={{
-          position: 'absolute', bottom: '6px', left: '50%', transform: 'translateX(-50%)',
-          background: 'rgba(0,0,0,0.7)', padding: '2px 10px', borderRadius: '10px',
-          fontSize: '11px', color: '#88aaff', whiteSpace: 'nowrap',
-        }}
-      >
-        ...
-      </div>
-    </div>
-  );
-}

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

@@ -1,33 +0,0 @@
-// 모션 ON/OFF 토글 버튼
-
-interface Props {
-  active: boolean;
-  loading: boolean;
-  onToggle: () => void;
-  isDark?: boolean;
-}
-
-export function MotionToggle({ active, loading, onToggle, isDark = true }: Props) {
-  return (
-    <button
-      onClick={onToggle}
-      disabled={loading}
-      style={{
-        padding: '4px 10px',
-        fontSize: '11px',
-        border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
-        borderRadius: '4px',
-        cursor: loading ? 'wait' : 'pointer',
-        background: active
-          ? (isDark ? 'rgba(100,255,120,0.2)' : 'rgba(40,160,80,0.1)')
-          : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
-        color: active
-          ? (isDark ? '#88ff88' : '#2a8a4a')
-          : (isDark ? '#aab' : '#555'),
-        transition: 'all 0.2s',
-      }}
-    >
-      {loading ? 'Loading...' : active ? '✋ Motion ON' : '✋ Motion'}
-    </button>
-  );
-}

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

@@ -1,286 +0,0 @@
-// Design Ref: Phase 1c — 멀티버스 뷰
-// "내 우주"가 대형 구체, 피어 우주들이 주변에 연결
-
-import { useRef, useMemo, useCallback } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls, Text, Billboard } from '@react-three/drei';
-import * as THREE from 'three';
-import { useGraphStore } from '../stores/graph-store.js';
-
-const UNIVERSE_COLORS = [
-  '#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6',
-  '#8b5cf6', '#ef4444', '#06b6d4', '#84cc16', '#f97316',
-];
-
-interface UniverseData {
-  id: string;
-  name: string;
-  documentCount: number;
-  topTopics: string[];
-  position: [number, number, number];
-  color: string;
-  isMe: boolean;
-}
-
-function UniverseNode({ data, onClick }: { data: UniverseData; onClick: () => void }) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const glowRef = useRef<THREE.Mesh>(null);
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-
-  // 크기: 문서 수 기반 (최소 2, 최대 8)
-  const size = Math.max(2, Math.min(8, Math.sqrt(data.documentCount / 50) * 2));
-  const myScale = data.isMe ? 1.5 : 1;
-
-  useFrame((state) => {
-    if (meshRef.current) {
-      // 부드러운 회전
-      meshRef.current.rotation.y += data.isMe ? 0.003 : 0.001;
-    }
-    if (glowRef.current) {
-      // 호흡 효과
-      const pulse = 1 + Math.sin(state.clock.elapsedTime * (data.isMe ? 1.5 : 0.8)) * 0.1;
-      glowRef.current.scale.setScalar(pulse);
-    }
-  });
-
-  const color = new THREE.Color(data.color);
-
-  return (
-    <group position={data.position} onClick={onClick} onPointerOver={() => { document.body.style.cursor = 'pointer'; }} onPointerOut={() => { document.body.style.cursor = 'default'; }}>
-      {/* 글로우 */}
-      <mesh ref={glowRef}>
-        <sphereGeometry args={[size * myScale * 1.4, 16, 16]} />
-        <meshBasicMaterial
-          color={color}
-          transparent
-          opacity={isDark ? 0.08 : 0.04}
-          depthWrite={false}
-        />
-      </mesh>
-
-      {/* 코어 구체 */}
-      <mesh ref={meshRef}>
-        <sphereGeometry args={[size * myScale, 32, 32]} />
-        <meshStandardMaterial
-          color={color}
-          emissive={color}
-          emissiveIntensity={data.isMe ? 0.4 : 0.15}
-          roughness={0.3}
-          metalness={0.7}
-          transparent
-          opacity={0.9}
-        />
-      </mesh>
-
-      {/* 라벨 */}
-      <Billboard position={[0, size * myScale + 2, 0]}>
-        <Text
-          fontSize={data.isMe ? 1.8 : 1.2}
-          color={isDark ? '#c0c0f0' : '#2a2a4a'}
-          anchorX="center"
-          anchorY="bottom"
-          font={undefined}
-        >
-          {data.isMe ? 'My Universe' : data.name}
-        </Text>
-        <Text
-          fontSize={0.8}
-          color={isDark ? '#556' : '#999'}
-          anchorX="center"
-          anchorY="top"
-          position={[0, -0.3, 0]}
-          font={undefined}
-        >
-          {`${data.documentCount} docs`}
-        </Text>
-      </Billboard>
-
-      {/* 토픽 태그 (내 우주만) */}
-      {data.isMe && data.topTopics.length > 0 && (
-        <Billboard position={[0, -(size * myScale + 1.5), 0]}>
-          <Text
-            fontSize={0.6}
-            color={isDark ? '#445' : '#bbb'}
-            anchorX="center"
-            font={undefined}
-          >
-            {data.topTopics.slice(0, 3).map(t => `#${t}`).join('  ')}
-          </Text>
-        </Billboard>
-      )}
-    </group>
-  );
-}
-
-function MultiverseEdges({ universes }: { universes: UniverseData[] }) {
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const myUniverse = universes.find(u => u.isMe);
-  if (!myUniverse) return null;
-
-  const positions = useMemo(() => {
-    const pts: number[] = [];
-    for (const u of universes) {
-      if (u.isMe) continue;
-      pts.push(...myUniverse.position, ...u.position);
-    }
-    return new Float32Array(pts);
-  }, [universes, myUniverse]);
-
-  return (
-    <lineSegments>
-      <bufferGeometry>
-        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-      </bufferGeometry>
-      <lineBasicMaterial
-        color={isDark ? '#6366f1' : '#3b82f6'}
-        transparent
-        opacity={0.2}
-        linewidth={1}
-      />
-    </lineSegments>
-  );
-}
-
-function MultiverseScene() {
-  const nodes = useGraphStore((s) => s.nodes);
-  const peers = useGraphStore((s) => s.federationPeers);
-  const setViewMode = useGraphStore((s) => s.setViewMode);
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-
-  // 우주 데이터 구성
-  const universes = useMemo<UniverseData[]>(() => {
-    const result: UniverseData[] = [];
-
-    // 내 우주 (중앙)
-    result.push({
-      id: 'me',
-      name: 'My Universe',
-      documentCount: nodes.length,
-      topTopics: [],
-      position: [0, 0, 0],
-      color: '#6366f1',
-      isMe: true,
-    });
-
-    // 피어 우주들 (원형 배치)
-    for (let i = 0; i < peers.length; i++) {
-      const angle = (i / Math.max(peers.length, 1)) * Math.PI * 2 - Math.PI / 2;
-      const radius = 30 + peers.length * 5;
-      result.push({
-        id: peers[i].peerId,
-        name: peers[i].displayName,
-        documentCount: peers[i].documentCount,
-        topTopics: peers[i].topTopics,
-        position: [
-          radius * Math.cos(angle),
-          (Math.random() - 0.5) * 10,
-          radius * Math.sin(angle),
-        ],
-        color: UNIVERSE_COLORS[i % UNIVERSE_COLORS.length],
-        isMe: false,
-      });
-    }
-
-    return result;
-  }, [nodes.length, peers]);
-
-  const handleUniverseClick = useCallback((u: UniverseData) => {
-    if (u.isMe) {
-      setViewMode('universe');
-    }
-  }, [setViewMode]);
-
-  return (
-    <>
-      <ambientLight intensity={0.3} />
-      <pointLight position={[0, 50, 50]} intensity={0.8} />
-
-      {universes.map((u) => (
-        <UniverseNode key={u.id} data={u} onClick={() => handleUniverseClick(u)} />
-      ))}
-
-      <MultiverseEdges universes={universes} />
-
-      <OrbitControls
-        enablePan
-        enableZoom
-        minDistance={20}
-        maxDistance={200}
-        autoRotate
-        autoRotateSpeed={0.3}
-      />
-
-      {/* 배경 파티클 */}
-      <points>
-        <bufferGeometry>
-          <bufferAttribute
-            attach="attributes-position"
-            args={[new Float32Array(Array.from({ length: 300 }, () => (Math.random() - 0.5) * 300)), 3]}
-          />
-        </bufferGeometry>
-        <pointsMaterial
-          size={0.3}
-          color={isDark ? '#334' : '#ddd'}
-          transparent
-          opacity={0.5}
-          depthWrite={false}
-        />
-      </points>
-    </>
-  );
-}
-
-export function MultiverseView() {
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const setViewMode = useGraphStore((s) => s.setViewMode);
-  const peers = useGraphStore((s) => s.federationPeers);
-
-  return (
-    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-      <Canvas camera={{ position: [0, 30, 80], fov: 50 }}>
-        <color attach="background" args={[isDark ? '#020208' : '#f0f2f8']} />
-        <fog attach="fog" args={[isDark ? '#020208' : '#f0f2f8', 100, 250]} />
-        <MultiverseScene />
-      </Canvas>
-
-      {/* 오버레이 UI */}
-      <div style={{
-        position: 'absolute', top: '16px', left: '16px',
-        color: isDark ? '#c0c0f0' : '#2a2a4a',
-        fontSize: '12px',
-      }}>
-        <div style={{ fontSize: '16px', fontWeight: 700, marginBottom: '4px' }}>
-          Stella Network
-        </div>
-        <div style={{ color: isDark ? '#556' : '#999' }}>
-          {peers.length} peer{peers.length !== 1 ? 's' : ''} connected
-        </div>
-      </div>
-
-      <div style={{
-        position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)',
-        color: isDark ? '#556' : '#999', fontSize: '11px',
-      }}>
-        Click "My Universe" to enter your knowledge graph
-      </div>
-
-      <button
-        onClick={() => setViewMode('universe')}
-        style={{
-          position: 'absolute', top: '16px', right: '16px',
-          padding: '6px 14px', fontSize: '11px',
-          background: isDark ? 'rgba(100,120,255,0.1)' : 'rgba(0,0,0,0.04)',
-          border: `1px solid ${isDark ? 'rgba(100,120,255,0.2)' : 'rgba(0,0,0,0.1)'}`,
-          borderRadius: '6px', cursor: 'pointer',
-          color: isDark ? '#88aaff' : '#4466aa',
-        }}
-      >
-        Enter My Universe
-      </button>
-    </div>
-  );
-}