stellavault 0.2.0 → 0.3.0

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

@@ -1,131 +0,0 @@
-// source/type 필터 — ClusterFilter 패턴 재활용
-
-import { useState, useMemo } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-const TYPE_ICONS: Record<string, string> = {
-  note: '📝', clip: '📎', sync: '🔄', bridge: '🌉',
-  decision: '⚖️', snapshot: '📸',
-};
-
-const SOURCE_COLORS: Record<string, string> = {
-  local: '#10b981', notion: '#3b82f6', clip: '#f59e0b',
-  bridge: '#8b5cf6', pack: '#ec4899',
-};
-
-export function TypeFilter() {
-  const nodes = useGraphStore((s) => s.nodes);
-  const hiddenTypes = useGraphStore((s) => s.hiddenTypes);
-  const toggleHiddenType = useGraphStore((s) => s.toggleHiddenType);
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const [open, setOpen] = useState(false);
-
-  // source와 type별 노드 수 집계
-  const { typeCounts, sourceCounts } = useMemo(() => {
-    const tc = new Map<string, number>();
-    const sc = new Map<string, number>();
-    for (const n of nodes) {
-      const t = n.type ?? 'note';
-      const s = n.source ?? 'local';
-      tc.set(t, (tc.get(t) ?? 0) + 1);
-      sc.set(s, (sc.get(s) ?? 0) + 1);
-    }
-    return {
-      typeCounts: [...tc.entries()].sort((a, b) => b[1] - a[1]),
-      sourceCounts: [...sc.entries()].sort((a, b) => b[1] - a[1]),
-    };
-  }, [nodes]);
-
-  const totalTypes = typeCounts.length + sourceCounts.length;
-  if (totalTypes <= 1 && sourceCounts.length <= 1) return null;
-
-  const activeFilters = hiddenTypes.size;
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <button
-        onClick={() => setOpen(!open)}
-        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: open
-            ? (isDark ? 'rgba(100,120,255,0.2)' : 'rgba(0,0,0,0.08)')
-            : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
-          color: isDark ? '#aab' : '#555',
-        }}
-      >
-        Types {activeFilters > 0 ? `(-${activeFilters})` : ''}
-      </button>
-
-      {open && (
-        <div style={{
-          position: 'absolute', top: '100%', right: 0, marginTop: '6px',
-          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: '8px', minWidth: '200px',
-          backdropFilter: 'blur(8px)', zIndex: 100,
-          boxShadow: isDark ? 'none' : '0 4px 16px rgba(0,0,0,0.08)',
-        }}>
-          {/* Source section */}
-          <div style={{ fontSize: '9px', color: isDark ? '#667' : '#999', padding: '2px 6px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
-            Source
-          </div>
-          {sourceCounts.map(([source, count]) => {
-            const key = `source:${source}`;
-            const hidden = hiddenTypes.has(key);
-            return (
-              <label key={key} style={{
-                display: 'flex', alignItems: 'center', gap: '8px',
-                padding: '4px 6px', borderRadius: '4px', cursor: 'pointer',
-                opacity: hidden ? 0.3 : 1,
-                fontSize: '11px', color: isDark ? '#aab' : '#444',
-              }}>
-                <div style={{
-                  width: '10px', height: '10px', borderRadius: '50%',
-                  background: hidden ? '#333' : (SOURCE_COLORS[source] ?? '#666'),
-                  flexShrink: 0,
-                }} />
-                <span style={{ flex: 1 }}>{source}</span>
-                <span style={{ color: '#556', fontSize: '10px' }}>{count}</span>
-                <input
-                  type="checkbox"
-                  checked={!hidden}
-                  onChange={() => toggleHiddenType(key)}
-                  style={{ accentColor: SOURCE_COLORS[source] ?? '#666' }}
-                />
-              </label>
-            );
-          })}
-
-          {/* Type section */}
-          <div style={{ fontSize: '9px', color: isDark ? '#667' : '#999', padding: '6px 6px 2px', textTransform: 'uppercase', letterSpacing: '0.5px', borderTop: `1px solid ${isDark ? 'rgba(100,120,255,0.08)' : 'rgba(0,0,0,0.06)'}`, marginTop: '4px' }}>
-            Type
-          </div>
-          {typeCounts.map(([type, count]) => {
-            const key = `type:${type}`;
-            const hidden = hiddenTypes.has(key);
-            return (
-              <label key={key} style={{
-                display: 'flex', alignItems: 'center', gap: '8px',
-                padding: '4px 6px', borderRadius: '4px', cursor: 'pointer',
-                opacity: hidden ? 0.3 : 1,
-                fontSize: '11px', color: isDark ? '#aab' : '#444',
-              }}>
-                <span style={{ fontSize: '12px', flexShrink: 0 }}>{TYPE_ICONS[type] ?? '📄'}</span>
-                <span style={{ flex: 1 }}>{type}</span>
-                <span style={{ color: '#556', fontSize: '10px' }}>{count}</span>
-                <input
-                  type="checkbox"
-                  checked={!hidden}
-                  onChange={() => toggleHiddenType(key)}
-                />
-              </label>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/packages/graph/src/embed/EmbedGraph.tsx

@@ -1,144 +0,0 @@
-// Embeddable 3D mini-graph widget (F-A08)
-// Lightweight version for iframe embedding
-
-import { useEffect, useRef, useMemo } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls } from '@react-three/drei';
-import * as THREE from 'three';
-
-interface EmbedNode {
-  id: string;
-  label: string;
-  clusterId: number;
-  position: [number, number, number];
-  size: number;
-}
-
-interface EmbedEdge {
-  source: string;
-  target: string;
-  weight: number;
-}
-
-interface EmbedData {
-  nodes: EmbedNode[];
-  edges: EmbedEdge[];
-  title?: string;
-}
-
-const PALETTE = [
-  [0.49, 0.23, 0.93], [0.93, 0.27, 0.60], [0.96, 0.62, 0.04],
-  [0.06, 0.72, 0.51], [0.23, 0.51, 0.96], [0.94, 0.27, 0.27],
-  [0.02, 0.71, 0.83], [0.52, 0.80, 0.09], [0.98, 0.57, 0.09],
-  [0.55, 0.36, 0.96],
-] as number[][];
-
-function EmbedNodes({ nodes }: { nodes: EmbedNode[] }) {
-  const ref = useRef<THREE.Points>(null);
-
-  const { positions, colors, sizes } = useMemo(() => {
-    const n = nodes.length;
-    const pos = new Float32Array(n * 3);
-    const col = new Float32Array(n * 3);
-    const sz = new Float32Array(n);
-
-    for (let i = 0; i < n; i++) {
-      const node = nodes[i];
-      pos[i * 3] = node.position[0];
-      pos[i * 3 + 1] = node.position[1];
-      pos[i * 3 + 2] = node.position[2];
-
-      const pal = PALETTE[node.clusterId % PALETTE.length];
-      col[i * 3] = pal[0];
-      col[i * 3 + 1] = pal[1];
-      col[i * 3 + 2] = pal[2];
-
-      sz[i] = 3 + node.size * 3;
-    }
-    return { positions: pos, colors: col, sizes: sz };
-  }, [nodes]);
-
-  return (
-    <points ref={ref}>
-      <bufferGeometry>
-        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
-        <bufferAttribute attach="attributes-size" args={[sizes, 1]} />
-      </bufferGeometry>
-      <pointsMaterial vertexColors transparent opacity={0.9} depthWrite={false} sizeAttenuation size={6} />
-    </points>
-  );
-}
-
-function EmbedEdges({ nodes, edges }: { nodes: EmbedNode[]; edges: EmbedEdge[] }) {
-  const nodeMap = useMemo(() => new Map(nodes.map(n => [n.id, n])), [nodes]);
-
-  const positions = useMemo(() => {
-    const pos: number[] = [];
-    for (const e of edges) {
-      const s = nodeMap.get(e.source);
-      const t = nodeMap.get(e.target);
-      if (s && t) {
-        pos.push(...s.position, ...t.position);
-      }
-    }
-    return new Float32Array(pos);
-  }, [edges, nodeMap]);
-
-  return (
-    <lineSegments>
-      <bufferGeometry>
-        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-      </bufferGeometry>
-      <lineBasicMaterial color="#6366f1" transparent opacity={0.15} />
-    </lineSegments>
-  );
-}
-
-function AutoRotate() {
-  useFrame(({ camera }) => {
-    camera.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0.002);
-  });
-  return null;
-}
-
-function Scene({ data, interactive }: { data: EmbedData; interactive: boolean }) {
-  return (
-    <>
-      <ambientLight intensity={0.5} />
-      <EmbedNodes nodes={data.nodes} />
-      <EmbedEdges nodes={data.nodes} edges={data.edges} />
-      {interactive ? (
-        <OrbitControls enablePan={false} enableZoom={true} autoRotate autoRotateSpeed={0.5} />
-      ) : (
-        <AutoRotate />
-      )}
-    </>
-  );
-}
-
-export function EmbedGraph({ data, interactive = true, theme = 'dark' }: {
-  data: EmbedData;
-  interactive?: boolean;
-  theme?: 'dark' | 'light';
-}) {
-  const bg = theme === 'dark' ? '#050510' : '#f0f2f8';
-
-  return (
-    <div style={{ width: '100%', height: '100%', position: 'relative', background: bg }}>
-      <Canvas camera={{ position: [0, 0, 500], fov: 50 }}>
-        <color attach="background" args={[bg]} />
-        <Scene data={data} interactive={interactive} />
-      </Canvas>
-      {data.title && (
-        <div style={{
-          position: 'absolute', bottom: '8px', left: '8px',
-          fontSize: '10px', color: theme === 'dark' ? '#556' : '#999',
-          fontFamily: 'system-ui, sans-serif',
-        }}>
-          {data.title} — stellavault
-        </div>
-      )}
-    </div>
-  );
-}

package/packages/graph/src/hooks/useConstellationLOD.ts

@@ -1,76 +0,0 @@
-// Design Ref: §5.2 — 카메라 거리 기반 LOD 레벨 결정
-// Plan SC: SC-03 (줌 3단계 부드러운 전환)
-
-import { useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-import { useGraphStore } from '../stores/graph-store.js';
-
-const LOD_THRESHOLDS = {
-  UNIVERSE_MIN: 800,
-  NOTE_MAX: 300,
-  LERP_SPEED: 0.05,
-} as const;
-
-export interface LODState {
-  lodLevel: 'universe' | 'constellation' | 'note';
-  constellationOpacity: number;  // 0~1
-  edgeOpacity: number;           // 0~1
-  nodeScale: number;             // 1~3
-}
-
-export function useConstellationLOD(): LODState {
-  const setLodLevel = useGraphStore((s) => s.setLodLevel);
-  const opacityRef = useRef(0.5);
-  const edgeOpRef = useRef(0.5);
-  const scaleRef = useRef(2);
-  const currentLevelRef = useRef<'universe' | 'constellation' | 'note'>('constellation');
-
-  useFrame(({ camera }) => {
-    const dist = camera.position.length();
-
-    // Determine target LOD level
-    let targetLevel: 'universe' | 'constellation' | 'note';
-    let targetConstellationOp: number;
-    let targetEdgeOp: number;
-    let targetScale: number;
-
-    if (dist > LOD_THRESHOLDS.UNIVERSE_MIN) {
-      targetLevel = 'universe';
-      targetConstellationOp = 1;
-      targetEdgeOp = 0;
-      targetScale = 1;
-    } else if (dist < LOD_THRESHOLDS.NOTE_MAX) {
-      targetLevel = 'note';
-      targetConstellationOp = 0;
-      targetEdgeOp = 1;
-      targetScale = 3;
-    } else {
-      targetLevel = 'constellation';
-      // Interpolate within constellation range (300~800)
-      const t = (dist - LOD_THRESHOLDS.NOTE_MAX) /
-        (LOD_THRESHOLDS.UNIVERSE_MIN - LOD_THRESHOLDS.NOTE_MAX);
-      targetConstellationOp = t;
-      targetEdgeOp = 1 - t * 0.5; // edges fade partially at distance
-      targetScale = 1 + (1 - t) * 2; // 1 at far, 3 at close
-    }
-
-    // Lerp for smooth transitions
-    const speed = LOD_THRESHOLDS.LERP_SPEED;
-    opacityRef.current += (targetConstellationOp - opacityRef.current) * speed;
-    edgeOpRef.current += (targetEdgeOp - edgeOpRef.current) * speed;
-    scaleRef.current += (targetScale - scaleRef.current) * speed;
-
-    // Update store only when level actually changes
-    if (targetLevel !== currentLevelRef.current) {
-      currentLevelRef.current = targetLevel;
-      setLodLevel(targetLevel);
-    }
-  });
-
-  return {
-    lodLevel: currentLevelRef.current,
-    constellationOpacity: opacityRef.current,
-    edgeOpacity: edgeOpRef.current,
-    nodeScale: scaleRef.current,
-  };
-}

package/packages/graph/src/hooks/useDecay.ts

@@ -1,37 +0,0 @@
-// Design Ref: §5 — 감쇠 데이터 로딩 훅
-
-import { useEffect, useRef } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export interface DecayData {
-  [documentId: string]: number; // retrievability 0~1
-}
-
-export function useDecay() {
-  const showDecay = useGraphStore((s) => s.showDecayOverlay);
-  const dataRef = useRef<DecayData>({});
-  const loadedRef = useRef(false);
-
-  useEffect(() => {
-    if (!showDecay || loadedRef.current) return;
-
-    fetch('http://127.0.0.1:3333/api/decay')
-      .then(r => r.json())
-      .then(report => {
-        if (!report.topDecaying) return;
-        // Build map from all decaying notes
-        const map: DecayData = {};
-        // Default R=1 for all, then override with actual values
-        for (const d of report.topDecaying) {
-          map[d.documentId] = d.retrievability;
-        }
-        dataRef.current = map;
-        loadedRef.current = true;
-        // Force re-render
-        useGraphStore.getState().setDecayData(map);
-      })
-      .catch(() => {});
-  }, [showDecay]);
-
-  return dataRef.current;
-}

package/packages/graph/src/hooks/useExport.ts

@@ -1,165 +0,0 @@
-// Design Ref: §5.1 — 스크린샷/녹화 로직
-// Plan SC: SC-01 (PNG 캡처), SC-02 (WebM 녹화)
-
-import { useRef, useState, useCallback } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-import {
-  generateFilename,
-  downloadBlob,
-  addWatermark,
-  canvasToBlob,
-  isMediaRecorderSupported,
-} from '../lib/export-utils.js';
-
-export interface ScreenshotOptions {
-  watermark?: boolean;
-  width?: number;   // default: canvas width (max 4096)
-  height?: number;  // default: canvas height (max 4096)
-}
-
-export interface RecordingOptions {
-  duration?: number;   // seconds, default 5
-  rotation?: boolean;  // auto-rotate, default true
-}
-
-export function useExport() {
-  const recorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<Blob[]>([]);
-  const timerRef = useRef<number | null>(null);
-  const [recordingDuration, setRecordingDuration] = useState(0);
-  const startTimeRef = useRef<number>(0);
-  const animFrameRef = useRef<number>(0);
-
-  const getCanvas = useCallback((): HTMLCanvasElement | null => {
-    return document.querySelector('canvas');
-  }, []);
-
-  const takeScreenshot = useCallback(async (options: ScreenshotOptions = {}) => {
-    const canvas = getCanvas();
-    if (!canvas) return;
-
-    const store = useGraphStore.getState();
-    store.setExporting(true);
-
-    try {
-      // High-res capture: resize canvas temporarily if requested
-      const targetW = Math.min(options.width ?? canvas.width, 4096);
-      const targetH = Math.min(options.height ?? canvas.height, 4096);
-      const origW = canvas.width;
-      const origH = canvas.height;
-      const needsResize = targetW !== origW || targetH !== origH;
-
-      if (needsResize) {
-        canvas.width = targetW;
-        canvas.height = targetH;
-        canvas.style.width = origW + 'px';
-        canvas.style.height = origH + 'px';
-        // Force one frame render at new resolution
-        await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
-      }
-
-      const offscreen = document.createElement('canvas');
-      offscreen.width = canvas.width;
-      offscreen.height = canvas.height;
-      const ctx = offscreen.getContext('2d');
-      if (!ctx) return;
-
-      ctx.drawImage(canvas, 0, 0);
-
-      if (needsResize) {
-        canvas.width = origW;
-        canvas.height = origH;
-        canvas.style.width = '';
-        canvas.style.height = '';
-      }
-
-      if (options.watermark !== false) {
-        addWatermark(offscreen, 'Stellavault');
-      }
-
-      const blob = await canvasToBlob(offscreen);
-      downloadBlob(blob, generateFilename('screenshot', 'png'));
-    } catch (err) {
-      console.error('Screenshot failed:', err);
-    } finally {
-      store.setExporting(false);
-    }
-  }, [getCanvas]);
-
-  const startRecording = useCallback((options: RecordingOptions = {}) => {
-    const canvas = getCanvas();
-    if (!canvas || !isMediaRecorderSupported()) {
-      console.error('WebM recording is not supported in this browser');
-      return;
-    }
-
-    const store = useGraphStore.getState();
-    const duration = options.duration ?? 5;
-    const rotation = options.rotation ?? true;
-
-    // Start auto-rotation if requested
-    if (rotation) {
-      const controls = (window as any).__sv_controls?.current;
-      if (controls) {
-        (window as any).__sv_autoRotate = true;
-      }
-    }
-
-    const stream = canvas.captureStream(60);
-    const recorder = new MediaRecorder(stream, {
-      mimeType: 'video/webm;codecs=vp9',
-      videoBitsPerSecond: 8_000_000,
-    });
-
-    chunksRef.current = [];
-    recorder.ondataavailable = (e) => {
-      if (e.data.size > 0) chunksRef.current.push(e.data);
-    };
-
-    recorder.onstop = () => {
-      const blob = new Blob(chunksRef.current, { type: 'video/webm' });
-      downloadBlob(blob, generateFilename('recording', 'webm'));
-      chunksRef.current = [];
-      store.setRecording(false);
-      (window as any).__sv_autoRotate = false;
-
-      if (timerRef.current) cancelAnimationFrame(timerRef.current);
-      setRecordingDuration(0);
-    };
-
-    recorderRef.current = recorder;
-    recorder.start();
-    store.setRecording(true);
-    startTimeRef.current = performance.now();
-
-    // Duration timer with RAF
-    function updateTimer() {
-      const elapsed = (performance.now() - startTimeRef.current) / 1000;
-      setRecordingDuration(elapsed);
-      if (elapsed >= duration) {
-        stopRecording();
-        return;
-      }
-      timerRef.current = requestAnimationFrame(updateTimer);
-    }
-    timerRef.current = requestAnimationFrame(updateTimer);
-  }, [getCanvas]);
-
-  const stopRecording = useCallback(() => {
-    if (recorderRef.current && recorderRef.current.state === 'recording') {
-      recorderRef.current.stop();
-    }
-    if (timerRef.current) {
-      cancelAnimationFrame(timerRef.current);
-      timerRef.current = null;
-    }
-  }, []);
-
-  return {
-    takeScreenshot,
-    startRecording,
-    stopRecording,
-    recordingDuration,
-    isMediaRecorderSupported: isMediaRecorderSupported(),
-  };
-}

package/packages/graph/src/hooks/useGraph.ts

@@ -1,69 +0,0 @@
-// 그래프 데이터 로딩 — mode 전환 시 위치 유지, 색상만 변경
-
-import { useEffect, useRef } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export function useGraph() {
-  const { setGraphData, setLoading, setError } = useGraphStore();
-  const mode = useGraphStore((s) => s.mode);
-  const initialLoadDone = useRef(false);
-  const savedPositions = useRef<Map<string, [number, number, number]>>(new Map());
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function load() {
-      setLoading(true);
-      setError(null);
-      try {
-        const res = await fetch(`/api/graph?mode=${mode}`);
-        if (!res.ok) throw new Error(`API error: ${res.status}`);
-        const json: any = await res.json();
-        if (cancelled) return;
-        const { nodes, edges, clusters } = json.data;
-
-        let positioned;
-        if (!initialLoadDone.current) {
-          // 첫 로드: 랜덤 위치 (force layout이 이후 정리)
-          positioned = nodes.map((n: any) => {
-            const pos: [number, number, number] = [
-              (Math.random() - 0.5) * 500,
-              (Math.random() - 0.5) * 500,
-              (Math.random() - 0.5) * 500,
-            ];
-            savedPositions.current.set(n.id, pos);
-            return { ...n, position: pos };
-          });
-          initialLoadDone.current = true;
-        } else {
-          // 모드 전환: 기존 위치 유지, clusterId만 변경
-          positioned = nodes.map((n: any) => ({
-            ...n,
-            position: savedPositions.current.get(n.id) ?? [
-              (Math.random() - 0.5) * 500,
-              (Math.random() - 0.5) * 500,
-              (Math.random() - 0.5) * 500,
-            ],
-          }));
-        }
-
-        setGraphData(positioned, edges, clusters);
-      } catch (err) {
-        if (!cancelled) setError(String(err));
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    }
-
-    load();
-    return () => { cancelled = true; };
-  }, [mode, setGraphData, setLoading, setError]);
-
-  // force layout이 위치를 업데이트할 때마다 저장
-  const nodes = useGraphStore((s) => s.nodes);
-  useEffect(() => {
-    for (const n of nodes) {
-      if (n.position) savedPositions.current.set(n.id, n.position);
-    }
-  }, [nodes]);
-}