stellavault 0.1.0 → 0.2.1

package/packages/core/tests/search-integration.test.ts

@@ -1,139 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { createSqliteVecStore } from '../src/store/sqlite-vec.js';
-import { createSearchEngine } from '../src/search/index.js';
-import type { VectorStore } from '../src/store/types.js';
-import type { Embedder } from '../src/indexer/embedder.js';
-
-const DIMS = 4;
-
-// 고정 벡터를 반환하는 테스트용 embedder
-function createMockEmbedder(): Embedder {
-  return {
-    modelName: 'test-mock',
-    dimensions: DIMS,
-    embed: async (text: string) => {
-      // 간단한 결정적 벡터 생성: 텍스트 길이 기반
-      const len = text.length;
-      return [len % 3 / 3, len % 5 / 5, len % 7 / 7, len % 11 / 11];
-    },
-    embedBatch: async (texts: string[]) => {
-      return Promise.all(texts.map(t => {
-        const len = t.length;
-        return [len % 3 / 3, len % 5 / 5, len % 7 / 7, len % 11 / 11];
-      }));
-    },
-  };
-}
-
-let store: VectorStore;
-let embedder: Embedder;
-
-beforeEach(async () => {
-  store = createSqliteVecStore(':memory:', DIMS);
-  await store.initialize();
-  embedder = createMockEmbedder();
-
-  // 테스트 문서 3개 삽입
-  await store.upsertDocument({
-    id: 'doc-react', filePath: 'react-patterns.md', title: 'React 상태관리 패턴',
-    content: 'React 상태관리 패턴에 대한 종합 가이드', frontmatter: {},
-    tags: ['react', 'frontend'], lastModified: '2026-01-01', contentHash: 'r1',
-  });
-  await store.upsertChunks([{
-    id: 'doc-react#0', documentId: 'doc-react',
-    content: 'React useState useReducer 패턴 비교 분석',
-    heading: 'React 상태관리', startLine: 1, endLine: 5, tokenCount: 10,
-    embedding: [0.9, 0.1, 0.2, 0.1],
-  }]);
-
-  await store.upsertDocument({
-    id: 'doc-auth', filePath: 'auth-design.md', title: 'OAuth 인증 설계',
-    content: 'OAuth 2.0 인증 흐름 설계 문서', frontmatter: {},
-    tags: ['auth', 'security'], lastModified: '2026-01-02', contentHash: 'a1',
-  });
-  await store.upsertChunks([{
-    id: 'doc-auth#0', documentId: 'doc-auth',
-    content: 'OAuth 2.0 Authorization Code Flow with PKCE',
-    heading: 'OAuth 인증', startLine: 1, endLine: 5, tokenCount: 8,
-    embedding: [0.1, 0.9, 0.1, 0.2],
-  }]);
-
-  await store.upsertDocument({
-    id: 'doc-deploy', filePath: 'deploy-lessons.md', title: '배포 실패 교훈',
-    content: '프로덕션 배포 중 발생한 장애 회고', frontmatter: {},
-    tags: ['devops', 'lessons'], lastModified: '2026-01-03', contentHash: 'd1',
-  });
-  await store.upsertChunks([{
-    id: 'doc-deploy#0', documentId: 'doc-deploy',
-    content: '배포 실패 롤백 전략과 카나리 배포 교훈',
-    heading: '배포 교훈', startLine: 1, endLine: 5, tokenCount: 12,
-    embedding: [0.2, 0.1, 0.9, 0.1],
-  }]);
-});
-
-afterEach(async () => {
-  await store.close();
-});
-
-describe('Search Integration (BM25 + Semantic + RRF)', () => {
-  it('자연어 쿼리로 결과 반환', async () => {
-    const engine = createSearchEngine({ store, embedder });
-    const results = await engine.search({ query: 'React 상태관리', limit: 5 });
-
-    expect(results.length).toBeGreaterThan(0);
-    // 각 결과에 필수 필드 존재
-    for (const r of results) {
-      expect(r.chunk).toBeDefined();
-      expect(r.document).toBeDefined();
-      expect(r.score).toBeGreaterThan(0);
-      expect(r.highlights).toBeDefined();
-    }
-  });
-
-  it('태그 필터링 동작', async () => {
-    const engine = createSearchEngine({ store, embedder });
-    const results = await engine.search({
-      query: 'React 상태관리 OAuth 배포',
-      limit: 10,
-      tags: ['auth'],
-    });
-
-    // auth 태그가 있는 문서만 반환
-    for (const r of results) {
-      expect(r.document.tags).toContain('auth');
-    }
-  });
-
-  it('limit 제한 동작', async () => {
-    const engine = createSearchEngine({ store, embedder });
-    const results = await engine.search({ query: 'React OAuth 배포', limit: 1 });
-    expect(results.length).toBeLessThanOrEqual(1);
-  });
-
-  it('빈 쿼리도 에러 없이 처리', async () => {
-    const engine = createSearchEngine({ store, embedder });
-    const results = await engine.search({ query: '', limit: 5 });
-    expect(Array.isArray(results)).toBe(true);
-  });
-
-  it('결과에 highlights 포함', async () => {
-    const engine = createSearchEngine({ store, embedder });
-    const results = await engine.search({ query: 'React', limit: 5 });
-
-    const withHighlights = results.filter(r => r.highlights.length > 0);
-    // BM25가 매칭하면 highlights가 있어야 함
-    if (results.length > 0) {
-      expect(withHighlights.length).toBeGreaterThanOrEqual(0);
-    }
-  });
-
-  it('존재하지 않는 태그 필터 시 빈 결과', async () => {
-    const engine = createSearchEngine({ store, embedder });
-    const results = await engine.search({
-      query: 'React',
-      limit: 10,
-      tags: ['nonexistent-tag'],
-    });
-    expect(results).toEqual([]);
-  });
-});

