@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/mind-map-dnd.js.bak

@@ -0,0 +1,434 @@
+// 파일 이름: mind-map-dnd.js
+// MindMap 드래그 앤 드롭 처리 (플러그인 레지스트리 기반 + 브라우저 이미지 드래그 강화)
+window.MindMapDnD = (function () {
+
+    if (!window.MindMapFileRegistry) {
+        window.MindMapFileRegistry = [];
+    }
+
+    function registerCoreHandlers() {
+        if (window.MindMapFileRegistry.some(h => h.name === 'CorePDF')) return;
+        
+        window.MindMapFileRegistry.push({
+            name: 'CorePDF',
+            priority: 5,
+            check: (file) => file.type === 'application/pdf',
+            getType: () => 'pdf'
+        });
+        console.log('[MindMapDnD] Core file handlers registered');
+    }
+    registerCoreHandlers();
+
+ const eventHandlers = new WeakMap();
+ const GRID_SNAP = 10;
+
+ function getBoundHandlers(module) {
+ if (!eventHandlers.has(module)) {
+ eventHandlers.set(module, {
+ boundOnDragOver: onDragOver.bind(null, module),
+ boundOnDragLeave: onDragLeave.bind(null, module),
+ boundOnDrop: onDrop.bind(null, module)
+ });
+ }
+ return eventHandlers.get(module);
+ }
+
+ function onDragOver(module, e) {
+ e.preventDefault();
+ e.stopPropagation();
+ e.dataTransfer.dropEffect = 'copy';
+    return false;
+    }
+
+    async function handleBrowserImageDrop(module, e, imageUrl) {
+        const mouse = {
+            x: (e.clientX / module.container.clientWidth) * 2 - 1,
+            y: -(e.clientY / module.container.clientHeight) * 2 + 1
+        };
+        const vfov = (module.camera.fov * Math.PI) / 180;
+        const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+        const viewWidth = viewHeight * module.camera.aspect;
+        const worldX = module.camera.position.x + (mouse.x * viewWidth) / 2;
+        const worldY = module.camera.position.y + (mouse.y * viewHeight) / 2;
+
+        const tempId = `temp_browser_${Date.now()}`;
+        const placeholderNode = {
+            TempId: tempId,
+            ContentType: 'image',
+            FileName: 'Web Image',
+            X: module.snapToGrid(worldX),
+            Y: module.snapToGrid(worldY),
+            Width: 300,
+            Height: 200,
+            IsLoading: true
+        };
+
+        try {
+            const actualNodeIdsMap = await module.dotNetHelper.invokeMethodAsync('AddFileNodesFromJs', [placeholderNode]);
+            const actualId = actualNodeIdsMap[tempId];
+            if (!actualId) return;
+
+            const finalUrl = await fetchImageAsBlobUrl(imageUrl);
+
+            const { width, height } = await new Promise((resolve) => {
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                img.onload = () => {
+                    const TARGET_WIDTH = 400;
+                    const aspectRatio = (img.naturalHeight > 0 && img.naturalWidth > 0)
+                        ? img.naturalHeight / img.naturalWidth
+                        : 0.75;
+                    const targetHeight = TARGET_WIDTH * aspectRatio;
+                    resolve({
+                        width: Math.round(TARGET_WIDTH / GRID_SNAP) * GRID_SNAP,
+                        height: Math.round(targetHeight / GRID_SNAP) * GRID_SNAP
+                    });
+                };
+                img.onerror = () => {
+                    console.warn('[MindMapDnD] Failed to measure browser image size.');
+                    resolve({ width: 300, height: 200 });
+                };
+                img.src = finalUrl;
+            });
+
+            await module.dotNetHelper.invokeMethodAsync('UpdateMultipleFileNodeDetails', [{
+                NodeId: actualId,
+                FileUrl: finalUrl,
+                Width: width,
+                Height: height
+            }]);
+
+            console.log('[MindMapDnD] Browser image dropped and processed successfully.');
+        } catch (err) {
+            console.error('[MindMapDnD] Failed to process browser image drop:', err);
+        }
+    }
+
+    function onDragLeave(module, e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    function extractImageUrl(dataTransfer) {
+        if (!dataTransfer) return null;
+        const html = dataTransfer.getData('text/html');
+        if (html) {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const img = doc.querySelector('img');
+            if (img && img.src) return img.src;
+        }
+        const uri = dataTransfer.getData('text/uri-list');
+        if (uri && /\.(jpg|jpeg|png|gif|webp)$/i.test(uri)) {
+            return uri;
+        }
+        return null;
+    }
+
+    async function fetchImageAsBlobUrl(url) {
+        try {
+            const response = await fetch(url, { mode: 'cors' });
+            if (!response.ok) throw new Error('Network response was not ok');
+            const blob = await response.blob();
+            return URL.createObjectURL(blob);
+        } catch (e) {
+            console.warn('[MindMapDnD] CORS fetch failed, using raw URL. (Canvas tainting may occur)', e);
+            return url;
+        }
+    }
+
+    async function onDrop(module, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!module.dotNetHelper) return false;
+
+        const dataTransfer = e.dataTransfer;
+        if (!dataTransfer) return false;
+
+        dataTransfer.dropEffect = 'copy';
+ 
+ // ▼▼▼ [프로파일링] 전체 프로세스 시간 측정 시작 ▼▼▼
+ console.time('[DnD] Total Drop Process');
+ // ▲▲▲ [프로파일링] ▲▲▲
+
+        const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+
+        if (files.length === 0) {
+            const imageUrl = extractImageUrl(e.dataTransfer);
+            if (imageUrl) {
+                console.log(`[MindMapDnD] Detected browser image drop: ${imageUrl}`);
+                await handleBrowserImageDrop(module, e, imageUrl);
+                return false;
+            }
+        }
+
+        // ▼▼▼ [수정] 레지스트리 기반 파일 필터링 ▼▼▼
+ const filesToProcess = [];
+
+ for (const file of files) {
+     let matchedType = null;
+
+     // 레지스트리 정렬 (priority 낮을수록 먼저)
+     const sortedRegistry = [...window.MindMapFileRegistry].sort((a, b) => 
+         (a.priority ?? 50) - (b.priority ?? 50)
+     );
+
+     // 등록된 핸들러들을 순회하며 매치되는 첫 번째 타입 사용
+     for (const handler of sortedRegistry) {
+         if (handler.check(file)) {
+             matchedType = handler.getType(file);
+             console.log(`[MindMapDnD] File '${file.name}' matched handler '${handler.name}' -> type: '${matchedType}'`);
+             break;
+         }
+     }
+
+     if (matchedType) {
+         filesToProcess.push({ file, type: matchedType });
+     } else {
+         console.warn(`[MindMapDnD] File '${file.name}' - no handler found, skipping`);
+     }
+ }
+
+ if (filesToProcess.length === 0) {
+     console.log('[MindMapDnD] No files matched any handler');
+     return false;
+ }
+ // ▲▲▲ [수정] ▲▲▲
+
+ // 드롭 위치의 월드 좌표 계산
+ const mouse = {
+ x: (e.clientX / module.container.clientWidth) * 2 - 1,
+ y: -(e.clientY / module.container.clientHeight) * 2 + 1
+ };
+ const vfov = (module.camera.fov * Math.PI) / 180;
+ const viewHeight = 2 * Math.tan(vfov / 2) * module.camera.position.z;
+ const viewWidth = viewHeight * module.camera.aspect;
+ const worldX = module.camera.position.x + (mouse.x * viewWidth) / 2;
+ const worldY = module.camera.position.y + (mouse.y * viewHeight) / 2;
+
+ // ▼▼▼ [수정] 플레이스홀더 생성 (타입별 크기) ▼▼▼
+ const placeholderNodes = filesToProcess.map(({ file, type }, index) => {
+     const tempId = `temp_${Date.now()}_${index}`;
+     
+     // 타입별 기본 크기 설정
+     let nodeWidth, nodeHeight;
+     switch (type) {
+         case 'image':
+             nodeWidth = 300;
+             nodeHeight = 200;
+             break;
+         case 'pdf':
+             nodeWidth = 400;
+             nodeHeight = 56;
+             break;
+         case 'text':
+             nodeWidth = 500;
+             nodeHeight = 300;
+             break;
+         case 'directory':
+             nodeWidth = 400;
+             nodeHeight = 200;
+             break;
+         default:
+             nodeWidth = 400;
+             nodeHeight = 200;
+     }
+
+     return {
+         TempId: tempId,
+         ContentType: type,
+         FileName: file.name,
+         X: module.snapToGrid(worldX + index * 20),
+         Y: module.snapToGrid(worldY - index * 20),
+         Width: nodeWidth,
+         Height: nodeHeight,
+         IsLoading: true
+     };
+ });
+ // ▲▲▲ [수정] ▲▲▲
+
+ // ▼▼▼ [프로파일링] C# AddFileNodesFromJs 시간 측정 ▼▼▼
+ console.time('[DnD] 1. C# AddFileNodesFromJs');
+ // ▲▲▲ [프로파일링] ▲▲▲
+ const actualNodeIdsMap = await module.dotNetHelper.invokeMethodAsync('AddFileNodesFromJs', placeholderNodes);
+ // ▼▼▼ [프로파일링] ▼▼▼
+ console.timeEnd('[DnD] 1. C# AddFileNodesFromJs');
+ // ▲▲▲ [프로파일링] ▲▲▲
+
+ (async () => {
+ // ▼▼▼ [프로파일링] 병렬 파일 처리 시간 측정 ▼▼▼
+ console.time('[DnD] 2. Parallel File Processing (All)');
+ // ▲▲▲ [프로파일링] ▲▲▲
+ 
+ // ▼▼▼ [수정] 타입별 파일 처리 로직 ▼▼▼
+ const processingPromises = filesToProcess.map(async ({ file, type }, i) => {
+ const placeholder = placeholderNodes[i];
+ const actualId = actualNodeIdsMap[placeholder.TempId];
+ if (!actualId) return null;
+
+ const objectUrl = URL.createObjectURL(file);
+
+ switch (type) {
+     case 'image': {
+         console.time(`[DnD] 2a. Get Image Size - ${placeholder.FileName}`);
+         try {
+             const { width, height } = await new Promise((resolve, reject) => {
+                 const img = new Image();
+                 img.onload = () => {
+                     const TARGET_WIDTH = 400;
+                     const aspectRatio = (img.naturalHeight > 0 && img.naturalWidth > 0)
+                         ? img.naturalHeight / img.naturalWidth
+                         : 0.75;
+                     const targetHeight = TARGET_WIDTH * aspectRatio;
+                     resolve({
+                         width: Math.round(TARGET_WIDTH / GRID_SNAP) * GRID_SNAP,
+                         height: Math.round(targetHeight / GRID_SNAP) * GRID_SNAP
+                     });
+                 };
+                 img.onerror = reject;
+                 img.src = objectUrl;
+             });
+             console.timeEnd(`[DnD] 2a. Get Image Size - ${placeholder.FileName}`);
+             return {
+                 NodeId: actualId,
+                 FileUrl: objectUrl,
+                 Width: width,
+                 Height: height
+             };
+         } catch (err) {
+             console.timeEnd(`[DnD] 2a. Get Image Size - ${placeholder.FileName}`);
+             console.warn(`[DnD] Image load failed - ${placeholder.FileName}:`, err);
+             return {
+                 NodeId: actualId,
+                 FileUrl: '',
+                 Width: 300,
+                 Height: 200
+             };
+         }
+     }
+     case 'text': {
+         console.time(`[DnD] 2b. Read Text File - ${placeholder.FileName}`);
+         try {
+             // ▼▼▼ [디버깅] 파일 읽기 시작 ▼▼▼
+             console.log(`[DnD] Starting to read text file: ${placeholder.FileName}, actualId: ${actualId}`);
+             // ▲▲▲ [디버깅] ▲▲▲
+             
+             const textContent = await file.text();
+             
+             console.timeEnd(`[DnD] 2b. Read Text File - ${placeholder.FileName}`);
+             
+             // ▼▼▼ [디버깅] 파일 읽기 성공 ▼▼▼
+             console.log(`[DnD] Successfully read ${textContent.length} chars from ${placeholder.FileName}`);
+             // ▲▲▲ [디버깅] ▲▲▲
+             
+             // ▼▼▼ [디버깅] C# 메서드 호출 직전 ▼▼▼
+             console.log(`[DnD] About to call UpdateNodeContent with nodeId: ${actualId}, contentLength: ${textContent.length}`);
+             // ▲▲▲ [디버깅] ▲▲▲
+             
+             // 텍스트는 별도로 업데이트 (URL 대신 내용 저장)
+             await module.dotNetHelper.invokeMethodAsync('UpdateNodeContent', actualId, textContent);
+             
+             // ▼▼▼ [디버깅] C# 메서드 호출 성공 ▼▼▼
+             console.log(`[DnD] UpdateNodeContent completed for nodeId: ${actualId}`);
+             // ▲▲▲ [디버깅] ▲▲▲
+             
+             // ▼▼▼ [핵심 수정] 화면 갱신 요청 추가 ▼▼▼
+             // 이 줄이 없어서 텍스처가 '로딩 중' 상태에서 멈춰 있었습니다.
+             if (window.mindMap) {
+                 // 로컬 3D 뷰어에게 "이 노드 내용이 바뀌었으니 다시 그려라"고 명령
+                 await window.mindMap.updateNodeContent(actualId, textContent);
+                 console.log(`[DnD] Triggered local view update for node ${actualId}`);
+             }
+             // ▲▲▲ [핵심 수정] ▲▲▲
+             
+             return null; // 배치 업데이트에서 제외
+         } catch (err) {
+             console.timeEnd(`[DnD] 2b. Read Text File - ${placeholder.FileName}`);
+             // ▼▼▼ [디버깅] 오류 상세 로그 ▼▼▼
+             console.error(`[DnD] Text processing FAILED for ${placeholder.FileName}:`, err);
+             console.error(`[DnD] Error Details:`, {
+                 name: err.name,
+                 message: err.message,
+                 stack: err.stack
+             });
+             // ▲▲▲ [디버깅] ▲▲▲
+             return null;
+         }
+     }
+     case 'pdf':
+     default: {
+         return {
+             NodeId: actualId,
+             FileUrl: objectUrl,
+             Width: 400,
+             Height: 56
+         };
+     }
+ }
+ });
+ // ▲▲▲ [수정] ▲▲▲
+
+ const results = await Promise.allSettled(processingPromises);
+ // ▼▼▼ [프로파일링] ▼▼▼
+ console.timeEnd('[DnD] 2. Parallel File Processing (All)');
+ // ▲▲▲ [프로파일링] ▲▲▲
+ 
+ const successfulUpdates = results
+ .filter(res => res.status === 'fulfilled' && res.value !== null)
+ .map(res => res.value);
+ 
+ const failedCount = results.filter(res => res.status === 'rejected' || res.value === null).length;
+ console.log(`[MindMapDnD] File processing completed: ${successfulUpdates.length} succeeded, ${failedCount} failed.`);
+
+ if (successfulUpdates.length > 0) {
+ // ▼▼▼ [프로파일링] C# 일괄 업데이트 시간 측정 ▼▼▼
+ console.time('[DnD] 3. C# UpdateMultipleFileNodeDetails');
+ // ▲▲▲ [프로파일링] ▲▲▲
+ try {
+ await module.dotNetHelper.invokeMethodAsync('UpdateMultipleFileNodeDetails', successfulUpdates);
+ // ▼▼▼ [프로파일링] ▼▼▼
+ console.timeEnd('[DnD] 3. C# UpdateMultipleFileNodeDetails');
+ console.log(`[MindMapDnD] Batch update sent to C#: ${successfulUpdates.length} nodes.`);
+ // ▲▲▲ [프로파일링] ▲▲▲
+ } catch (error) {
+ // ▼▼▼ [프로파일링] ▼▼▼
+ console.timeEnd('[DnD] 3. C# UpdateMultipleFileNodeDetails');
+ // ▲▲▲ [프로파일링] ▲▲▲
+ console.error('[MindMapDnD] Batch update failed:', error);
+ }
+ }
+ })();
+
+ return false;
+ }
+
+ return {
+ addEventListeners: function (moduleInstance) {
+ const handlers = getBoundHandlers(moduleInstance);
+ if (moduleInstance.cssRenderer && moduleInstance.cssRenderer.domElement) {
+ moduleInstance.cssRenderer.domElement.addEventListener('dragover', handlers.boundOnDragOver);
+ moduleInstance.cssRenderer.domElement.addEventListener('dragleave', handlers.boundOnDragLeave);
+ moduleInstance.cssRenderer.domElement.addEventListener('drop', handlers.boundOnDrop);
+ } else if (moduleInstance.renderer && moduleInstance.renderer.domElement) {
+ moduleInstance.renderer.domElement.addEventListener('dragover', handlers.boundOnDragOver);
+ moduleInstance.renderer.domElement.addEventListener('dragleave', handlers.boundOnDragLeave);
+ moduleInstance.renderer.domElement.addEventListener('drop', handlers.boundOnDrop);
+ }
+ },
+ removeEventListeners: function (moduleInstance) {
+ const handlers = getBoundHandlers(moduleInstance);
+ if (moduleInstance.cssRenderer && moduleInstance.cssRenderer.domElement) {
+ moduleInstance.cssRenderer.domElement.removeEventListener('dragover', handlers.boundOnDragOver);
+ moduleInstance.cssRenderer.domElement.removeEventListener('dragleave', handlers.boundOnDragLeave);
+ moduleInstance.cssRenderer.domElement.removeEventListener('drop', handlers.boundOnDrop);
+ } else if (moduleInstance.renderer && moduleInstance.renderer.domElement) {
+ moduleInstance.renderer.domElement.removeEventListener('dragover', handlers.boundOnDragOver);
+ moduleInstance.renderer.domElement.removeEventListener('dragleave', handlers.boundOnDragLeave);
+ moduleInstance.renderer.domElement.removeEventListener('drop', handlers.boundOnDrop);
+ }
+ eventHandlers.delete(moduleInstance);
+ }
+ };
+})();
+
+console.log('✓ mind-map-dnd.js loaded (Registry-based, plugin-extensible).');

