@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/mind-map-texture-factory.js

@@ -0,0 +1,2260 @@
+(function () {
+    'use strict';
+
+    // ▼▼▼ [Perf] Debug logging - set to false in production ▼▼▼
+    const DEBUG = false;
+    const log = DEBUG ? console.log.bind(console) : () => { };
+    const warn = DEBUG ? console.warn.bind(console) : () => { };
+    // ▲▲▲ [Perf] ▲▲▲
+
+    // ★ [메모리 보호] 텍스처 최대 높이 제한
+    // 4000px 높이 노드 = 64MB+ 메모리 → 2048px로 제한 = 최대 ~8MB
+    const MAX_TEXTURE_HEIGHT = 2048;
+
+    const tailTextureCache = new Map();
+    const renderers = new Map();
+    const failedImageAssetCache = new Map();
+    const pendingImageAssetFetches = new Map();
+    let sharedMeasurer = null;
+
+    function getSharedMeasurer() {
+        if (sharedMeasurer) return sharedMeasurer;
+        sharedMeasurer = document.createElement('div');
+        Object.assign(sharedMeasurer.style, {
+            position: 'absolute',
+            visibility: 'hidden',
+            left: '-9999px',
+            top: '-9999px',
+            zIndex: '-1000',
+            pointerEvents: 'none',
+            margin: '0',
+            padding: '0',
+            boxSizing: 'border-box',
+            width: 'auto'
+        });
+        document.body.appendChild(sharedMeasurer);
+        return sharedMeasurer;
+    }
+
+    function isNonRefreshableLocalUrl(url) {
+        if (!url || typeof url !== 'string') return true;
+        const normalized = url.trim().toLowerCase();
+        return normalized.startsWith('blob:')
+            || normalized.startsWith('data:')
+            || normalized.startsWith('file:');
+    }
+
+    async function requestFreshNodeAssetUrl(nodeId, failedUrl, options = {}) {
+        if (!nodeId || options.skipAssetRefresh === true || isNonRefreshableLocalUrl(failedUrl)) {
+            return null;
+        }
+
+        const helper = window.dotNetHelper;
+        if (!helper || typeof helper.invokeMethodAsync !== 'function') {
+            return null;
+        }
+
+        try {
+            const resolveMethodName = options.preferOriginal === true
+                ? 'ResolveNodeAssetUrl'
+                : 'ResolveNodePreviewAssetUrl';
+            const refreshedUrl = await helper.invokeMethodAsync(resolveMethodName, String(nodeId));
+            const normalized = typeof refreshedUrl === 'string' ? refreshedUrl.trim() : '';
+            if (!normalized || normalized === String(failedUrl || '').trim()) {
+                return null;
+            }
+
+            return normalized;
+        } catch (error) {
+            warn('[TextureFactory] Failed to refresh node asset URL', nodeId, error);
+            return null;
+        }
+    }
+
+    function normalizeImageAssetUrl(url) {
+        if (typeof url !== 'string') {
+            return '';
+        }
+
+        const trimmed = url.trim();
+        if (!trimmed) {
+            return '';
+        }
+
+        return trimmed
+            .replace(/^http:\/\/localhost(?=:\d+\/assets\/)/i, 'http://127.0.0.1')
+            .replace(/^http:\/\/\[::1\](?=:\d+\/assets\/)/i, 'http://127.0.0.1');
+    }
+
+    function isLoopbackImageAssetUrl(url) {
+        return /^http:\/\/(?:127(?:\.\d{1,3}){3}|localhost|\[::1\])(?::\d+)?\/assets\//i
+            .test(String(url || '').trim());
+    }
+
+    function getCanonicalImageAssetKey(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized) {
+            return '';
+        }
+
+        const withoutQuery = normalized.split(/[?#]/)[0];
+        const lower = withoutQuery.toLowerCase();
+        const thumbsMarker = '/assets/thumbs/';
+        const assetsMarker = '/assets/';
+
+        if (lower.includes(thumbsMarker)) {
+            const assetName = withoutQuery.slice(lower.lastIndexOf(thumbsMarker) + thumbsMarker.length).split('/').pop() || '';
+            const dotIndex = assetName.lastIndexOf('.');
+            return (dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName).toLowerCase();
+        }
+
+        if (lower.includes(assetsMarker)) {
+            const assetName = withoutQuery.slice(lower.lastIndexOf(assetsMarker) + assetsMarker.length).split('/').pop() || '';
+            const dotIndex = assetName.lastIndexOf('.');
+            return (dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName).toLowerCase();
+        }
+
+        return withoutQuery.toLowerCase();
+    }
+
+    function areImageAssetUrlsEquivalent(leftUrl, rightUrl) {
+        const leftKey = getCanonicalImageAssetKey(leftUrl);
+        const rightKey = getCanonicalImageAssetKey(rightUrl);
+        if (leftKey && rightKey) {
+            return leftKey === rightKey;
+        }
+
+        return normalizeImageAssetUrl(leftUrl) === normalizeImageAssetUrl(rightUrl);
+    }
+
+    function isThumbnailAssetUrl(url) {
+        return normalizeImageAssetUrl(url).toLowerCase().includes('/assets/thumbs/');
+    }
+
+    function getImageSourceKind(url) {
+        return isThumbnailAssetUrl(url) ? 'thumbnail' : 'original';
+    }
+
+    function looksLikeExtensionlessAssetUrl(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized || isNonRefreshableLocalUrl(normalized) || isThumbnailAssetUrl(normalized)) {
+            return false;
+        }
+
+        const withoutQuery = normalized.split(/[?#]/)[0];
+        const lower = withoutQuery.toLowerCase();
+        if (!lower.includes('/assets/')) {
+            return false;
+        }
+
+        const lastSegment = withoutQuery.split('/').pop() || '';
+        return !!lastSegment && !lastSegment.includes('.');
+    }
+
+    function looksLikeRelativeAssetUrl(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized || isNonRefreshableLocalUrl(normalized)) {
+            return false;
+        }
+
+        const lower = normalized.toLowerCase();
+        if (lower.startsWith('/assets/')) {
+            return true;
+        }
+
+        return lower.startsWith('assets/');
+    }
+
+    function shouldResolveNodeAssetUrlBeforeFetch(url, options = {}) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized || isNonRefreshableLocalUrl(normalized)) {
+            return false;
+        }
+
+        if (looksLikeExtensionlessAssetUrl(normalized) || looksLikeRelativeAssetUrl(normalized)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    function getImageCacheNow() {
+        return typeof performance !== 'undefined' ? performance.now() : Date.now();
+    }
+
+    function getImageErrorStatus(error) {
+        const status = Number(error?.status || error?.errorStatus || error?.response?.status || 0);
+        return Number.isFinite(status) && status > 0 ? status : 0;
+    }
+
+    function getImageErrorRetryDelayMs(errorStatus) {
+        if (errorStatus === 404) {
+            return 60 * 1000;
+        }
+
+        return 15 * 1000;
+    }
+
+    function isImageContentType(value) {
+        const normalized = String(value || '').trim().toLowerCase();
+        return !normalized || normalized.startsWith('image/');
+    }
+
+    function createUnexpectedImageContentTypeError(targetUrl, contentType, blob = null) {
+        const error = new Error(`Unexpected image content-type: ${contentType || blob?.type || 'unknown'}`);
+        error.status = 415;
+        error.url = targetUrl;
+        error.contentType = contentType || '';
+        error.blobType = blob?.type || '';
+        error.blobSize = Number(blob?.size || 0);
+        return error;
+    }
+
+    async function readImageBlobFromResponse(response, targetUrl) {
+        const contentType = response.headers?.get?.('content-type') || '';
+        if (!isImageContentType(contentType)) {
+            throw createUnexpectedImageContentTypeError(targetUrl, contentType);
+        }
+
+        const blob = await response.blob();
+        if (!isImageContentType(blob?.type || contentType)) {
+            throw createUnexpectedImageContentTypeError(targetUrl, contentType, blob);
+        }
+
+        return blob;
+    }
+
+    function createCachedImageErrorEntry(url, resizeWidth, errorStatus, overrides = {}) {
+        const overrideFailedAt = Number(overrides?.failedAt || 0);
+        const now = Number.isFinite(overrideFailedAt) && overrideFailedAt > 0
+            ? overrideFailedAt
+            : getImageCacheNow();
+        const overrideRetryAfter = Number(overrides?.retryAfter || 0);
+        const retryAfter = Number.isFinite(overrideRetryAfter) && overrideRetryAfter > 0
+            ? overrideRetryAfter
+            : now + getImageErrorRetryDelayMs(errorStatus);
+        const errorCacheKey = String(overrides?.errorCacheKey || getImageAssetErrorCacheKey(url) || '');
+        return {
+            image: null,
+            url,
+            width: 0,
+            height: 0,
+            requestedWidth: resizeWidth,
+            sourceKind: getImageSourceKind(url),
+            assetKey: String(overrides?.assetKey || getCanonicalImageAssetKey(url) || ''),
+            errorCacheKey,
+            isError: true,
+            errorStatus,
+            failedAt: now,
+            retryAfter
+        };
+    }
+
+    function getImageAssetErrorCacheKey(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized) {
+            return '';
+        }
+
+        const sourceKind = getImageSourceKind(normalized);
+        const assetKey = getCanonicalImageAssetKey(normalized) || normalized;
+        return `${sourceKind}:${assetKey}`;
+    }
+
+    function getFailedImageAssetEntry(url) {
+        const cacheKey = getImageAssetErrorCacheKey(url);
+        if (!cacheKey) {
+            return null;
+        }
+
+        const failedEntry = failedImageAssetCache.get(cacheKey) || null;
+        if (!failedEntry) {
+            return null;
+        }
+
+        const retryAfter = Number(failedEntry.retryAfter || 0);
+        if (retryAfter <= getImageCacheNow()) {
+            failedImageAssetCache.delete(cacheKey);
+            return null;
+        }
+
+        return failedEntry;
+    }
+
+    function storeFailedImageAssetEntry(errorEntry) {
+        const cacheKey = String(errorEntry?.errorCacheKey || getImageAssetErrorCacheKey(errorEntry?.url || '') || '');
+        if (!cacheKey) {
+            return errorEntry;
+        }
+
+        failedImageAssetCache.set(cacheKey, {
+            url: String(errorEntry?.url || ''),
+            assetKey: String(errorEntry?.assetKey || ''),
+            sourceKind: String(errorEntry?.sourceKind || ''),
+            errorStatus: Number(errorEntry?.errorStatus || 0),
+            failedAt: Number(errorEntry?.failedAt || 0),
+            retryAfter: Number(errorEntry?.retryAfter || 0),
+            errorCacheKey: cacheKey
+        });
+        return errorEntry;
+    }
+
+    function clearFailedImageAssetEntry(url) {
+        const cacheKey = getImageAssetErrorCacheKey(url);
+        if (!cacheKey) {
+            return;
+        }
+
+        failedImageAssetCache.delete(cacheKey);
+    }
+
+    function createSyntheticImageFetchError(failedEntry, url) {
+        const status = Number(failedEntry?.errorStatus || 0);
+        const error = new Error(status > 0 ? `HTTP ${status}` : 'Cached image fetch failure');
+        error.status = status;
+        error.url = url;
+        error.retryAfter = Number(failedEntry?.retryAfter || 0);
+        error.failedAt = Number(failedEntry?.failedAt || 0);
+        error.assetKey = String(failedEntry?.assetKey || '');
+        error.errorCacheKey = String(failedEntry?.errorCacheKey || '');
+        return error;
+    }
+
+    function getRequestedResizeWidth(options = {}) {
+        const parsed = Number(options.resizeWidth);
+        if (Number.isFinite(parsed) && parsed > 0) {
+            return Math.max(1, Math.round(parsed));
+        }
+
+        return 512;
+    }
+
+    const IMAGE_CACHE_RECORD_FLAG = '__mindMapImageRecord';
+
+    function isImageCacheRecord(entry) {
+        return !!entry && entry[IMAGE_CACHE_RECORD_FLAG] === true;
+    }
+
+    function normalizeImageCacheVariantKind(value) {
+        if (String(value || '').toLowerCase() === 'thumbnail' || isThumbnailAssetUrl(value || '')) {
+            return 'thumbnail';
+        }
+        return 'original';
+    }
+
+    function createImageCacheRecord(existing = null) {
+        if (isImageCacheRecord(existing)) {
+            return existing;
+        }
+
+        const record = {
+            [IMAGE_CACHE_RECORD_FLAG]: true,
+            thumbnail: null,
+            original: null,
+            fullResError: null,
+            lastRequestedKind: '',
+            lastAccessAt: 0
+        };
+
+        if (existing && typeof existing === 'object') {
+            const variantKind = normalizeImageCacheVariantKind(
+                existing.sourceKind || existing.url || existing.src || existing.image?.src || ''
+            );
+            record[variantKind] = existing;
+            if (existing.fullResError) {
+                record.fullResError = { ...existing.fullResError };
+            }
+        }
+
+        return record;
+    }
+
+    function getImageCacheOriginalError(existing) {
+        if (!existing) return null;
+        if (isImageCacheRecord(existing)) {
+            return existing.fullResError
+                || (existing.original?.isError === true ? existing.original : null)
+                || existing.thumbnail?.fullResError
+                || existing.original?.fullResError
+                || null;
+        }
+        return existing.fullResError
+            || ((existing.isError === true && normalizeImageCacheVariantKind(existing.sourceKind || existing.url || '') === 'original') ? existing : null)
+            || null;
+    }
+
+    function setImageCacheOriginalError(existing, errorEntry) {
+        if (!existing || !errorEntry) return null;
+
+        const nextError = {
+            url: errorEntry.url,
+            assetKey: errorEntry.assetKey,
+            errorCacheKey: errorEntry.errorCacheKey,
+            errorStatus: errorEntry.errorStatus,
+            failedAt: errorEntry.failedAt,
+            retryAfter: errorEntry.retryAfter
+        };
+
+        if (isImageCacheRecord(existing)) {
+            existing.fullResError = nextError;
+            if (existing.thumbnail && existing.thumbnail.isError !== true) {
+                existing.thumbnail.fullResError = nextError;
+            }
+            if (existing.original && existing.original.isError !== true) {
+                existing.original.fullResError = nextError;
+            }
+            return existing;
+        }
+
+        existing.fullResError = nextError;
+        return existing;
+    }
+
+    function clearImageCacheOriginalError(existing) {
+        if (!existing) return;
+        if (isImageCacheRecord(existing)) {
+            existing.fullResError = null;
+            if (existing.thumbnail) existing.thumbnail.fullResError = null;
+            if (existing.original) existing.original.fullResError = null;
+            return;
+        }
+        existing.fullResError = null;
+    }
+
+    function getUsableCachedImageEntry(existing) {
+        if (!existing) return null;
+        if (isImageCacheRecord(existing)) {
+            if (existing.thumbnail?.isError !== true && existing.thumbnail?.image) return existing.thumbnail;
+            if (existing.original?.isError !== true && existing.original?.image) return existing.original;
+            return null;
+        }
+        return existing.isError !== true && existing.image ? existing : null;
+    }
+
+    function canReuseSingleCachedImageEntry(existing, requestedUrl, options = {}) {
+        if (!existing) {
+            return false;
+        }
+
+        const normalizedRequestedUrl = normalizeImageAssetUrl(requestedUrl);
+        if (!normalizedRequestedUrl) {
+            return false;
+        }
+
+        const normalizedOriginalUrl = normalizeImageAssetUrl(options.originalUrl);
+        const preferOriginal = options.preferOriginal === true;
+        const effectiveRequestedUrl = preferOriginal && normalizedOriginalUrl
+            ? normalizedOriginalUrl
+            : normalizedRequestedUrl;
+        const existingUrl = normalizeImageAssetUrl(existing.url || existing.src || existing.image?.src);
+        if (!existingUrl) {
+            return false;
+        }
+
+        if (existing.isError === true) {
+            const retryAfter = Number(existing.retryAfter || 0);
+            return areImageAssetUrlsEquivalent(existingUrl, effectiveRequestedUrl) && retryAfter > getImageCacheNow();
+        }
+
+        const existingSourceKind = existing.sourceKind || getImageSourceKind(existingUrl);
+        const requestedWidth = getRequestedResizeWidth(options);
+        const existingRequestedWidth = Number(existing.requestedWidth || 0);
+        const existingWidth = Number(existing.width || existing.image?.naturalWidth || existing.image?.width || 0);
+
+        const matchesRequestedUrl = existingUrl === normalizedRequestedUrl;
+        const matchesOriginalUrl = !!normalizedOriginalUrl && existingUrl === normalizedOriginalUrl;
+        const canUseOriginalForPreview =
+            options.allowOriginalReuseForPreview !== false &&
+            preferOriginal !== true &&
+            existingSourceKind === 'original' &&
+            (matchesOriginalUrl || isThumbnailAssetUrl(normalizedRequestedUrl));
+
+        if (!(matchesRequestedUrl || matchesOriginalUrl || canUseOriginalForPreview)) {
+            return false;
+        }
+
+        if (preferOriginal && existingSourceKind !== 'original') {
+            return false;
+        }
+
+        if (existingSourceKind === 'thumbnail') {
+            return true;
+        }
+
+        if (!(requestedWidth > 0)) {
+            return true;
+        }
+
+        return existingRequestedWidth >= requestedWidth || existingWidth >= (requestedWidth * 0.95);
+    }
+
+    function resolveCachedImageEntry(existing, requestedUrl, options = {}) {
+        if (!existing) {
+            return null;
+        }
+
+        if (!isImageCacheRecord(existing)) {
+            return canReuseSingleCachedImageEntry(existing, requestedUrl, options) ? existing : null;
+        }
+
+        const preferOriginal = options.preferOriginal === true;
+        const candidates = preferOriginal
+            ? [existing.original, existing.thumbnail]
+            : [existing.thumbnail, existing.original];
+
+        for (let i = 0; i < candidates.length; i++) {
+            const candidate = candidates[i];
+            if (canReuseSingleCachedImageEntry(candidate, requestedUrl, options)) {
+                existing.lastRequestedKind = normalizeImageCacheVariantKind(candidate?.sourceKind || candidate?.url || '');
+                existing.lastAccessAt = getImageCacheNow();
+                return candidate;
+            }
+        }
+
+        return null;
+    }
+
+    function storeImageCacheEntry(imageCache, nodeId, cachedEntry) {
+        const existing = imageCache.get(nodeId) || null;
+        const record = createImageCacheRecord(existing);
+        const variantKind = normalizeImageCacheVariantKind(cachedEntry?.sourceKind || cachedEntry?.url || '');
+        record.lastRequestedKind = variantKind;
+        record.lastAccessAt = getImageCacheNow();
+        record[variantKind] = cachedEntry;
+
+        if (variantKind === 'thumbnail') {
+            const originalError = getImageCacheOriginalError(record);
+            if (originalError && cachedEntry && cachedEntry.isError !== true) {
+                cachedEntry.fullResError = originalError;
+            }
+        } else if (cachedEntry?.isError === true) {
+            setImageCacheOriginalError(record, cachedEntry);
+        } else {
+            clearImageCacheOriginalError(record);
+        }
+
+        imageCache.set(nodeId, record);
+        return cachedEntry;
+    }
+
+    function getDeferredOriginalImageError(existing, requestedUrl, resizeWidth, options = {}) {
+        if (!existing || options.preferOriginal !== true) {
+            return null;
+        }
+
+        const fallbackEntry = getUsableCachedImageEntry(existing);
+        if (!fallbackEntry) {
+            return null;
+        }
+
+        const originalError = getImageCacheOriginalError(existing);
+        const retryAfter = Number(originalError?.retryAfter || 0);
+        if (!(retryAfter > getImageCacheNow())) {
+            return null;
+        }
+
+        const normalizedRequestedUrl = normalizeImageAssetUrl(requestedUrl);
+        const normalizedOriginalUrl = normalizeImageAssetUrl(options.originalUrl);
+        const effectiveRequestedUrl = normalizedOriginalUrl || normalizedRequestedUrl;
+        if (!effectiveRequestedUrl) {
+            return null;
+        }
+
+        if (!areImageAssetUrlsEquivalent(originalError?.url || '', effectiveRequestedUrl)) {
+            return null;
+        }
+
+        return createCachedImageErrorEntry(
+            effectiveRequestedUrl,
+            resizeWidth,
+            getImageErrorStatus(originalError),
+            {
+                failedAt: Number(originalError?.failedAt || 0),
+                retryAfter,
+                assetKey: String(originalError?.assetKey || getCanonicalImageAssetKey(effectiveRequestedUrl) || '')
+            }
+        );
+    }
+
+    function rememberOriginalImageError(existing, requestedUrl, resizeWidth, errorStatus, options = {}) {
+        if (!existing || options.preferOriginal !== true) {
+            return null;
+        }
+
+        const fallbackEntry = getUsableCachedImageEntry(existing);
+        if (!fallbackEntry) {
+            return null;
+        }
+
+        const errorEntry = createCachedImageErrorEntry(requestedUrl, resizeWidth, errorStatus);
+        setImageCacheOriginalError(existing, errorEntry);
+        return storeFailedImageAssetEntry(errorEntry);
+    }
+
+    function canReuseCachedImageEntry(existing, requestedUrl, options = {}) {
+        return resolveCachedImageEntry(existing, requestedUrl, options);
+    }
+
+    function preprocessMarkdown(text) {
+        if (!text) return '';
+        let processed = text.trim();
+        processed = processed.replace(/([).]*)(\*\*)(?=[가-힣])/g, '$1 $2');
+        processed = processed.replace(/([^\n])\n([\*]{1,2}[\d]+\.|[\d]+\.)/g, '$1\n\n$2');
+        processed = processed.replace(/([^\n])\n([-*] )/g, '$1\n\n$2');
+        return processed;
+    }
+
+    function getFileExtensionLower(pathOrName) {
+        if (!pathOrName || typeof pathOrName !== 'string') return '';
+        const normalized = pathOrName.split(/[?#]/)[0].trim();
+        const fileName = normalized.split(/[\\/]/).pop() || '';
+        const dot = fileName.lastIndexOf('.');
+        if (dot < 0 || dot === fileName.length - 1) return '';
+        return fileName.slice(dot).toLowerCase();
+    }
+
+    function withTypePrefix(label, prefix) {
+        if (!label) return '';
+        const trimmed = String(label).trim();
+        if (!trimmed) return '';
+        if (trimmed.startsWith(prefix)) return trimmed;
+        return `${prefix} ${trimmed}`;
+    }
+
+    function getDisplayPrompt(nodeModel, rawPrompt) {
+        const prompt = String(rawPrompt || '').trim();
+        if (!prompt) return '';
+
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        const sourceFilePath = String(nodeModel?.sourceFilePath ?? nodeModel?.SourceFilePath ?? '');
+        const ext = getFileExtensionLower(sourceFilePath) || getFileExtensionLower(prompt);
+        const defaultNotePrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+
+        // AI 노드는 현재 note 타입으로 생성되므로, 기본 노트명이 아닌 note 프롬프트는 ✨ 접두어로 구분
+        if (contentType === 'note' && !defaultNotePrompts.includes(prompt)) {
+            return withTypePrefix(prompt, '✨');
+        }
+
+        if (contentType === 'directory' || contentType === 'folder') {
+            return withTypePrefix(prompt, '📂');
+        }
+        if (contentType === 'code') {
+            return withTypePrefix(prompt, '</>');
+        }
+        if ((contentType === 'text' || contentType === 'markdown') && (ext === '.txt' || ext === '.md')) {
+            return withTypePrefix(prompt, '📄');
+        }
+        return prompt;
+    }
+
+    const ICON_SPINNER_SVG = `
+        <svg viewBox="0 0 512 512" style="width:1em; height:1em; fill:currentColor; vertical-align:-0.125em;">
+            <path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/>
+        </svg>`;
+
+    const BROKEN_IMAGE_ICON_SVG = `
+        <svg viewBox="0 0 24 24" style="width:100%; height:100%; fill:none; stroke:#9ca3af; stroke-width:2;">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>`;
+    const BROKEN_IMAGE_ICON_DATA_URL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(BROKEN_IMAGE_ICON_SVG)}`;
+    const brokenImageIcon = new Image();
+    brokenImageIcon.src = BROKEN_IMAGE_ICON_DATA_URL;
+
+    const MEMO_TEXTURE_THEMES = {
+        coral: { fill: '#fff1eb', border: '#f7b08d', accent: '#ff8052' },
+        amber: { fill: '#fff7df', border: '#f4d06f', accent: '#f59e0b' },
+        sun: { fill: '#fff9d7', border: '#e7d668', accent: '#ca8a04' },
+        sage: { fill: '#eef6e7', border: '#bed79f', accent: '#65a30d' },
+        mint: { fill: '#e8faf4', border: '#8fd8c1', accent: '#10b981' },
+        sky: { fill: '#e8f4ff', border: '#9dc7f7', accent: '#3b82f6' },
+        indigo: { fill: '#eef0ff', border: '#bcc2ff', accent: '#6366f1' },
+        violet: { fill: '#f5ecff', border: '#d6b8ff', accent: '#8b5cf6' },
+        rose: { fill: '#ffeef2', border: '#f5b2c2', accent: '#f43f5e' },
+        gray: { fill: '#f3f4f6', border: '#d1d5db', accent: '#6b7280' },
+        slate: { fill: '#f3f5f7', border: '#cbd5e1', accent: '#64748b' }
+    };
+
+    function getNodeMetadata(nodeModel) {
+        return nodeModel?.metadata || nodeModel?.Metadata || null;
+    }
+
+    function isAgentStyledMemoNode(nodeModel) {
+        const metadata = getNodeMetadata(nodeModel);
+        const semanticType = String(metadata?.SemanticType || metadata?.semanticType || '').trim();
+        return semanticType === 'MindCanvasAgent' || semanticType === 'AgentCommand';
+    }
+
+    function getMemoTextureTheme(nodeModel) {
+        const fallbackKey = 'coral';
+        const key = String(getNodeMetadata(nodeModel)?.memoColor || fallbackKey).toLowerCase();
+        return MEMO_TEXTURE_THEMES[key] || MEMO_TEXTURE_THEMES[fallbackKey];
+    }
+
+    function getTailColors(nodeModel, isSelected) {
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        if (contentType !== 'memo') {
+            const neutralSelectedStroke = ['text', 'note', 'code', 'markdown'].includes(contentType)
+                ? '#7b7ff2'
+                : '#7b7ff2';
+            const defaultStroke =
+                contentType === 'note' || contentType === 'image' || contentType === 'video'
+                    ? 'transparent'
+                    : 'rgba(55, 65, 81, 0.9)';
+            return {
+                fill: '#fefefe',
+                stroke: isSelected ? neutralSelectedStroke : defaultStroke
+            };
+        }
+
+        const theme = getMemoTextureTheme(nodeModel);
+        return {
+            fill: theme.fill,
+            stroke: isSelected ? theme.accent : theme.border
+        };
+    }
+
+    function createTailTexture(color, borderColor, zoomLevel, tailSize, isSelected) {
+        const key = `${color}-${borderColor}-${zoomLevel}-${isSelected}`;
+        if (tailTextureCache.has(key)) return tailTextureCache.get(key);
+
+        const borderWidth = (isSelected ? 4 : 3) * zoomLevel;
+        const tailHeight = tailSize * zoomLevel;
+        const tailWidth = tailHeight * 2;
+        const canvas = document.createElement('canvas');
+        canvas.width = tailWidth + borderWidth * 2;
+        canvas.height = tailHeight + borderWidth;
+        const ctx = canvas.getContext('2d');
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(borderWidth, borderWidth / 2);
+        ctx.lineTo(canvas.width / 2, canvas.height - borderWidth / 2);
+        ctx.lineTo(canvas.width - borderWidth, borderWidth / 2);
+        ctx.closePath();
+        ctx.fill();
+
+        const hasVisibleBorder = !!borderColor && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)' && borderColor !== 'rgba(0,0,0,0)';
+        if (hasVisibleBorder) {
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = borderWidth;
+            ctx.beginPath();
+            ctx.moveTo(borderWidth, borderWidth / 2);
+            ctx.lineTo(canvas.width / 2, canvas.height - borderWidth / 2);
+            ctx.lineTo(canvas.width - borderWidth, borderWidth / 2);
+            ctx.stroke();
+        }
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.generateMipmaps = true;
+        texture.minFilter = THREE.LinearMipmapLinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture._isShared = true; // Shared across nodes via cache
+        tailTextureCache.set(key, texture);
+        return texture;
+    }
+
+
+    function drawRoundedRect(ctx, x, y, width, height, radius) {
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.arcTo(x + width, y, x + width, y + radius, radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+        ctx.lineTo(x + radius, y + height);
+        ctx.arcTo(x, y + height, x, y + height - radius, radius); // Bottom-left corner (now rounded)
+        ctx.lineTo(x, y + radius);
+        ctx.arcTo(x, y, x + radius, y, radius);
+        ctx.closePath();
+    }
+
+    // ▼▼▼ [New] Fully rounded rect for image nodes (all corners rounded) ▼▼▼
+    function drawFullyRoundedRect(ctx, x, y, width, height, radius) {
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.arcTo(x + width, y, x + width, y + radius, radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+        ctx.lineTo(x + radius, y + height);
+        ctx.arcTo(x, y + height, x, y + height - radius, radius); // Bottom-left corner (now rounded)
+        ctx.lineTo(x, y + radius);
+        ctx.arcTo(x, y, x + radius, y, radius);
+        ctx.closePath();
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    function drawScrollbar(ctx, nodeModel, styleCanvasWidth, styleCanvasHeight, zoomLevel, isHovered = false) {
+        if (!nodeModel.maxScroll || nodeModel.maxScroll <= 1) return;
+
+        // ▼▼▼ [FIX] 슬림 스크롤바 - 너비와 패딩 축소 ▼▼▼
+        const scrollbarWidth = 4 * zoomLevel;   // 6 → 4 (더 슬림하게)
+        const scrollbarPadding = 2 * zoomLevel; // 4 → 2 (오른쪽 여백 최소화)
+        // ▲▲▲ [FIX] ▲▲▲
+
+        const trackColor = 'rgba(0, 0, 0, 0.05)';
+
+        const thumbColor = isHovered ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.25)';
+        const thumbRadius = 2 * zoomLevel; // 3 → 2 (슬림하게)
+        const minThumbHeight = 24 * zoomLevel;
+
+        const topMargin = (nodeModel.contentType === 'note' ? 20 : 16) * zoomLevel;
+        const bottomMargin = 16 * zoomLevel;
+
+        const trackX = styleCanvasWidth - scrollbarWidth - scrollbarPadding;
+        const trackY = topMargin;
+        const trackHeight = styleCanvasHeight - topMargin - bottomMargin;
+
+        if (trackHeight <= minThumbHeight) return;
+
+        ctx.fillStyle = trackColor;
+        drawRoundedRect(ctx, trackX, trackY, scrollbarWidth, trackHeight, thumbRadius);
+        ctx.fill();
+
+        const topPaddingContent = (nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel;
+        const bottomPaddingContent = 16 * zoomLevel;
+        const borderWidth = 3 * zoomLevel;
+        const visibleContentHeight = styleCanvasHeight - (topPaddingContent + borderWidth) - (bottomPaddingContent + borderWidth);
+
+        let totalContentHeight;
+        if (nodeModel.isChunkedText && nodeModel.totalContentHeight > 0) {
+            totalContentHeight = nodeModel.totalContentHeight * zoomLevel;
+        } else {
+            totalContentHeight = visibleContentHeight + (nodeModel.maxScroll * zoomLevel);
+        }
+
+        let thumbHeight = (visibleContentHeight / totalContentHeight) * trackHeight;
+        thumbHeight = Math.max(minThumbHeight, Math.min(trackHeight, thumbHeight));
+
+        const currentScroll = (nodeModel.scrollOffset || 0) * zoomLevel;
+        const maxScrollWorld = nodeModel.maxScroll * zoomLevel;
+
+        let scrollRatio = currentScroll / maxScrollWorld;
+        scrollRatio = Math.max(0, Math.min(1, isNaN(scrollRatio) ? 0 : scrollRatio));
+
+        const availableTrackSpace = trackHeight - thumbHeight;
+        const thumbY = trackY + (availableTrackSpace * scrollRatio);
+
+        ctx.fillStyle = thumbColor;
+        drawRoundedRect(ctx, trackX, thumbY, scrollbarWidth, thumbHeight, thumbRadius);
+        ctx.fill();
+    }
+
+    function getBodyColors(contentType, isSelected, nodeModel = null) {
+        const contentTypeLower = String(contentType || '').toLowerCase();
+        if (contentTypeLower === 'memo') {
+            const theme = getMemoTextureTheme(nodeModel);
+            return {
+                fill: theme.fill,
+                stroke: isSelected ? theme.accent : theme.border
+            };
+        }
+
+        const neutralSelectedStroke = ['text', 'note', 'code', 'markdown'].includes(contentTypeLower)
+            ? '#7b7ff2'
+            : '#7b7ff2';
+
+        return {
+            fill: '#fefefe',
+            stroke: isSelected ? neutralSelectedStroke : 'rgba(55, 65, 81, 0.9)'
+        };
+    }
+
+    function shouldDrawBodyStroke(contentType, isSelected, options = {}) {
+        if (options.skipBorder) {
+            return false;
+        }
+
+        const contentTypeLower = String(contentType || '').toLowerCase();
+        if (contentTypeLower === 'image') {
+            return false;
+        }
+
+        if (contentTypeLower === 'note') {
+            return false;
+        }
+
+        return true;
+    }
+
+    function drawNodeBodyBackground(ctx, canvasWidth, canvasHeight, zoomLevel, isSelected, contentType = 'text', nodeModel = null, options = {}) {
+        const radius = 0; // No rounded corners
+        const borderWidth = 3 * zoomLevel;
+        const halfBorder = borderWidth / 2;
+
+        const x = halfBorder;
+        const y = halfBorder;
+        const w = canvasWidth - borderWidth;
+        const h = canvasHeight - borderWidth;
+        const right = x + w;
+        const bottom = y + h;
+
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(right - radius, y);
+        ctx.quadraticCurveTo(right, y, right, y + radius);
+        ctx.lineTo(right, bottom - radius);
+        ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
+        ctx.lineTo(x + radius, bottom);
+        ctx.quadraticCurveTo(x, bottom, x, bottom - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
+
+        const { fill, stroke } = getBodyColors(contentType, isSelected, nodeModel);
+        ctx.fillStyle = fill;
+        ctx.fill();
+
+        if (shouldDrawBodyStroke(contentType, isSelected, options)) {
+            ctx.strokeStyle = stroke;
+            ctx.lineWidth = borderWidth;
+            ctx.stroke();
+        }
+    }
+
+    function drawNodeBodyOnCanvas(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected, options = {}) {
+        const { skipText = false, skipBorder = false } = options; // ★ Troika 사용 시 텍스트 렌더링 건너뛰기
+
+        drawNodeBodyBackground(ctx, canvasWidth, canvasHeight, zoomLevel, isSelected, nodeModel.contentType, nodeModel, { skipBorder });
+
+        // ★ skipText가 true면 배경만 그리고 텍스트는 건너뛰기 (Troika가 처리)
+        if (skipText) {
+            return;
+        }
+
+        ctx.save();
+
+        const BORDER_WIDTH = 3 * zoomLevel;
+        const CSS_PADDING = 16 * zoomLevel;
+        const totalPadding = CSS_PADDING + BORDER_WIDTH;
+        const topPadding = ((nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel) + BORDER_WIDTH;
+        const paddingBottom = 16 * zoomLevel;
+        const textWidth = canvasWidth - totalPadding * 2;
+        const lineHeight = 14 * zoomLevel * 1.5;
+        let currentY = topPadding;
+
+        ctx.textBaseline = 'top';
+        // 기본 Prompt 값들은 표시하지 않음
+        const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+        const rawPrompt = nodeModel.prompt ?? nodeModel.Prompt ?? '';
+        const nodePrompt = getDisplayPrompt(nodeModel, rawPrompt);
+        const nodeResponse = nodeModel.response ?? nodeModel.Response ?? '';
+        const shouldShowPrompt = rawPrompt && !defaultPrompts.includes(rawPrompt);
+        if (shouldShowPrompt) {
+            ctx.fillStyle = '#111827';
+            ctx.font = `bold ${14 * zoomLevel}px sans-serif`;
+            ctx.fillText(nodePrompt, totalPadding, currentY, textWidth);
+            currentY += 24 * zoomLevel;
+        }
+
+        ctx.fillStyle = '#1f2937';
+        ctx.font = `${14 * zoomLevel}px sans-serif`;
+        const lines = (nodeResponse || '').split('\n');
+        for (const line of lines) {
+            ctx.fillText(line, totalPadding, currentY, textWidth);
+            currentY += lineHeight;
+        }
+
+        ctx.restore();
+    }
+
+    function normalizeCachedImage(cachedImage) {
+        if (!cachedImage) return { image: null, width: 0, height: 0, isError: false };
+
+        const isError = cachedImage.isError === true;
+
+        if (cachedImage.image) {
+            const img = cachedImage.image;
+            const width = cachedImage.width || img.naturalWidth || img.width || 0;
+            const height = cachedImage.height || img.naturalHeight || img.height || 0;
+            return { image: img, width, height, isError };
+        }
+
+        const img = cachedImage;
+        const width = img.naturalWidth || img.width || 0;
+        const height = img.naturalHeight || img.height || 0;
+        return { image: img, width, height, isError };
+    }
+
+    function drawCachedImageBody(cachedImage, ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected) {
+        ctx.save();
+        // Use simple rect for sharp corners (no arcTo issues with radius=0)
+        ctx.beginPath();
+        ctx.rect(0, 0, canvasWidth, canvasHeight);
+        ctx.clip();
+        ctx.fillStyle = '#fefefe';
+        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+        const { image, width: imgWidth, height: imgHeight, isError } = normalizeCachedImage(cachedImage);
+
+        if (image && imgWidth > 0 && imgHeight > 0) {
+            const canvasAspect = canvasWidth / canvasHeight;
+            const imgAspect = imgWidth / imgHeight;
+            let sx = 0, sy = 0, sWidth = imgWidth, sHeight = imgHeight;
+            if (imgAspect > canvasAspect) {
+                sWidth = imgHeight * canvasAspect;
+                sx = (imgWidth - sWidth) / 2;
+            } else {
+                sHeight = imgWidth / canvasAspect;
+                sy = (imgHeight - sHeight) / 2;
+            }
+            ctx.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, canvasWidth, canvasHeight);
+        }
+        else if (isError) {
+            ctx.fillStyle = '#f3f4f6';
+            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+            ctx.fillStyle = '#9ca3af';
+            ctx.font = `bold ${16 * zoomLevel}px sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            const textY = canvasHeight * 0.55;
+            ctx.fillText('Image Not Found', canvasWidth / 2, textY);
+
+            if (brokenImageIcon.complete) {
+                const iconSize = Math.min(canvasWidth, canvasHeight) * 0.4;
+                ctx.drawImage(brokenImageIcon, (canvasWidth - iconSize) / 2, (canvasHeight - iconSize) / 2 - (8 * zoomLevel), iconSize, iconSize);
+            } else {
+                ctx.strokeStyle = '#9ca3af';
+                ctx.lineWidth = 2 * zoomLevel;
+                ctx.beginPath();
+                ctx.moveTo(canvasWidth * 0.3, canvasHeight * 0.3);
+                ctx.lineTo(canvasWidth * 0.7, canvasHeight * 0.7);
+                ctx.moveTo(canvasWidth * 0.7, canvasHeight * 0.3);
+                ctx.lineTo(canvasWidth * 0.3, canvasHeight * 0.7);
+                ctx.stroke();
+            }
+
+            ctx.strokeStyle = '#ef4444';
+            ctx.setLineDash([5 * zoomLevel, 5 * zoomLevel]);
+            ctx.lineWidth = 2 * zoomLevel;
+            ctx.strokeRect(0, 0, canvasWidth, canvasHeight);
+            ctx.setLineDash([]);
+        }
+        else {
+            ctx.fillStyle = '#f9fafb';
+            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+            ctx.fillStyle = '#6b7280';
+            ctx.font = `${14 * zoomLevel}px sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('Loading...', canvasWidth / 2, canvasHeight / 2);
+        }
+
+        const borderWidth = 3 * zoomLevel;
+        ctx.strokeStyle = 'transparent'; // Image nodes have no visible border
+        ctx.lineWidth = borderWidth;
+        // Sharp corners - use strokeRect instead of drawFullyRoundedRect
+        ctx.strokeRect(borderWidth / 2, borderWidth / 2, canvasWidth - borderWidth, canvasHeight - borderWidth);
+        ctx.restore();
+    }
+
+    function getMarkdownStyles(zoomLevel, contentType = 'text', options = {}) {
+        const z = zoomLevel;
+        const fontStack = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        const baseFontSize = 14 * z;
+        const baseLineHeight = 1.6;
+
+        // NOTE:
+        // Markdown is rasterized via SVG <foreignObject> -> Image(). In that path, native scrollbars are
+        // problematic (styling may be ignored, and interaction isn't meaningful on a texture anyway).
+        // We therefore always wrap long lines and avoid native horizontal scrollbars.
+        const preOverflowX = 'hidden';
+        const preWhiteSpace = 'pre-wrap';
+        const preOverflowWrap = 'anywhere';
+        const styles = `
+            div { color: #1f2937; line-height: ${baseLineHeight}; font-family: ${fontStack}; font-size: ${baseFontSize}px; margin: 0; padding: 0; text-align: left; }
+            p { margin: 0 0 ${11 * z}px 0; white-space: normal; }
+            h1 { font-size: ${Math.round(baseFontSize * 1.8)}px; font-weight: 700; margin: ${16 * z}px 0 ${8 * z}px 0; color: #111827; border-bottom: ${1 * z}px solid #eaecef; padding-bottom: ${5 * z}px; }
+            h2 { font-size: ${Math.round(baseFontSize * 1.4)}px; font-weight: 700; margin: ${14 * z}px 0 ${8 * z}px 0; color: #111827; border-bottom: ${1 * z}px solid #eaecef; padding-bottom: ${5 * z}px; }
+            h3, h4 { font-size: ${Math.round(baseFontSize * 1.2)}px; font-weight: 700; margin: ${12 * z}px 0 ${8 * z}px 0; color: #111827; }
+            ul, ol { margin: ${6 * z}px 0 ${14 * z}px ${20 * z}px; padding-left: ${8 * z}px; }
+            li { margin-bottom: ${4 * z}px; }
+            .response > *:first-child { margin-top: 0 !important; }
+            .response > *:last-child { margin-bottom: 0 !important; }
+            li:last-child { margin-bottom: 0 !important; }
+            strong, b { font-weight: 700; color: #111827; }
+            .prompt { font-weight: 700; color: #111827; margin: 0 0 ${8 * z}px 0; padding-bottom: 0; display: flex; align-items: center; font-size: ${baseFontSize}px; }
+            .icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: ${16 * z}px; height: ${16 * z}px; color: #4b5563; }
+            hr.node-separator { border: 0; border-top: ${1 * z}px solid #e5e7eb; margin: ${8 * z}px 0 ${12 * z}px 0; }
+            .thinking { color: #6b7280; font-style: italic; display: flex; align-items: center; gap: ${6 * z}px; }
+            .response { margin: 0; }
+            code { background-color: rgba(27,31,35,0.05); padding: ${2 * z}px ${4 * z}px; border-radius: ${3 * z}px; font-family: Consolas, 'Courier New', monospace; font-size: ${Math.round(baseFontSize * 0.85)}px; }
+            pre { background-color: #f6f8fa; padding: ${12 * z}px; border-radius: ${3 * z}px; overflow-x: ${preOverflowX}; margin: ${8 * z}px 0 ${12 * z}px 0; font-family: Consolas, 'Courier New', monospace; white-space: ${preWhiteSpace}; overflow-wrap: ${preOverflowWrap}; }
+            pre code { background-color: transparent; padding: 0; border-radius: 0; }
+
+            /* Scrollbar styling (best-effort)
+               - Some browsers ignore ::-webkit-scrollbar during SVG foreignObject rasterization.
+               - LOD path avoids native scrollbars entirely via overflow-x:hidden above.
+            */
+            pre { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) transparent; }
+            pre::-webkit-scrollbar { height: ${Math.max(2, 6 * z)}px; width: ${Math.max(2, 6 * z)}px; }
+            pre::-webkit-scrollbar-track { background: transparent; }
+            pre::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.28); border-radius: ${Math.max(2, 6 * z)}px; }
+            pre::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.42); }
+
+            blockquote { border-left: ${4 * z}px solid #dfe2e5; padding: 0 ${12 * z}px; margin: 0 0 ${12 * z}px 0; color: #6a737d; }
+            table { border-collapse: collapse; width: 100%; margin: ${8 * z}px 0 ${12 * z}px 0; font-size: ${13 * z}px; }
+            th, td { border: ${1 * z}px solid #d1d5db; padding: ${6 * z}px ${8 * z}px; text-align: left; }
+            th { background-color: #f3f4f6; font-weight: 600; color: #111827; }
+            tr:nth-child(even) { background-color: #f9fafb; }
+        `;
+        return { styles, fontStack };
+    }
+
+    function scopeCss(styles, scopeSelector) {
+        if (!scopeSelector) return styles;
+        return styles.split('\n').map(line => {
+            const trimmed = line.trim();
+            if (!trimmed || trimmed.startsWith('@') || !trimmed.includes('{')) return line;
+            const parts = line.split('{');
+            const selectors = parts[0].trim();
+            const rest = parts.slice(1).join('{');
+            const scopedSelectors = selectors
+                .split(',')
+                .map(s => `${scopeSelector} ${s.trim()}`)
+                .join(', ');
+            return line.replace(selectors, scopedSelectors);
+        }).join('\n');
+    }
+
+    function escapeHtml(value) {
+        return (value || '').replace(/[&<>\"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+    }
+
+    const ALLOWED_HTML_TAGS = new Set([
+        'div', 'span', 'p', 'br', 'hr', 'a', 'b', 'i', 'u', 's', 'em', 'strong', 'mark',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+        'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption', 'colgroup', 'col',
+        'pre', 'code', 'blockquote', 'q', 'cite',
+        'sub', 'sup', 'small', 'big', 'abbr', 'acronym', 'ins', 'del',
+        'input', 'label', 'button', 'select', 'option', 'textarea',
+        'figure', 'figcaption', 'article', 'section', 'aside', 'header', 'footer', 'nav', 'main',
+        'details', 'summary', 'time', 'address', 'wbr', 'kbd', 'samp', 'var', 'dfn'
+    ]);
+
+    function sanitizeHtml(html) {
+        if (!html) return '';
+
+        let sanitized = html
+            .replace(/<(script|iframe|object|embed|meta|link|style)[^>]*>[\s\S]*?<\/\1>/gi, '')
+            .replace(/<(script|iframe|object|embed|meta|link)[^>]*\/?>/gi, '');
+
+        sanitized = sanitized.replace(/<img[^>]*\/?>/gi, '');
+
+        sanitized = sanitized.replace(/<([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*)>/g, (match, tagName, attrs) => {
+            if (ALLOWED_HTML_TAGS.has(tagName.toLowerCase())) {
+                return match;
+            }
+            return `&lt;${tagName}${attrs ? ' ' + attrs : ''}&gt;`;
+        });
+
+        sanitized = sanitized.replace(/<\/([a-zA-Z][a-zA-Z0-9]*)>/g, (match, tagName) => {
+            if (ALLOWED_HTML_TAGS.has(tagName.toLowerCase())) {
+                return match;
+            }
+            return `&lt;/${tagName}&gt;`;
+        });
+
+        sanitized = sanitized
+            .replace(/<br\s*\/?>/gi, '<br/>')
+            .replace(/<hr\s*\/?>/gi, '<hr/>')
+            .replace(/<input([^>]*[^\/])>/gi, '<input$1 />');
+
+        sanitized = sanitized.replace(/\]\]>/g, ']]&gt;');
+
+        sanitized = sanitized.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '');
+
+        return sanitized;
+    }
+
+    function renderMarkdownToCanvasAsync(ctx, texture, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected, onComplete = null, options = {}) {
+        const hasMarked = typeof window !== 'undefined' && window.marked && typeof window.marked.parse === 'function';
+        const promptValue = nodeModel.prompt ?? nodeModel.Prompt ?? '';
+        const displayPromptValue = getDisplayPrompt(nodeModel, promptValue);
+        // 기본 Prompt 값들은 표시하지 않음
+        const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+        const shouldShowPrompt = promptValue && !defaultPrompts.includes(promptValue);
+        // C#에서 PascalCase (IsLoading)로 전달될 수 있으므로 둘 다 확인
+        const nodeIsLoading = nodeModel.isLoading ?? nodeModel.IsLoading ?? false;
+        const nodeResponse = nodeModel.response ?? nodeModel.Response ?? '';
+        const isLoadingState = nodeIsLoading && !nodeResponse;
+        // note 타입에서도 프롬프트 표시 (CSS3D와 동일하게)
+        const showPromptNow = shouldShowPrompt;
+        let htmlContent = '';
+
+        if (showPromptNow) {
+            htmlContent += `<div class="prompt">${escapeHtml(displayPromptValue)}</div>`;
+        }
+
+        if (isLoadingState) {
+            if (showPromptNow) {
+                htmlContent += '<hr class="node-separator" />';
+            }
+            htmlContent += `<div class="thinking">AI is generating a response... <span class="icon-wrapper">${ICON_SPINNER_SVG}</span></div>`;
+        } else if (nodeResponse) {
+            // Separator between prompt and response (for both text and note types)
+            if (shouldShowPrompt) {
+                htmlContent += '<hr class="node-separator" />';
+            }
+
+            if (nodeModel.isChunkedText) {
+                const contentToRender = nodeModel._visibleContent || nodeModel.response || '';
+                const escapedText = escapeHtml(contentToRender);
+
+                const chunkWhiteSpace = 'pre-wrap';
+                const chunkOverflowWrap = 'anywhere';
+                htmlContent += `<div class="response" style="font-family: 'Consolas', 'Monaco', 'Courier New', monospace; white-space: ${chunkWhiteSpace}; overflow-wrap: ${chunkOverflowWrap}; line-height: 1.5; font-size: ${14 * zoomLevel}px;">${escapedText}</div>`;
+
+                if (nodeModel.totalLineCount > 0 && (nodeModel.scrollOffset || 0) === 0) {
+                    htmlContent += `<div style="margin-top:12px; padding:8px; background:rgba(59,130,246,0.1); border-radius:4px; font-size:0.85em; color:#3b82f6; text-align:center;">
+                        Large file (${nodeModel.totalLineCount.toLocaleString()} lines) - Scroll to view more
+                    </div>`;
+                }
+            } else {
+                const processedResponse = preprocessMarkdown(nodeModel.response);
+
+                let parsed;
+                if (hasMarked) {
+                    try {
+                        const renderer = new window.marked.Renderer();
+
+                        renderer.code = function (codeOrObj, language, isEscaped) {
+                            const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                            const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : language;
+
+                            const escaped = escapeHtml(code || '');
+                            const langClass = lang ? ` class="language-${lang}"` : '';
+                            return `<pre><code${langClass}>${escaped}</code></pre>`;
+                        };
+
+                        renderer.codespan = function (codeOrObj) {
+                            const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                            return `<code>${escapeHtml(code || '')}</code>`;
+                        };
+
+                        parsed = window.marked.parse(processedResponse, {
+                            breaks: true,
+                            xhtml: true,
+                            renderer: renderer
+                        });
+                    } catch (e) {
+                        console.warn('[TextureFactory] marked.parse with custom renderer failed, using default:', e);
+                        parsed = window.marked.parse(processedResponse, { breaks: true, xhtml: true });
+                    }
+                } else {
+                    parsed = `<div style="white-space: pre-wrap;">${escapeHtml(processedResponse)}</div>`;
+                }
+
+                parsed = parsed.replace(/<br\s*\/?>/gi, '<br/>').replace(/<hr\s*\/?>/gi, '<hr/>');
+                parsed = sanitizeHtml(parsed);
+                htmlContent += `<div class="response">${parsed}</div>`;
+            }
+        } else if (nodeModel.isChunkedText && !nodeModel.response) {
+            htmlContent += `<div style="padding:16px; color:#6b7280; text-align:center;">
+                <span style="animation: pulse 1.5s infinite;">⏳</span> Loading...
+            </div>`;
+        }
+
+        const { styles, fontStack } = getMarkdownStyles(zoomLevel, nodeModel.contentType, options);
+        const BORDER_WIDTH = 3 * zoomLevel;
+        const CSS_PADDING = 16 * zoomLevel;
+        const totalPaddingX = CSS_PADDING + BORDER_WIDTH;
+        const cssTopPadding = (nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel;
+        const totalPaddingY = cssTopPadding + BORDER_WIDTH;
+        const paddingBottom = 16 * zoomLevel;
+        const textWidth = Math.max(1, canvasWidth - totalPaddingX * 2);
+        const textHeight = Math.max(1, canvasHeight - totalPaddingY - paddingBottom);
+
+        drawNodeBodyBackground(ctx, canvasWidth, canvasHeight, zoomLevel, isSelected, nodeModel.contentType, nodeModel, options);
+
+        const effectiveScrollOffset = nodeModel.isChunkedText && nodeModel._visibleScrollOffset !== undefined
+            ? nodeModel._visibleScrollOffset
+            : (nodeModel.scrollOffset || 0);
+
+        let svgString;
+
+        if (nodeModel.isChunkedText && promptValue) {
+            const headerHeight = 30 * zoomLevel;
+            const bodyHeight = Math.max(1, textHeight - headerHeight);
+
+            const headerHtml = `
+                <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; font-family:${fontStack}; font-size:${14 * zoomLevel}px; line-height:1.5; color:#1f2937;">
+                    <div class="prompt">${escapeHtml(displayPromptValue)}</div>
+                    <hr class="node-separator" />
+                </div>`;
+
+            const visibleText = nodeModel._visibleContent || nodeModel.response || '';
+            const bodyContent = visibleText ? escapeHtml(visibleText) : '<span style="color:#9ca3af;">Loading...</span>';
+            const bodyWhiteSpace = 'pre-wrap';
+            const bodyOverflowWrap = 'anywhere';
+            const bodyHtml = `
+                <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:auto; font-family:'Consolas', 'Monaco', 'Courier New', monospace; font-size:${14 * zoomLevel}px; line-height:1.5; color:#1f2937; white-space:${bodyWhiteSpace}; overflow-wrap:${bodyOverflowWrap}; transform:translateY(-${effectiveScrollOffset * zoomLevel}px);">
+                    ${bodyContent}
+                </div>`;
+
+            svgString = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="${canvasWidth}" height="${canvasHeight}">
+                    <defs>
+                        <style type="text/css"><![CDATA[
+                            ${styles}
+                        ]]></style>
+                    </defs>
+                    <!-- Fixed header -->
+                    <foreignObject x="${totalPaddingX}" y="${totalPaddingY}" width="${textWidth}" height="${headerHeight}">
+                        ${headerHtml}
+                    </foreignObject>
+                    <!-- Scrollable body -->
+                    <foreignObject x="${totalPaddingX}" y="${totalPaddingY + headerHeight}" width="${textWidth}" height="${bodyHeight}">
+                        ${bodyHtml}
+                    </foreignObject>
+                </svg>`;
+        } else {
+            const htmlBlock = `
+                <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:auto; font-family:${fontStack}; font-size:${14 * zoomLevel}px; line-height:1.5; color:#1f2937; overflow-wrap:break-word; transform:translateY(-${effectiveScrollOffset * zoomLevel}px);">
+                    ${htmlContent}
+                </div>`;
+
+            svgString = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="${canvasWidth}" height="${canvasHeight}">
+                    <defs>
+                        <style type="text/css"><![CDATA[
+                            ${styles}
+                        ]]></style>
+                    </defs>
+                    <foreignObject x="${totalPaddingX}" y="${totalPaddingY}" width="${textWidth}" height="${textHeight}">
+                        ${htmlBlock}
+                    </foreignObject>
+                </svg>`;
+        }
+
+        const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+        const img = new Image();
+
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0);
+            // ★ skipScrollbar 옵션이 true이면 스크롤바를 여기서 그리지 않음 (외부에서 별도 호출)
+            if (!options.skipScrollbar) {
+                drawScrollbar(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, nodeModel.isScrollbarHovered);
+            }
+            texture.needsUpdate = true;
+            if (onComplete) onComplete(true);
+        };
+
+        img.onerror = (err) => {
+            console.error('[TextureFactory] SVG render failed for node:', nodeModel.id);
+
+            try {
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(svgString, 'image/svg+xml');
+                const parseError = doc.querySelector('parsererror');
+
+                if (parseError) {
+                    console.error('[TextureFactory] SVG Parse Error:', parseError.textContent);
+                } else {
+                    console.error('[TextureFactory] SVG parsed OK but Image failed to load');
+                }
+            } catch (e) {
+                console.error('[TextureFactory] DOMParser error:', e);
+            }
+
+            console.error('[TextureFactory] HTML content (first 500 chars):', htmlContent.substring(0, 500));
+            console.error('[TextureFactory] HTML content (last 200 chars):', htmlContent.substring(Math.max(0, htmlContent.length - 200)));
+
+            drawNodeBodyOnCanvas(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected, options);
+            // ★ skipScrollbar 옵션 체크 (img.onload와 동일하게)
+            if (!options.skipScrollbar) {
+                drawScrollbar(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, nodeModel.isScrollbarHovered);
+            }
+            texture.needsUpdate = true;
+            if (onComplete) onComplete(false);
+        };
+
+        img.src = dataUrl;
+    }
+
+    // [LOD] Simplified Texture generation: Only Image nodes use textures now.
+    // Text/Note/Code nodes use CSS3D for near view and InstancedMesh(Lines) for far view.
+    async function createRenderedTextureAsync(module, nodeModel, isSelected, imageCache, qualityScale = 1.0) {
+        if (nodeModel.contentType === 'image') {
+            const zoomLevel = 2;
+            const styleW = (nodeModel.width || 400) * zoomLevel;
+            const styleH = (nodeModel.height || 200) * zoomLevel;
+
+            const canvas = document.createElement('canvas');
+            canvas.width = styleW;
+            canvas.height = styleH;
+            const ctx = canvas.getContext('2d');
+
+            // Draw image texture
+            // TODO: Ensure drawCachedImageBody is available or inline it
+            const cachedImage = imageCache ? imageCache.get(nodeModel.response) : null;
+            drawCachedImageBody(cachedImage, ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+
+            const texture = new THREE.CanvasTexture(canvas);
+            texture.colorSpace = THREE.SRGBColorSpace;
+            texture.generateMipmaps = true;
+            texture.minFilter = THREE.LinearMipmapLinearFilter;
+            texture.magFilter = THREE.LinearFilter;
+            texture.needsUpdate = true;
+            return texture;
+        }
+
+        // For other types, we don't generate textures anymore (CSS3D / InstancedMesh handles them)
+        return null;
+    }
+
+    async function measureHtmlHeightAsync(nodeModel, zoomLevel, canvasWidth, forcedHeight = null, maxHeight = 800) {
+        log(`[measureHtmlHeightAsync] ENTER - nodeId: ${nodeModel.id}, responseLen: ${nodeModel.response?.length || 0}`);
+
+        const hasMarked = typeof window !== 'undefined' && window.marked && typeof window.marked.parse === 'function';
+        const { styles, fontStack } = getMarkdownStyles(zoomLevel, nodeModel.contentType);
+        let htmlContent = '';
+
+        const promptValue = nodeModel.prompt ?? nodeModel.Prompt ?? '';
+        const displayPromptValue = getDisplayPrompt(nodeModel, promptValue);
+        // 기본 Prompt 값들은 표시하지 않음
+        const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+        const shouldShowPrompt = promptValue && !defaultPrompts.includes(promptValue);
+        // C#에서 PascalCase (IsLoading)로 전달될 수 있으므로 둘 다 확인
+        const nodeIsLoading = nodeModel.isLoading ?? nodeModel.IsLoading ?? false;
+        const nodeResponse = nodeModel.response ?? nodeModel.Response ?? '';
+        const nodeContentType = nodeModel.contentType ?? nodeModel.ContentType ?? 'text';
+        const isLoadingState = nodeIsLoading && !nodeResponse;
+        // note 타입에서도 프롬프트 표시 (CSS3D와 동일하게)
+        const showPromptNow = shouldShowPrompt;
+        if (showPromptNow) {
+            htmlContent += `<div class="prompt">${escapeHtml(displayPromptValue)}</div>`;
+        }
+
+        // Separator between prompt and response (for both text and note types)
+        if (showPromptNow && (nodeResponse || isLoadingState)) {
+            htmlContent += '<hr class="node-separator" />';
+        }
+
+        if (nodeResponse) {
+            log(`[measureHtmlHeightAsync] Step 1: Preprocessing markdown...`);
+            const processedResponse = preprocessMarkdown(nodeModel.response);
+            log(`[measureHtmlHeightAsync] Step 1: Done. Preprocessed length: ${processedResponse.length}`);
+
+            let parsed;
+            if (hasMarked) {
+                try {
+                    log(`[measureHtmlHeightAsync] Step 2: Parsing with marked...`);
+
+                    const renderer = new window.marked.Renderer();
+                    renderer.code = function (codeOrObj, language, isEscaped) {
+                        const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                        const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : language;
+                        const escaped = escapeHtml(code || '');
+                        const langClass = lang ? ` class="language-${lang}"` : '';
+                        return `<pre><code${langClass}>${escaped}</code></pre>`;
+                    };
+                    renderer.codespan = function (codeOrObj) {
+                        const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                        return `<code>${escapeHtml(code || '')}</code>`;
+                    };
+                    parsed = window.marked.parse(processedResponse, {
+                        breaks: true,
+                        xhtml: true,
+                        renderer: renderer
+                    });
+                    log(`[measureHtmlHeightAsync] Step 2: Marked parsing done. Length: ${parsed.length}`);
+                } catch (e) {
+                    console.warn(`[measureHtmlHeightAsync] Marked parse failed, using fallback`, e);
+                    parsed = window.marked.parse(processedResponse, { breaks: true, xhtml: true });
+                }
+            } else {
+                parsed = `<div style="white-space: pre-wrap;">${escapeHtml(processedResponse)}</div>`;
+            }
+
+            log(`[measureHtmlHeightAsync] Step 3: Sanitizing HTML...`);
+            parsed = sanitizeHtml(parsed);
+            log(`[measureHtmlHeightAsync] Step 3: Sanitizing done. Length: ${parsed.length}`);
+
+            htmlContent += `<div class="response">${parsed}</div>`;
+        } else if (nodeModel.isLoading) {
+            if (promptValue) {
+                htmlContent += '<hr class="node-separator" />';
+            }
+            htmlContent += `<div class=\"thinking\">AI is generating a response... <span class=\"icon-wrapper\">${ICON_SPINNER_SVG}</span></div>`;
+        } else {
+            htmlContent += '<div class="response">&nbsp;</div>';
+        }
+
+        log(`[measureHtmlHeightAsync] Step 4: Setting measurer innerHTML...`);
+        const measurer = getSharedMeasurer();
+        const scopeClass = 'mm-measure-root';
+        const scopedStyles = scopeCss(styles, `.${scopeClass}`);
+        const BORDER_WIDTH = 3 * zoomLevel;
+        const PADDING_X = 16 * zoomLevel;
+        const PADDING_BOTTOM = 16 * zoomLevel;
+        const PADDING_TOP = (nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel;
+        const totalHorizontalPadding = (PADDING_X + BORDER_WIDTH) * 2;
+
+        const totalVerticalPadding = PADDING_TOP + PADDING_BOTTOM + (BORDER_WIDTH * 2);
+        const contentWidth = Math.max(1, canvasWidth - totalHorizontalPadding);
+        measurer.style.width = `${contentWidth}px`;
+        measurer.style.fontFamily = fontStack;
+        measurer.style.fontSize = `${14 * zoomLevel}px`;
+        measurer.style.lineHeight = '1.5';
+        measurer.style.overflowWrap = 'break-word';
+        measurer.style.whiteSpace = 'normal';
+        measurer.style.overflow = 'hidden';
+        measurer.innerHTML = `<style>${scopedStyles}</style><div class="${scopeClass}">${htmlContent}</div>`;
+        log(`[measureHtmlHeightAsync] Step 4: innerHTML set. Total length: ${measurer.innerHTML.length}`);
+
+        log(`[measureHtmlHeightAsync] Step 5: Calling getBoundingClientRect...`);
+        const rect = measurer.getBoundingClientRect();
+        const contentHeight = Math.ceil(rect.height);
+        log(`[measureHtmlHeightAsync] Step 5: Done. contentHeight: ${contentHeight}`);
+
+        const totalRequiredHeight = contentHeight + totalVerticalPadding;
+
+        const MAX_HEIGHT = maxHeight * zoomLevel;
+        const MIN_HEIGHT = 60 * zoomLevel;
+
+        let visibleHeight;
+        if (forcedHeight !== null && forcedHeight > 0) {
+            visibleHeight = Math.max(forcedHeight, MIN_HEIGHT);
+        } else {
+            visibleHeight = Math.min(Math.max(totalRequiredHeight, MIN_HEIGHT), MAX_HEIGHT);
+        }
+
+        // ▼▼▼ [수정] 스크롤 끝에서 마지막 줄이 잘리지 않도록 여분 추가 ▼▼▼
+        // 콘텐츠 영역의 하단 패딩만큼 추가 스크롤 허용
+        const extraScrollMargin = PADDING_BOTTOM;
+        const maxScrollPx = Math.max(0, totalRequiredHeight - visibleHeight + extraScrollMargin);
+        // ▲▲▲ [수정] ▲▲▲
+
+        return {
+            height: Math.ceil(Math.max(60, visibleHeight / zoomLevel)),
+            maxScrollPx
+        };
+    }
+
+    /**
+     * [Optimization] Batch measure HTML heights to prevent DOM Layout Thrashing.
+     * Instead of N individual Write→Read cycles, this does 1 Write→1 Read cycle.
+     * @param {Array} contentsWithIds - Array of { id, content, maxWidth, zoomLevel, contentType }
+     * @returns {Object} Map of nodeId -> { height, maxScrollPx }
+     */
+    async function measureBatchHtmlHeights(contentsWithIds) {
+        if (!contentsWithIds || contentsWithIds.length === 0) return {};
+
+        const startTime = performance.now();
+        const measurer = getSharedMeasurer();
+        if (!measurer) return {};
+
+        const hasMarked = typeof window !== 'undefined' && window.marked && typeof window.marked.parse === 'function';
+        const results = {};
+
+        // 1. Prepare all HTML contents (CPU work, no DOM)
+        const preparedItems = contentsWithIds.map(item => {
+            const zoomLevel = item.zoomLevel || 2;
+            const contentType = item.contentType ?? item.ContentType ?? 'text';
+            const maxWidth = item.maxWidth || 800;
+            const { styles, fontStack } = getMarkdownStyles(zoomLevel, contentType);
+            const scopeClass = `mm-measure-root-${item.id}`;
+            const scopedStyles = scopeCss(styles, `.${scopeClass}`);
+
+            let htmlContent = '';
+            const promptValue = item.prompt ?? item.Prompt ?? '';
+            const sourceFilePath = item.sourceFilePath ?? item.SourceFilePath ?? '';
+            const displayPromptValue = getDisplayPrompt({ contentType, sourceFilePath }, promptValue);
+            const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+            const shouldShowPrompt = promptValue && !defaultPrompts.includes(promptValue);
+
+            if (shouldShowPrompt) {
+                htmlContent += `<div class="prompt">${escapeHtml(displayPromptValue)}</div>`;
+            }
+
+            if (item.content) {
+                if (shouldShowPrompt) {
+                    htmlContent += '<hr class="node-separator" />';
+                }
+
+                const processedResponse = preprocessMarkdown(item.content);
+                let parsed;
+
+                if (hasMarked) {
+                    try {
+                        const renderer = new window.marked.Renderer();
+                        renderer.code = function (codeOrObj, language) {
+                            const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                            const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : language;
+                            const escaped = escapeHtml(code || '');
+                            const langClass = lang ? ` class="language-${lang}"` : '';
+                            return `<pre><code${langClass}>${escaped}</code></pre>`;
+                        };
+                        renderer.codespan = function (codeOrObj) {
+                            const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                            return `<code>${escapeHtml(code || '')}</code>`;
+                        };
+                        parsed = window.marked.parse(processedResponse, { breaks: true, xhtml: true, renderer });
+                    } catch (e) {
+                        parsed = window.marked.parse(processedResponse, { breaks: true, xhtml: true });
+                    }
+                } else {
+                    parsed = `<div style="white-space: pre-wrap;">${escapeHtml(processedResponse)}</div>`;
+                }
+
+                parsed = sanitizeHtml(parsed);
+                htmlContent += `<div class="response">${parsed}</div>`;
+            }
+
+            // Calculate dimensions
+            const BORDER_WIDTH = 3 * zoomLevel;
+            const PADDING_X = 16 * zoomLevel;
+            const PADDING_BOTTOM = 16 * zoomLevel;
+            const PADDING_TOP = (contentType === 'note' ? 16 : 12) * zoomLevel;
+            const totalHorizontalPadding = (PADDING_X + BORDER_WIDTH) * 2;
+            const totalVerticalPadding = PADDING_TOP + PADDING_BOTTOM + (BORDER_WIDTH * 2);
+            const contentWidth = Math.max(1, maxWidth - totalHorizontalPadding);
+
+            return {
+                id: item.id,
+                htmlContent,
+                styles: scopedStyles,
+                fontStack,
+                scopeClass,
+                contentWidth,
+                totalVerticalPadding,
+                zoomLevel,
+                maxHeight: (item.maxHeight || 800) * zoomLevel,
+                PADDING_BOTTOM
+            };
+        });
+
+        // 2. WRITE: Inject ALL HTML at once (single DOM write)
+        const combinedHtml = preparedItems.map((item, idx) => {
+            return `<div id="batch-measure-${idx}" 
+                        style="width:${item.contentWidth}px; 
+                               font-family:${item.fontStack}; 
+                               font-size:${14 * item.zoomLevel}px; 
+                               line-height:1.5; 
+                               overflow-wrap:break-word; 
+                               white-space:normal; 
+                               overflow:hidden;
+                               position:absolute;
+                               left:0;
+                               top:${idx * 10000}px;">
+                       <style>${item.styles}</style>
+                       <div class="${item.scopeClass}">${item.htmlContent}</div>
+                    </div>`;
+        }).join('');
+
+        measurer.innerHTML = combinedHtml;
+
+        // 3. Yield to browser for layout calculation (single reflow)
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // 4. READ: Get ALL heights at once (single DOM read after reflow)
+        for (let i = 0; i < preparedItems.length; i++) {
+            const item = preparedItems[i];
+            const el = document.getElementById(`batch-measure-${i}`);
+
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                const contentHeight = Math.ceil(rect.height);
+                const totalRequiredHeight = contentHeight + item.totalVerticalPadding;
+
+                const MIN_HEIGHT = 60 * item.zoomLevel;
+                let visibleHeight = Math.min(Math.max(totalRequiredHeight, MIN_HEIGHT), item.maxHeight);
+
+                const extraScrollMargin = item.PADDING_BOTTOM;
+                const maxScrollPx = Math.max(0, totalRequiredHeight - visibleHeight + extraScrollMargin);
+
+                results[item.id] = {
+                    height: Math.ceil(Math.max(60, visibleHeight / item.zoomLevel)),
+                    maxScrollPx
+                };
+            }
+        }
+
+        // 5. Cleanup
+        measurer.innerHTML = '';
+
+        const elapsed = (performance.now() - startTime).toFixed(1);
+        log(`[measureBatchHtmlHeights] ✅ Measured ${contentsWithIds.length} nodes in ${elapsed}ms (${(elapsed / contentsWithIds.length).toFixed(1)}ms/node avg)`);
+
+        return results;
+    }
+
+
+
+
+    // ▼▼▼ [Memory Optimization] Shared 1x1 placeholder texture ▼▼▼
+    let sharedPlaceholderTexture = null;
+    function getSharedPlaceholderTexture() {
+        if (!sharedPlaceholderTexture) {
+            const canvas = document.createElement('canvas');
+            canvas.width = 1;
+            canvas.height = 1;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, 1, 1);
+
+            const tex = new THREE.CanvasTexture(canvas);
+            tex.colorSpace = THREE.SRGBColorSpace;
+            tex.minFilter = THREE.NearestFilter;
+            tex.magFilter = THREE.NearestFilter;
+            tex.generateMipmaps = false;
+            tex._isShared = true; // Flag to prevent disposal via dispose()
+
+            sharedPlaceholderTexture = tex;
+        }
+        return sharedPlaceholderTexture;
+    }
+    // ▲▲▲ [Memory Optimization] ▲▲▲
+
+    async function generatePlaceholderTextures(module, nodeModel, width, height) {
+        const zoomLevel = 2;
+        // Skip canvas creation entirely!
+
+        const sharedTex = getSharedPlaceholderTexture();
+
+        const tailDefault = createTailTexture('#fefefe', 'rgba(55, 65, 81, 0.9)', zoomLevel, 12, false);
+        const tailSelected = createTailTexture('#fefefe', '#7b7ff2', zoomLevel, 12, true);
+
+        // ▼▼▼ [SDF Glow] Glow is now rendered via SDF shader - no texture needed! ▼▼▼
+        const glowData = null;
+        // ▲▲▲ [SDF Glow] ▲▲▲
+
+        const result = {
+            textures: {
+                default: {
+                    body: sharedTex,
+                    tail: tailDefault,
+                    // Attach metadata to the wrapper object, NOT the shared texture
+                    _qualityScale: 0.1,
+                    _cachedContent: nodeModel.response ?? ''
+                },
+                selected: {
+                    body: sharedTex,
+                    tail: tailSelected,
+                    _qualityScale: 0.1
+                },
+                glow: glowData
+            },
+            width,
+            height
+        };
+
+        return result;
+    }
+
+    async function ensureImageCached(nodeId, url, imageCache, options = {}) {
+        if (!url) return null;
+
+        if (url.startsWith('⏳') || url.includes('Uploading')) {
+            return null;
+        }
+
+        const preferOriginal = options.preferOriginal === true;
+        const allowOriginalFallback = options.allowOriginalFallback !== false;
+        const resizeWidth = getRequestedResizeWidth(options);
+        const existing = imageCache.get(nodeId) || null;
+        const deferredOriginalError = getDeferredOriginalImageError(existing, url, resizeWidth, options);
+        if (deferredOriginalError) {
+            return deferredOriginalError;
+        }
+
+        const reusableEntry = canReuseCachedImageEntry(existing, url, options);
+        if (reusableEntry) {
+            return reusableEntry;
+        }
+
+        const normalizedUrl = normalizeImageAssetUrl(url);
+        const normalizedOriginalUrl = normalizeImageAssetUrl(options.originalUrl);
+        const requestedUrl = preferOriginal && normalizedOriginalUrl
+            ? normalizedOriginalUrl
+            : normalizedUrl;
+        let blob = null;
+        let actualUrl = requestedUrl; // Track which URL was actually loaded
+        let candidateUrl = requestedUrl;
+        const authToken = typeof options.authToken === 'string' ? options.authToken.trim() : '';
+        const notifyMissingAsset = (missingUrl, errorStatus) => {
+            if (Number(errorStatus || 0) !== 404) {
+                return;
+            }
+
+            const normalizedMissingUrl =
+                normalizeImageAssetUrl(missingUrl)
+                || normalizeImageAssetUrl(options.originalUrl)
+                || normalizeImageAssetUrl(requestedUrl)
+                || normalizeImageAssetUrl(url);
+            if (!normalizedMissingUrl) {
+                return;
+            }
+
+            try { options.onMissingAsset?.(normalizedMissingUrl); } catch { }
+        };
+
+        const getFetchOptions = (targetUrl) => {
+            const normalized = (targetUrl || '').toLowerCase();
+            if (normalized.startsWith('blob:') || normalized.startsWith('data:') || normalized.startsWith('file:')) {
+                return undefined;
+            }
+
+            const requestOptions = {};
+            if (isLoopbackImageAssetUrl(targetUrl)) {
+                requestOptions.targetAddressSpace = 'loopback';
+            }
+
+            if (authToken) {
+                requestOptions.headers = {
+                    Authorization: `Bearer ${authToken}`
+                };
+            }
+
+            return Object.keys(requestOptions).length > 0 ? requestOptions : undefined;
+        };
+
+        const fetchWithAuth = (targetUrl) => fetch(targetUrl, getFetchOptions(targetUrl));
+        const fetchBlobWithAuth = async (targetUrl) => {
+            const requestKey = getImageAssetErrorCacheKey(targetUrl) || normalizeImageAssetUrl(targetUrl);
+            if (!requestKey) {
+                const response = await fetchWithAuth(targetUrl);
+                if (!response.ok) {
+                    const httpError = new Error(`HTTP ${response.status}`);
+                    httpError.status = response.status;
+                    httpError.url = targetUrl;
+                    storeFailedImageAssetEntry(createCachedImageErrorEntry(targetUrl, resizeWidth, response.status));
+                    throw httpError;
+                }
+                return await readImageBlobFromResponse(response, targetUrl);
+            }
+
+            const existingPendingFetch = pendingImageAssetFetches.get(requestKey);
+            if (existingPendingFetch) {
+                return await existingPendingFetch;
+            }
+
+            const pendingFetch = (async () => {
+                const failedAssetEntry = getFailedImageAssetEntry(targetUrl);
+                if (failedAssetEntry) {
+                    throw createSyntheticImageFetchError(failedAssetEntry, targetUrl);
+                }
+
+                const response = await fetchWithAuth(targetUrl);
+                if (!response.ok) {
+                    const httpError = new Error(`HTTP ${response.status}`);
+                    httpError.status = response.status;
+                    httpError.url = targetUrl;
+                    storeFailedImageAssetEntry(createCachedImageErrorEntry(targetUrl, resizeWidth, response.status));
+                    throw httpError;
+                }
+                return await readImageBlobFromResponse(response, targetUrl);
+            })();
+
+            pendingImageAssetFetches.set(requestKey, pendingFetch);
+            try {
+                return await pendingFetch;
+            } finally {
+                if (pendingImageAssetFetches.get(requestKey) === pendingFetch) {
+                    pendingImageAssetFetches.delete(requestKey);
+                }
+            }
+        };
+
+        if (shouldResolveNodeAssetUrlBeforeFetch(candidateUrl, options)) {
+            const refreshedUrl = await requestFreshNodeAssetUrl(nodeId, candidateUrl, options);
+            const normalizedRefreshedUrl = normalizeImageAssetUrl(refreshedUrl);
+            if (normalizedRefreshedUrl) {
+                candidateUrl = normalizedRefreshedUrl;
+                actualUrl = normalizedRefreshedUrl;
+                try { options.onRefreshedUrl?.(normalizedRefreshedUrl); } catch { }
+            }
+        }
+
+        // ▼▼▼ [Fallback] Preview requests may opt into original fallback, but startup preview paths keep this disabled. ▼▼▼
+        try {
+            blob = await fetchBlobWithAuth(candidateUrl);
+            actualUrl = candidateUrl;
+        } catch (error) {
+            // Only escalate a thumbnail miss to the original asset when the caller explicitly allows it.
+            const isThumbnail = isThumbnailAssetUrl(candidateUrl);
+            if (isThumbnail && allowOriginalFallback) {
+                // Convert thumbnail URL to original URL
+                const originalUrl = candidateUrl.replace('/assets/thumbs/', '/assets/').replace(/\.jpg$/, '');
+                // Try common extensions
+                const extensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp'];
+                let fallbackSuccess = false;
+                let lastFallbackError = error;
+
+                for (const ext of extensions) {
+                    const tryUrl = originalUrl.includes('.') ? originalUrl : originalUrl + ext;
+                    try {
+                        blob = await fetchBlobWithAuth(tryUrl);
+                        actualUrl = tryUrl;
+                        fallbackSuccess = true;
+                        log(`[TextureFactory] Thumbnail not found, using original: ${tryUrl}`);
+                        break;
+                    } catch (fallbackError) {
+                        lastFallbackError = fallbackError;
+                        // Try next extension
+                    }
+                }
+
+                // Also try the original URL from options if provided
+                if (!fallbackSuccess && normalizedOriginalUrl) {
+                    try {
+                        blob = await fetchBlobWithAuth(normalizedOriginalUrl);
+                        actualUrl = normalizedOriginalUrl;
+                        fallbackSuccess = true;
+                        log(`[TextureFactory] Using provided originalUrl: ${normalizedOriginalUrl}`);
+                    } catch (originalError) {
+                        lastFallbackError = originalError;
+                        // Ignore
+                    }
+                }
+
+                if (!fallbackSuccess) {
+                    const refreshedUrl = await requestFreshNodeAssetUrl(nodeId, actualUrl || candidateUrl, options);
+                    if (refreshedUrl) {
+                        try { options.onRefreshedUrl?.(refreshedUrl); } catch { }
+                        return ensureImageCached(nodeId, refreshedUrl, imageCache, {
+                            ...options,
+                            originalUrl: refreshedUrl,
+                            skipAssetRefresh: true
+                        });
+                    }
+
+                    console.warn(`[TextureFactory] Thumbnail fetch failed and no usable fallback remained for ${nodeId}`);
+                    const errorStatus = getImageErrorStatus(lastFallbackError);
+                    notifyMissingAsset(actualUrl || candidateUrl || requestedUrl, errorStatus);
+                    const preservedOriginalError = rememberOriginalImageError(
+                        existing,
+                        actualUrl || candidateUrl || requestedUrl,
+                        resizeWidth,
+                        errorStatus,
+                        options
+                    );
+                    if (preservedOriginalError) {
+                        return preservedOriginalError;
+                    }
+                    const errorEntry = createCachedImageErrorEntry(
+                        candidateUrl,
+                        resizeWidth,
+                        errorStatus
+                    );
+                    storeFailedImageAssetEntry(errorEntry);
+                    return storeImageCacheEntry(imageCache, nodeId, errorEntry);
+                }
+            } else {
+                const refreshedUrl = await requestFreshNodeAssetUrl(nodeId, actualUrl || candidateUrl, options);
+                if (refreshedUrl) {
+                    try { options.onRefreshedUrl?.(refreshedUrl); } catch { }
+                    return ensureImageCached(nodeId, refreshedUrl, imageCache, {
+                        ...options,
+                        originalUrl: refreshedUrl,
+                        skipAssetRefresh: true
+                    });
+                }
+
+                console.warn(`[TextureFactory] Image fetch failed for ${nodeId}:`, error);
+                const errorStatus = getImageErrorStatus(error);
+                notifyMissingAsset(actualUrl || candidateUrl || requestedUrl, errorStatus);
+                const preservedOriginalError = rememberOriginalImageError(
+                    existing,
+                    actualUrl || candidateUrl || requestedUrl,
+                    resizeWidth,
+                    errorStatus,
+                    options
+                );
+                if (preservedOriginalError) {
+                    return preservedOriginalError;
+                }
+                const errorEntry = createCachedImageErrorEntry(
+                    candidateUrl,
+                    resizeWidth,
+                    errorStatus
+                );
+                storeFailedImageAssetEntry(errorEntry);
+                return storeImageCacheEntry(imageCache, nodeId, errorEntry);
+            }
+        }
+        // ▲▲▲ [Fallback] ▲▲▲
+
+        if (blob && typeof createImageBitmap === 'function') {
+            try {
+                // ▼▼▼ [Optimization] Skip resize for thumbnails (already 512px or smaller) ▼▼▼
+                const isThumbnail = isThumbnailAssetUrl(actualUrl);
+                const sourceKind = getImageSourceKind(actualUrl);
+                const resizeQuality = preferOriginal ? 'high' : 'medium';
+
+                if (isThumbnail) {
+                    // Thumbnail: decode directly without resize (faster - single decode)
+                    const bitmap = await createImageBitmap(blob);
+                    const cached = {
+                        image: bitmap,
+                        url: actualUrl,
+                        width: bitmap.width,
+                        height: bitmap.height,
+                        requestedWidth: bitmap.width,
+                        sourceKind,
+                        assetKey: getCanonicalImageAssetKey(actualUrl),
+                        type: 'bitmap',
+                        isError: false,
+                        fullResError: null
+                    };
+                    clearFailedImageAssetEntry(actualUrl);
+                    return storeImageCacheEntry(imageCache, nodeId, cached);
+                }
+
+                // Non-thumbnail (original image): keep a larger, DPR-aware cached bitmap for visible image meshes.
+                const bitmap = await createImageBitmap(blob, { resizeWidth, resizeQuality });
+                const cached = {
+                    image: bitmap,
+                    url: actualUrl,
+                    width: bitmap.width,
+                    height: bitmap.height,
+                    requestedWidth: resizeWidth,
+                    sourceKind,
+                    assetKey: getCanonicalImageAssetKey(actualUrl),
+                    type: 'bitmap',
+                    isError: false,
+                    fullResError: null
+                };
+                clearFailedImageAssetEntry(actualUrl);
+                return storeImageCacheEntry(imageCache, nodeId, cached);
+                // ▲▲▲ [Optimization] ▲▲▲
+            } catch (error) {
+                console.warn('[TextureFactory] createImageBitmap failed, fallback to Image()', {
+                    nodeId,
+                    actualUrl,
+                    blobType: blob?.type || '',
+                    blobSize: Number(blob?.size || 0)
+                }, error);
+            }
+        }
+
+        return new Promise((resolve) => {
+            const img = new Image();
+            if (!actualUrl.startsWith('blob:') && !actualUrl.startsWith('data:') && !actualUrl.startsWith('file:')) {
+                img.crossOrigin = 'anonymous';
+            }
+
+            let objectUrl = null;
+            if (blob) {
+                objectUrl = URL.createObjectURL(blob);
+            }
+
+            img.onload = () => {
+                if (objectUrl) URL.revokeObjectURL(objectUrl);
+                const sourceKind = getImageSourceKind(actualUrl);
+                const cached = {
+                    image: img,
+                    url: actualUrl,
+                    width: img.naturalWidth || img.width || 0,
+                    height: img.naturalHeight || img.height || 0,
+                    requestedWidth: resizeWidth,
+                    sourceKind,
+                    assetKey: getCanonicalImageAssetKey(actualUrl),
+                    type: 'image',
+                    isError: false,
+                    fullResError: null
+                };
+                clearFailedImageAssetEntry(actualUrl);
+                resolve(storeImageCacheEntry(imageCache, nodeId, cached));
+            };
+
+            img.onerror = () => {
+                if (objectUrl) URL.revokeObjectURL(objectUrl);
+                console.warn(`[TextureFactory] Image load error for ${nodeId}`, {
+                    actualUrl,
+                    blobType: blob?.type || '',
+                    blobSize: Number(blob?.size || 0)
+                });
+                const errorEntry = createCachedImageErrorEntry(actualUrl, resizeWidth, 0);
+                storeFailedImageAssetEntry(errorEntry);
+                resolve(storeImageCacheEntry(imageCache, nodeId, errorEntry));
+            };
+
+            img.src = objectUrl || actualUrl;
+        });
+    }
+
+    /**
+     * 텍스처 생성 및 캐싱 (LOD 품질 지원)
+     * @param {number} qualityScale - 품질 스케일 (1.0=고해상도, 0.25=저해상도)
+     */
+    // Simplified Texture Factory for Image Nodes & Measurement Only
+
+    function getMarkdownStyles(zoomLevel, contentType = 'text', options = {}) {
+        // Kept for measurement purposes only
+        const z = zoomLevel;
+        const fontStack = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        const baseFontSize = 14 * z;
+        const baseLineHeight = 1.5;
+
+        // Simplified styles just for height measurement
+        const styles = `
+            div { line-height: ${baseLineHeight}; font-family: ${fontStack}; font-size: ${baseFontSize}px; margin: 0; padding: 0; }
+            p { margin: 0 0 ${8 * z}px 0; }
+            h1, h2, h3, h4 { font-size: ${16 * z}px; font-weight: 700; margin: ${12 * z}px 0 ${6 * z}px 0; }
+            ul, ol { margin: ${6 * z}px 0 ${10 * z}px ${20 * z}px; padding: 0; }
+            li { margin-bottom: ${4 * z}px; }
+            pre { margin: ${8 * z}px 0; white-space: pre-wrap; }
+        `;
+        return { styles, fontStack };
+    }
+
+    // [Deleted] renderMarkdownToCanvasAsync - No longer needed (CSS3D handles rendering)
+    // [Deleted] drawNodeBodyOnCanvas - No longer needed
+
+    // ... (measureHtmlHeightAsync and helper functions kept for auto-sizing logic) ...
+
+    /**
+     * 텍스처 생성 및 캐싱 (Simplified)
+     */
+    async function generateAndCacheTextures(module, nodeModel, imageCache, updateData = {}, qualityScale = 1.0) {
+        // Image Node: Full processing
+        if (nodeModel.contentType === 'image') {
+            // ... existing image logic ...
+            const defaultWidth = module.aiNodeDefaultWidth || 400;
+            const defaultHeight = module.aiNodeDefaultHeight || 200;
+            const width = nodeModel.width || 300;
+            const height = nodeModel.height || 200;
+
+            const bodyDefault = await createRenderedTextureAsync(module, nodeModel, false, imageCache, qualityScale);
+            // Skip selected texture for optimization if requested, or create it
+            const skipSelected = updateData.skipSelected === true;
+            const bodySelected = skipSelected ? null : await createRenderedTextureAsync(module, nodeModel, true, imageCache, qualityScale);
+
+            // Tail textures
+            const zoomLevel = 2;
+            const tailDefaultColors = getTailColors(nodeModel, false);
+            const tailSelectedColors = getTailColors(nodeModel, true);
+            const tailDefault = createTailTexture(tailDefaultColors.fill, tailDefaultColors.stroke, zoomLevel, 12, false);
+            const tailSelected = createTailTexture(tailSelectedColors.fill, tailSelectedColors.stroke, zoomLevel, 12, true);
+
+            return {
+                textures: {
+                    default: { body: bodyDefault, tail: tailDefault },
+                    selected: { body: bodySelected, tail: tailSelected },
+                    glow: null
+                },
+                width,
+                height,
+                sourceCanvas: bodyDefault?.image
+            };
+        }
+
+        // Text/Note/Code Nodes: Measurement ONLY, No Textures
+        const isTextLike = nodeModel.contentType === 'text' || nodeModel.contentType === 'note' || nodeModel.contentType === 'code' || nodeModel.contentType === 'markdown';
+
+        // 1. Measure Height (Crucial for Layout)
+        if (isTextLike && !nodeModel.isChunkedText) { // Code nodes now measured like text
+            const skipMeasure = updateData.skipMeasure === true;
+            if (!skipMeasure) {
+                const zoomLevel = 2;
+                const defaultWidth = module.aiNodeDefaultWidth || 400;
+                const width = nodeModel.width || defaultWidth;
+                const defaultHeight = module.aiNodeDefaultHeight || 200;
+                const effectiveMaxHeight = module.showFullAiResponse ? 10000 : defaultHeight;
+
+                // Reuse existing measurement logic
+                try {
+                    const forcedHeight = (nodeModel.height && nodeModel.height > 0) ? (nodeModel.height * zoomLevel) : null;
+                    const { height: measuredHeight, maxScrollPx } = await measureHtmlHeightAsync(nodeModel, zoomLevel, width * zoomLevel, forcedHeight, effectiveMaxHeight);
+
+                    if (!nodeModel.height || nodeModel.height <= 0) {
+                        nodeModel.height = measuredHeight;
+                    }
+                    nodeModel.maxScroll = maxScrollPx / zoomLevel;
+                } catch (e) {
+                    console.warn('[TextureFactory] Height measure failed', e);
+                    if (!nodeModel.height) nodeModel.height = 200;
+                }
+            }
+        }
+
+        // 2. Return Placeholder/Null Textures (CSS3D will handle visibility)
+        // We technically don't need *any* texture for the content, just the tail.
+        // But mind-map-nodes.js expects a structure. We will return minimized data.
+
+        const zoomLevel = 2;
+        const tailDefaultColors = getTailColors(nodeModel, false);
+        const tailSelectedColors = getTailColors(nodeModel, true);
+        const tailDefault = createTailTexture(tailDefaultColors.fill, tailDefaultColors.stroke, zoomLevel, 12, false);
+        const tailSelected = createTailTexture(tailSelectedColors.fill, tailSelectedColors.stroke, zoomLevel, 12, true);
+
+        return {
+            textures: {
+                // No body textures! mind-map-nodes.js should be updated to handle null/undefined body texture
+                default: { body: null, tail: tailDefault },
+                selected: { body: null, tail: tailSelected },
+                glow: null
+            },
+            width: nodeModel.width || 400,
+            height: nodeModel.height || 200
+        };
+    }
+
+    // Placeholder generation optimized for CSS3D adoption
+    async function generatePlaceholderTextures(module, nodeModel, width, height) {
+        // ▼▼▼ [Optimization] Skip texture generation for CSS3D nodes ▼▼▼
+        const isCss3dType = nodeModel.contentType === 'text' || nodeModel.contentType === 'note' || nodeModel.contentType === 'memo' || nodeModel.contentType === 'markdown' || nodeModel.contentType === 'code';
+
+        // For CSS3D types, we return dummy/null textures because they are rendered via CSS3D or InstancedMesh (lines).
+        // Exception: Glow might still need a texture, but usually that comes from a shared sprite or simple mesh.
+        // We still need the 'glow' texture if the interaction model expects it on the glObject.
+
+        const glowTextureInfo = null;
+
+        // Image nodes stay on the WebGL path and manage their own body texture directly.
+
+        if (isCss3dType) {
+            const zoomLevel = 2;
+            const tailDefaultColors = getTailColors(nodeModel, false);
+            const tailSelectedColors = getTailColors(nodeModel, true);
+            const tailDefault = createTailTexture(tailDefaultColors.fill, tailDefaultColors.stroke, zoomLevel, 12, false);
+            const tailSelected = createTailTexture(tailSelectedColors.fill, tailSelectedColors.stroke, zoomLevel, 12, true);
+            return {
+                textures: {
+                    default: { body: null, tail: tailDefault },
+                    selected: { body: null, tail: tailSelected },
+                    glow: glowTextureInfo
+                }
+            };
+        }
+        // ▲▲▲ [Optimization] ▲▲▲
+
+        // Legacy behavior for other types (e.g. PDF, custom)
+        const zoomLevel = 2; // Fixed resolution scale
+        // ... (Original logic for creating canvas textures for non-CSS types)
+
+        // Return placeholder
+        return {
+            textures: {
+                default: { body: null, tail: null },
+                selected: { body: null, tail: null },
+                glow: glowTextureInfo
+            }
+        };
+    }
+
+
+    window.MindMapTextureFactory = {
+        generateAndCacheTextures,
+        generatePlaceholderTextures,
+        measureHtmlHeightAsync,
+        measureBatchHtmlHeights, // [Optimization] Batch measure for Layout Thrashing prevention
+        ensureImageCached,
+        resolveCachedImageEntry,
+        createTailTexture, // ★ Export for code node tail creation
+        clearCache: () => {
+            tailTextureCache.clear();
+            failedImageAssetCache.clear();
+            pendingImageAssetFetches.clear();
+        },
+        registerRenderer: (type, renderer) => renderers.set(type, renderer)
+    };
+
+    log('mind-map-texture-factory.js initialized (folded corners, spinner)');
+})();