package/packages/core/tests/store.test.ts

@@ -1,80 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { createSqliteVecStore } from '../src/store/sqlite-vec.js';
-import type { VectorStore } from '../src/store/types.js';
-
-let store: VectorStore;
-
-beforeEach(async () => {
-  store = createSqliteVecStore(':memory:', 4); // 4차원 (테스트용)
-  await store.initialize();
-});
-
-afterEach(async () => {
-  await store.close();
-});
-
-describe('VectorStore', () => {
-  it('초기 상태 비어있음', async () => {
-    const stats = await store.getStats();
-    expect(stats.documentCount).toBe(0);
-    expect(stats.chunkCount).toBe(0);
-  });
-
-  it('document + chunk upsert 및 조회', async () => {
-    await store.upsertDocument({
-      id: 'doc1', filePath: 'test.md', title: 'Test', content: 'Hello',
-      frontmatter: {}, tags: ['test'], lastModified: '2026-01-01', contentHash: 'abc',
-    });
-    await store.upsertChunks([{
-      id: 'doc1#0', documentId: 'doc1', content: 'Hello world',
-      heading: 'Test', startLine: 1, endLine: 2, tokenCount: 3,
-      embedding: [0.1, 0.2, 0.3, 0.4],
-    }]);
-
-    const doc = await store.getDocument('doc1');
-    expect(doc).not.toBeNull();
-    expect(doc!.title).toBe('Test');
-
-    const chunk = await store.getChunk('doc1#0');
-    expect(chunk).not.toBeNull();
-    expect(chunk!.content).toBe('Hello world');
-
-    const stats = await store.getStats();
-    expect(stats.documentCount).toBe(1);
-    expect(stats.chunkCount).toBe(1);
-  });
-
-  it('semantic search', async () => {
-    await store.upsertDocument({
-      id: 'doc1', filePath: 'a.md', title: 'A', content: 'A',
-      frontmatter: {}, tags: [], lastModified: '2026-01-01', contentHash: 'a',
-    });
-    await store.upsertChunks([{
-      id: 'doc1#0', documentId: 'doc1', content: 'Content A',
-      heading: 'A', startLine: 1, endLine: 1, tokenCount: 2,
-      embedding: [1.0, 0.0, 0.0, 0.0],
-    }]);
-
-    const results = await store.searchSemantic([1.0, 0.0, 0.0, 0.0], 5);
-    expect(results.length).toBe(1);
-    expect(results[0].chunkId).toBe('doc1#0');
-    expect(results[0].score).toBeGreaterThan(0);
-  });
-
-  it('deleteByDocumentId', async () => {
-    await store.upsertDocument({
-      id: 'doc1', filePath: 'a.md', title: 'A', content: 'A',
-      frontmatter: {}, tags: [], lastModified: '2026-01-01', contentHash: 'a',
-    });
-    await store.upsertChunks([{
-      id: 'doc1#0', documentId: 'doc1', content: 'Content',
-      heading: 'A', startLine: 1, endLine: 1, tokenCount: 1,
-      embedding: [0.1, 0.2, 0.3, 0.4],
-    }]);
-
-    await store.deleteByDocumentId('doc1');
-    expect(await store.getDocument('doc1')).toBeNull();
-    const stats = await store.getStats();
-    expect(stats.chunkCount).toBe(0);
-  });
-});