package/wwwroot/_content/MindExecution.Shared/js/mind-map-glow-shader.js

@@ -0,0 +1,260 @@
+// File: mind-map-glow-shader.js
+// [New] SDF-based glow shader - NO TEXTURES, pure GPU math
+// Memory usage: 0 MB (vs hundreds of MBs for per-node textures)
+(function () {
+    'use strict';
+
+    // Shared across all glow materials to avoid per-node time uniform updates.
+    const SHARED_TIME_UNIFORM = { value: 0.0 };
+
+    // ▼▼▼ SDF Glow Shader (Aspect Ratio Corrected) ▼▼▼
+    // Uses pixel-based coordinates for uniform glow thickness
+
+    const GLOW_VERTEX_SHADER = `
+        varying vec2 vUv;
+        varying vec2 vScale;  // Pass scale to fragment shader
+        
+        uniform vec2 meshScale;  // Actual mesh size in world units
+        
+        void main() {
+            vUv = uv;
+            vScale = meshScale;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+    `;
+
+    const GLOW_FRAGMENT_SHADER = `
+        precision highp float;
+        
+        varying vec2 vUv;
+        varying vec2 vScale;
+        
+        uniform vec3 color;
+        uniform float opacity;
+        uniform float glowPadding;
+        uniform float cornerRadius;
+        uniform float time; // ★ Animation time
+        
+        // ★ Simplex noise helper functions
+        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+        vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+        vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
+        
+        float snoise(vec2 v) {
+            const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+            vec2 i  = floor(v + dot(v, C.yy));
+            vec2 x0 = v - i + dot(i, C.xx);
+            vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+            vec4 x12 = x0.xyxy + C.xxzz;
+            x12.xy -= i1;
+            i = mod289(i);
+            vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+            vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+            m = m*m; m = m*m;
+            vec3 x = 2.0 * fract(p * C.www) - 1.0;
+            vec3 h = abs(x) - 0.5;
+            vec3 ox = floor(x + 0.5);
+            vec3 a0 = x - ox;
+            m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+            vec3 g;
+            g.x = a0.x * x0.x + h.x * x0.y;
+            g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+            return 130.0 * dot(m, g);
+        }
+        
+        // Signed Distance Function for rounded rectangle
+        float sdRoundedBox(vec2 p, vec2 b, float r) {
+            vec2 q = abs(p) - b + r;
+            return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+        }
+        
+        void main() {
+            vec2 p = (vUv - 0.5) * vScale;
+            vec2 boxSize = (vScale * 0.5) - glowPadding;
+            float dist = sdRoundedBox(p, boxSize, cornerRadius);
+
+            // Keep glow organic, but modulate intensity instead of distorting the edge.
+            float noiseFreq = 0.65;
+            float noiseSpeed = 0.045;
+            float rawNoise = snoise(vUv * noiseFreq + time * noiseSpeed);
+            float noiseMod = 1.0 + (rawNoise * 0.08);
+
+            float aa = max(fwidth(dist), 0.9);
+            float outsideDist = max(dist, 0.0);
+            float outerFade = 1.0 - smoothstep(0.0, glowPadding + aa * 2.0, outsideDist);
+            float innerFade = smoothstep(-aa * 2.0, aa * 2.0, dist);
+            float coreBoost = 1.0 - smoothstep(glowPadding * 0.22, glowPadding * 0.78, outsideDist);
+
+            float alpha = outerFade * innerFade;
+            alpha *= mix(0.62, 1.0, coreBoost);
+            alpha *= noiseMod;
+
+            // Corner glow naturally looks heavier; taper it a bit for a softer envelope.
+            vec2 q = abs(p) - boxSize;
+            float cornerAmount = 0.0;
+            if (q.x > 0.0 && q.y > 0.0) {
+                cornerAmount = smoothstep(0.0, glowPadding * 0.65, min(q.x, q.y));
+            }
+            float cornerFactor = 1.0 - cornerAmount * 0.35;
+            alpha *= cornerFactor;
+            alpha = clamp(alpha, 0.0, 1.0);
+
+            gl_FragColor = vec4(color, alpha * opacity); // No inversion needed now
+        }
+    `;
+
+    /**
+     * Create SDF glow material with pixel-based uniforms
+     * @param {Object} options - Configuration
+     * @returns {THREE.ShaderMaterial}
+     */
+    function createSDFGlowMaterial(options = {}) {
+        const defaultOptions = {
+            color: 0x000000,
+            opacity: 0.3,
+            meshScale: [100, 100],  // [width, height] in world units
+            glowPadding: 10,        // Padding in world units
+            cornerRadius: 12        // Corner radius in world units
+        };
+
+        const config = { ...defaultOptions, ...options };
+        const colorValue = typeof config.color === 'number'
+            ? new THREE.Color(config.color)
+            : config.color;
+
+        return new THREE.ShaderMaterial({
+            transparent: true,
+            depthWrite: false,
+            depthTest: true,
+            uniforms: {
+                color: { value: colorValue },
+                opacity: { value: config.opacity },
+                meshScale: { value: new THREE.Vector2(config.meshScale[0], config.meshScale[1]) },
+                glowPadding: { value: config.glowPadding },
+                cornerRadius: { value: config.cornerRadius },
+                time: SHARED_TIME_UNIFORM // ★ Shared animation time uniform
+            },
+            vertexShader: GLOW_VERTEX_SHADER,
+            fragmentShader: GLOW_FRAGMENT_SHADER
+        });
+    }
+
+    /**
+     * Create or update glow mesh using SDF shader (pixel-based)
+     * @param {number} width - Node width (world units)
+     * @param {number} height - Node height (world units)
+     * @param {boolean} isSelected - Selection state
+     * @param {string} contentType - Node content type ('image' = sharp corners)
+     * @param {THREE.Mesh} [existingMesh] - Existing glow mesh to update
+     * @returns {THREE.Mesh}
+     */
+    function createSDFGlowMesh(width, height, isSelected = false, contentType = 'text', existingMesh = null) {
+        const GLOW_PADDING = 12;
+        const GLOW_INSET = 4; // ★ Start glow 4px inside node edge to avoid border artifacts
+        const CORNER_RADIUS = 0; // No rounded corners
+
+        const glowWidth = width + GLOW_PADDING * 2 - GLOW_INSET * 2;
+        const glowHeight = height + GLOW_PADDING * 2 - GLOW_INSET * 2;
+
+        if (existingMesh) {
+            if (existingMesh.geometry) existingMesh.geometry.dispose();
+            existingMesh.geometry = new THREE.PlaneGeometry(glowWidth, glowHeight);
+
+            const uniforms = existingMesh.material.uniforms;
+            uniforms.color.value.setHex(isSelected ? 0x2563eb : 0xaaaaaa); // Blue or lighter gray
+            uniforms.opacity.value = isSelected ? 0.4 : 0.5; // Less intense selected glow
+            uniforms.meshScale.value.set(glowWidth, glowHeight);
+            uniforms.glowPadding.value = GLOW_PADDING - GLOW_INSET;
+            uniforms.cornerRadius.value = CORNER_RADIUS;
+
+            return existingMesh;
+        }
+
+        const geometry = new THREE.PlaneGeometry(glowWidth, glowHeight);
+        const material = createSDFGlowMaterial({
+            color: isSelected ? 0x2563eb : 0xaaaaaa, // Blue or lighter gray
+            opacity: isSelected ? 0.4 : 0.5, // Less intense selected glow
+            meshScale: [glowWidth, glowHeight],
+            glowPadding: GLOW_PADDING - GLOW_INSET,
+            cornerRadius: CORNER_RADIUS
+        });
+
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.name = 'glow';
+        mesh.raycast = () => { };
+        mesh.visible = false; // ★ 기본 숨김 - LOD 시스템이 카메라 거리에 따라 활성화
+
+        return mesh;
+    }
+
+    /**
+     * Update glow mesh for selection state change
+     * @param {THREE.Mesh} glowMesh - Existing glow mesh
+     * @param {boolean} isSelected - New selection state
+     */
+    function updateGlowSelection(glowMesh, isSelected) {
+        if (!glowMesh || !glowMesh.material || !glowMesh.material.uniforms) {
+            return;
+        }
+
+        const uniforms = glowMesh.material.uniforms;
+        uniforms.color.value.setHex(isSelected ? 0x2563eb : 0xaaaaaa); // Blue or lighter gray
+        uniforms.opacity.value = isSelected ? 0.4 : 0.5; // Less intense selected glow
+    }
+
+    /**
+     * Update glow mesh size (for node resize)
+     * @param {THREE.Mesh} glowMesh - Existing glow mesh  
+     * @param {number} nodeWidth - New node width
+     * @param {number} nodeHeight - New node height
+     * @param {string} contentType - Node content type ('image' = sharp corners)
+     */
+    function updateGlowSize(glowMesh, nodeWidth, nodeHeight, contentType = 'text') {
+        if (!glowMesh) return;
+
+        const GLOW_PADDING = 12;
+        const GLOW_INSET = 4; // ★ Start glow 4px inside node edge
+        const CORNER_RADIUS = 0; // No rounded corners
+        const glowWidth = nodeWidth + GLOW_PADDING * 2 - GLOW_INSET * 2;
+        const glowHeight = nodeHeight + GLOW_PADDING * 2 - GLOW_INSET * 2;
+
+        if (glowMesh.geometry) glowMesh.geometry.dispose();
+        glowMesh.geometry = new THREE.PlaneGeometry(glowWidth, glowHeight);
+
+        if (glowMesh.material.uniforms) {
+            glowMesh.material.uniforms.meshScale.value.set(glowWidth, glowHeight);
+            glowMesh.material.uniforms.glowPadding.value = GLOW_PADDING - GLOW_INSET;
+            glowMesh.material.uniforms.cornerRadius.value = CORNER_RADIUS;
+        }
+    }
+
+    /**
+     * Update time uniform for glow animation
+     * Call this from the render loop
+     * @param {THREE.Mesh} glowMesh - Glow mesh to update
+     * @param {number} time - Current time in seconds
+     */
+    function updateGlowTime(glowMesh, time) {
+        setTime(time);
+    }
+
+    /**
+     * Update shared time uniform for all glow meshes in O(1).
+     * @param {number} time - Current time in seconds
+     */
+    function setTime(time) {
+        SHARED_TIME_UNIFORM.value = time;
+    }
+
+    // Expose API globally
+    window.MindMapGlowShader = {
+        createSDFGlowMaterial,
+        createSDFGlowMesh,
+        updateGlowSelection,
+        updateGlowSize,
+        updateGlowTime, // Backward compatibility
+        setTime
+    };
+
+    console.log('✅ mind-map-glow-shader.js loaded (SDF Glow - No Textures!)');
+})();