package/packages/graph/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Evan Knowledge Hub — 3D Knowledge Graph</title>
-    <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body, #root { width: 100%; height: 100%; overflow: hidden; }
-      body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0f; color: #e0e0e0; }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/packages/graph/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@stellavault/graph",
-  "version": "0.1.0",
-  "description": "Stellavault — 3D Neural Knowledge Graph Visualization",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@mediapipe/camera_utils": "^0.3.1675466862",
-    "@mediapipe/drawing_utils": "^0.3.1675466124",
-    "@mediapipe/hands": "^0.4.1675469240",
-    "@react-three/drei": "^10.0.0",
-    "@react-three/fiber": "^9.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-markdown": "^10.0.0",
-    "three": "^0.170.0",
-    "zustand": "^5.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@types/three": "^0.170.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "typescript": "^5.7.0",
-    "vite": "^6.0.0"
-  }
-}

package/packages/graph/src/App.tsx

@@ -1,7 +0,0 @@
-import { Layout } from './components/Layout.js';
-import { useGraph } from './hooks/useGraph.js';
-
-export function App() {
-  useGraph(); // 그래프 데이터 자동 로딩
-  return <Layout />;
-}

package/packages/graph/src/api/client.ts

@@ -1,39 +0,0 @@
-// Design Ref: §2.2 — API-UI 통신 (REST HTTP)
-
-const BASE = '/api';
-
-export async function fetchGraph() {
-  const res = await fetch(`${BASE}/graph`);
-  if (!res.ok) throw new Error(`Graph API error: ${res.status}`);
-  return res.json();
-}
-
-export async function fetchSearch(query: string, limit = 10) {
-  const res = await fetch(`${BASE}/search?q=${encodeURIComponent(query)}&limit=${limit}`);
-  if (!res.ok) throw new Error(`Search API error: ${res.status}`);
-  return res.json();
-}
-
-export async function fetchDocument(id: string) {
-  const res = await fetch(`${BASE}/document/${encodeURIComponent(id)}`);
-  if (!res.ok) throw new Error(`Document API error: ${res.status}`);
-  return res.json();
-}
-
-export async function fetchStats() {
-  const res = await fetch(`${BASE}/stats`);
-  if (!res.ok) throw new Error(`Stats API error: ${res.status}`);
-  return res.json();
-}
-
-export async function fetchHealth() {
-  const res = await fetch(`${BASE}/health`);
-  if (!res.ok) throw new Error(`Health API error: ${res.status}`);
-  return res.json();
-}
-
-export async function fetchEmbed(apiUrl: string, max = 200) {
-  const res = await fetch(`${apiUrl}/api/embed?max=${max}`);
-  if (!res.ok) throw new Error(`Embed API error: ${res.status}`);
-  return res.json();
-}

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

@@ -1,73 +0,0 @@
-// 클러스터 필터 — zustand store 기반
-
-import { useState } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export function ClusterFilter() {
-  const clusters = useGraphStore((s) => s.clusters);
-  const hiddenClusters = useGraphStore((s) => s.hiddenClusters);
-  const toggleHiddenCluster = useGraphStore((s) => s.toggleHiddenCluster);
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const [open, setOpen] = useState(false);
-
-  if (clusters.length === 0) return null;
-
-  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',
-        }}
-      >
-        Clusters {hiddenClusters.size > 0 ? `(${clusters.length - hiddenClusters.size}/${clusters.length})` : ''}
-      </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)',
-        }}>
-          {[...clusters]
-            .sort((a, b) => b.nodeCount - a.nodeCount)
-            .map((c) => (
-            <label
-              key={c.id}
-              style={{
-                display: 'flex', alignItems: 'center', gap: '8px',
-                padding: '4px 6px', borderRadius: '4px', cursor: 'pointer',
-                opacity: hiddenClusters.has(c.id) ? 0.3 : 1,
-                fontSize: '11px', color: isDark ? '#aab' : '#444',
-              }}
-            >
-              <div style={{
-                width: '10px', height: '10px', borderRadius: '50%',
-                background: hiddenClusters.has(c.id) ? '#333' : c.color,
-                flexShrink: 0,
-              }} />
-              <span style={{ flex: 1 }}>{c.label}</span>
-              <span style={{ color: '#556', fontSize: '10px' }}>{c.nodeCount}</span>
-              <input
-                type="checkbox"
-                checked={!hiddenClusters.has(c.id)}
-                onChange={() => toggleHiddenCluster(c.id)}
-                style={{ accentColor: c.color }}
-              />
-            </label>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,232 +0,0 @@
-// Design Ref: §3 — 별자리 뷰
-// Design Ref: §8 — LOD 확장 (universe/constellation/note 3단계)
-// 줌아웃(>800) → universe: 별자리 강조, 줌인(<300) → note: 개별 노드
-
-import { useMemo, useRef } from 'react';
-import { useFrame, useThree } from '@react-three/fiber';
-import { Html } from '@react-three/drei';
-import * as THREE from 'three';
-import { useGraphStore } from '../stores/graph-store.js';
-import { buildConstellations, type ConstellationData } from '../lib/constellation.js';
-import { useConstellationLOD } from '../hooks/useConstellationLOD.js';
-
-function darkenHex(hex: string, factor: number): string {
-  const c = hex.replace('#', '');
-  const r = Math.round(parseInt(c.slice(0, 2), 16) * factor);
-  const g = Math.round(parseInt(c.slice(2, 4), 16) * factor);
-  const b = Math.round(parseInt(c.slice(4, 6), 16) * factor);
-  return `rgb(${r},${g},${b})`;
-}
-
-export function ConstellationView() {
-  const nodes = useGraphStore((s) => s.nodes);
-  const clusters = useGraphStore((s) => s.clusters);
-  const theme = useGraphStore((s) => s.theme);
-  const isLight = theme === 'light';
-  const showConstellation = useGraphStore((s) => s.showConstellation);
-
-  if (!showConstellation) return null;
-  const groupRef = useRef<THREE.Group>(null);
-  const { constellationOpacity } = useConstellationLOD();
-  const opacityRef = useRef(0);
-
-  // 별자리 데이터 계산 (노드/클러스터 변경 시에만)
-  const data: ConstellationData = useMemo(() => {
-    if (nodes.length === 0 || clusters.length === 0) return { lines: [], labels: [] };
-    return buildConstellations(nodes, clusters);
-  }, [nodes, clusters]);
-
-  // 별자리 라인 geometry
-  const lineGeometries = useMemo(() => {
-    const geoMap = new Map<number, THREE.BufferGeometry>();
-
-    // 클러스터별로 라인 그룹화
-    const byCluster = new Map<number, number[]>();
-    for (const line of data.lines) {
-      if (!byCluster.has(line.clusterId)) byCluster.set(line.clusterId, []);
-      const arr = byCluster.get(line.clusterId)!;
-      arr.push(line.from[0], line.from[1], line.from[2]);
-      arr.push(line.to[0], line.to[1], line.to[2]);
-    }
-
-    for (const [cId, positions] of byCluster) {
-      const geo = new THREE.BufferGeometry();
-      geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
-      geoMap.set(cId, geo);
-    }
-
-    return geoMap;
-  }, [data]);
-
-  const highlightedNodeIds = useGraphStore((s) => s.highlightedNodeIds);
-  const hoveredNodeId = useGraphStore((s) => s.hoveredNodeId);
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-  const hasInteraction = highlightedNodeIds.size > 0 || !!hoveredNodeId || !!selectedNodeId;
-
-  // LOD + 상호작용 상태에 따라 별자리 표시
-  useFrame(() => {
-    const group = groupRef.current;
-    if (!group) return;
-
-    // 상호작용 중이면 별자리를 대폭 페이드 (활성 노드에 집중)
-    let targetOpacity = constellationOpacity;
-    if (hasInteraction) {
-      targetOpacity = isLight ? 0.03 : constellationOpacity * 0.15;
-    }
-
-    opacityRef.current += (targetOpacity - opacityRef.current) * 0.08;
-    const opacity = opacityRef.current;
-
-    group.visible = opacity > 0.01;
-
-    group.traverse((child) => {
-      if ((child as THREE.LineSegments).isLineSegments) {
-        const mat = (child as THREE.LineSegments).material as THREE.LineBasicMaterial;
-        mat.opacity = isLight ? opacity * 0.6 : opacity * 0.4;
-      }
-    });
-  });
-
-  if (data.lines.length === 0) return null;
-
-  // 클러스터 컬러 맵
-  const colorMap = new Map(clusters.map(c => [c.id, c.color]));
-
-  return (
-    <group ref={groupRef}>
-      {/* 별자리 라인 — 은은한 클러스터 컬러 */}
-      {[...lineGeometries.entries()].map(([cId, geo]) => (
-        <lineSegments key={cId} geometry={geo}>
-          <lineBasicMaterial
-            color={isLight ? '#b0b8c8' : (colorMap.get(cId) ?? '#6688ff')}
-            transparent
-            opacity={isLight ? 0.35 : 0.12}
-            depthWrite={false}
-            blending={isLight ? THREE.NormalBlending : THREE.AdditiveBlending}
-          />
-        </lineSegments>
-      ))}
-
-      {/* 별자리 라벨 */}
-      {data.labels.map((label) => (
-        <ConstellationLabel
-          key={label.clusterId}
-          position={label.position}
-          text={label.text}
-          color={label.color}
-          clusterId={label.clusterId}
-          opacityRef={opacityRef}
-        />
-      ))}
-    </group>
-  );
-}
-
-function ConstellationLabel({ position, text, color, clusterId, opacityRef }: {
-  position: [number, number, number];
-  text: string;
-  color: string;
-  clusterId: number;
-  opacityRef: React.RefObject<number>;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const { camera } = useThree();
-  const highlightedNodeIds = useGraphStore((s) => s.highlightedNodeIds);
-  const nodes = useGraphStore((s) => s.nodes);
-  const themeVal = useGraphStore((s) => s.theme);
-  const isLightLabel = themeVal === 'light';
-
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-
-  // 이 클러스터가 활성 상태인지: 하이라이트 중이거나, 선택된 노드가 이 클러스터에 속함
-  const isActiveCluster =
-    (highlightedNodeIds.size > 0 && nodes.some(n => n.clusterId === clusterId && highlightedNodeIds.has(n.id))) ||
-    (selectedNodeId && nodes.some(n => n.id === selectedNodeId && n.clusterId === clusterId));
-
-  useFrame(() => {
-    if (ref.current) {
-      // 활성 클러스터 라벨은 줌인해도 항상 보임
-      const opacity = isActiveCluster ? 1 : (opacityRef.current ?? 0);
-      ref.current.style.opacity = String(opacity);
-    }
-  });
-
-  const handleClick = () => {
-    const state = useGraphStore.getState();
-    const clusterNodeIds = state.nodes
-      .filter(n => n.clusterId === clusterId)
-      .map(n => n.id);
-
-    // 이미 이 클러스터가 하이라이트 중이면 해제 (토글)
-    const alreadyActive = clusterNodeIds.length > 0 &&
-      clusterNodeIds.every(id => state.highlightedNodeIds.has(id));
-
-    if (alreadyActive) {
-      state.setHighlightedNodes([]);
-      return;
-    }
-
-    state.setHighlightedNodes(clusterNodeIds);
-
-    // OrbitControls target을 별자리 중심으로 이동
-    const controls = (window as any).__sv_controls?.current;
-    if (controls) {
-      const target = new THREE.Vector3(...position);
-      const startTarget = controls.target.clone();
-      const startPos = controls.object.position.clone();
-      const dir = startPos.clone().sub(target).normalize();
-      const endPos = target.clone().add(dir.multiplyScalar(350));
-
-      let t = 0;
-      function animate() {
-        t += 0.025;
-        if (t > 1) t = 1;
-        const ease = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-
-        controls.target.lerpVectors(startTarget, target, ease);
-        controls.object.position.lerpVectors(startPos, endPos, ease);
-        controls.update();
-
-        if (t < 1) requestAnimationFrame(animate);
-      }
-      requestAnimationFrame(animate);
-    }
-  };
-
-  return (
-    <Html position={position} center>
-      <div
-        ref={ref}
-        onClick={handleClick}
-        style={{
-          fontSize: isLightLabel ? '13px' : '14px',
-          fontWeight: isLightLabel ? 800 : 700,
-          color: isLightLabel ? darkenHex(color, 0.5) : color,
-          textShadow: isLightLabel
-            ? '1px 1px 0 rgba(255,255,255,0.9), -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9), -1px 1px 0 rgba(255,255,255,0.9)'
-            : `0 0 12px ${color}, 0 0 24px ${color}40`,
-          letterSpacing: '1.5px',
-          textTransform: 'uppercase',
-          whiteSpace: 'nowrap',
-          opacity: 0,
-          transition: 'none',
-          cursor: 'pointer',
-          userSelect: 'none',
-        }}
-        onMouseEnter={(e) => {
-          const darkColor = isLightLabel ? darkenHex(color, 0.3) : color;
-          (e.target as HTMLElement).style.textShadow = isLightLabel
-            ? `0 0 4px ${darkColor}, 1px 1px 0 rgba(255,255,255,0.9), -1px -1px 0 rgba(255,255,255,0.9)`
-            : `0 0 20px ${color}, 0 0 40px ${color}`;
-        }}
-        onMouseLeave={(e) => {
-          (e.target as HTMLElement).style.textShadow = isLightLabel
-            ? '1px 1px 0 rgba(255,255,255,0.9), -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9), -1px 1px 0 rgba(255,255,255,0.9)'
-            : `0 0 12px ${color}, 0 0 24px ${color}40`;
-        }}
-      >
-        {text}
-      </div>
-    </Html>
-  );
-}