@reftrixmcp/mcp-server 0.1.7

package/dist/services/page/layout-analyzer.service.js

@@ -0,0 +1,2001 @@
+"use strict";
+// SPDX-FileCopyrightText: 2026 TKMD and Reftrix Contributors
+// SPDX-License-Identifier: AGPL-3.0-only
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutAnalyzerService = void 0;
+exports.applyComputedStylesToHtml = applyComputedStylesToHtml;
+exports.findMatchingComputedStyles = findMatchingComputedStyles;
+exports.getLayoutAnalyzerService = getLayoutAnalyzerService;
+exports.resetLayoutAnalyzerService = resetLayoutAnalyzerService;
+/**
+ * Layout Analyzer Service
+ *
+ * Cheerioを使用したレイアウト解析サービス
+ * @reftrixmcp/webdesign-core の SectionDetector を活用
+ *
+ * 機能:
+ * - セクション検出（セマンティック要素、class/id名ベース）
+ * - グリッド/フレックスレイアウト検出
+ * - タイポグラフィ解析
+ * - 色抽出
+ *
+ * @module services/page/layout-analyzer.service
+ */
+const webdesign_core_1 = require("@reftrixmcp/webdesign-core");
+const cheerio = __importStar(require("cheerio"));
+const uuid_1 = require("uuid");
+const logger_1 = require("../../utils/logger");
+const external_css_fetcher_1 = require("../external-css-fetcher");
+// =====================================================
+// Computed Styles インライン適用関数
+// =====================================================
+/**
+ * フィルタリング対象外のスタイルプロパティ値
+ * これらの値は意味がないため除外する
+ */
+const FILTER_OUT_VALUES = [
+    "none",
+    "normal",
+    "auto",
+    "initial",
+    "inherit",
+    "unset",
+    "0px",
+    "rgba(0, 0, 0, 0)",
+    "transparent",
+    "matrix(1, 0, 0, 1, 0, 0)",
+];
+/**
+ * camelCase を kebab-case に変換
+ *
+ * @param str - camelCase文字列
+ * @returns kebab-case文字列
+ */
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+/**
+ * ElementComputedStyles を CSS文字列に変換
+ *
+ * 意味のない値（none, normal, auto等）はフィルタリングして除外する
+ *
+ * @param styles - ElementComputedStyles オブジェクト
+ * @returns インラインスタイル用CSS文字列
+ */
+function stylesToString(styles) {
+    return Object.entries(styles)
+        .filter(([_, value]) => {
+        // 値が存在しない場合は除外
+        if (!value || value.trim().length === 0) {
+            return false;
+        }
+        // フィルタリング対象の値を除外
+        if (FILTER_OUT_VALUES.includes(value)) {
+            return false;
+        }
+        return true;
+    })
+        .map(([key, value]) => `${camelToKebab(key)}: ${value}`)
+        .join("; ");
+}
+/**
+ * セクションHTMLに computed styles をインラインスタイルとして適用
+ *
+ * セクションのルート要素と子要素に対して、取得した computed styles を
+ * style 属性として適用し、外部CSSなしで見た目を再現可能にする
+ *
+ * @param htmlSnippet - 対象のHTMLスニペット
+ * @param computedStyles - 対応する ComputedStyleInfo（ルート要素 + 子要素のスタイル）
+ * @returns computed styles が適用されたHTML
+ */
+function applyComputedStylesToHtml(htmlSnippet, computedStyles) {
+    if (!htmlSnippet || !computedStyles) {
+        return htmlSnippet;
+    }
+    try {
+        const $ = cheerio.load(htmlSnippet, {
+            xmlMode: false,
+        });
+        // 1. ルート要素にスタイルを適用
+        const rootElement = $("body > *").first();
+        if (rootElement.length > 0 && computedStyles.styles) {
+            const rootStyleStr = stylesToString(computedStyles.styles);
+            if (rootStyleStr.length > 0) {
+                // 既存のstyle属性があれば結合、なければ設定
+                const existingStyle = rootElement.attr("style") || "";
+                const newStyle = existingStyle ? `${existingStyle}; ${rootStyleStr}` : rootStyleStr;
+                rootElement.attr("style", newStyle);
+            }
+        }
+        // 2. 子要素にスタイルを適用
+        if (computedStyles.children && computedStyles.children.length > 0) {
+            for (const child of computedStyles.children) {
+                applyChildStyles($, child);
+            }
+        }
+        // <html><head></head><body>...</body></html> の body 内のみを返す
+        const result = $("body").html();
+        return result || htmlSnippet;
+    }
+    catch (error) {
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.warn("[LayoutAnalyzerService] Failed to apply computed styles to HTML", {
+                error: error instanceof Error ? error.message : "Unknown error",
+            });
+        }
+        // エラー時は元のHTMLをそのまま返す
+        return htmlSnippet;
+    }
+}
+/**
+ * 子要素に computed styles を適用
+ *
+ * @param $ - CheerioAPI
+ * @param child - 子要素のスタイル情報
+ */
+function applyChildStyles($, child) {
+    if (!child.styles) {
+        return;
+    }
+    const styleStr = stylesToString(child.styles);
+    if (styleStr.length === 0) {
+        return;
+    }
+    // セレクタまたはパスを使って要素を特定
+    let elements;
+    // 1. セレクタがあればそれを使用
+    if (child.selector && child.selector.length > 0) {
+        try {
+            elements = $(child.selector);
+        }
+        catch {
+            // セレクタが無効な場合はパスにフォールバック
+            elements = $();
+        }
+    }
+    else if (child.path && child.path.length > 0) {
+        // 2. パスを使用（例: "div > h1"）
+        try {
+            elements = $(child.path);
+        }
+        catch {
+            elements = $();
+        }
+    }
+    else {
+        // 3. タグ名とクラス名で特定
+        const tagName = child.tagName.toLowerCase();
+        if (child.className && child.className.length > 0) {
+            // 最初のクラス名のみ使用（複数クラスの場合）
+            const firstClass = child.className.split(/\s+/)[0];
+            try {
+                elements = $(`${tagName}.${firstClass}`);
+            }
+            catch {
+                elements = $(tagName);
+            }
+        }
+        else {
+            elements = $(tagName);
+        }
+    }
+    // 見つかった要素にスタイルを適用
+    elements.each((_, elem) => {
+        const existingStyle = $(elem).attr("style") || "";
+        const newStyle = existingStyle ? `${existingStyle}; ${styleStr}` : styleStr;
+        $(elem).attr("style", newStyle);
+    });
+}
+/**
+ * セクションインデックスに基づいて対応する computed styles を見つける
+ *
+ * @param sectionIndex - セクションのインデックス
+ * @param computedStyles - 全 computed styles 配列
+ * @returns 対応する ComputedStyleInfo または undefined
+ */
+function findMatchingComputedStyles(sectionIndex, computedStyles) {
+    if (!computedStyles || computedStyles.length === 0) {
+        return undefined;
+    }
+    // インデックスで検索
+    return computedStyles.find((cs) => cs.index === sectionIndex);
+}
+/**
+ * CSSからグリッド/フレックスレイアウトを検出
+ */
+function detectGridLayout(_$, html) {
+    const info = {
+        hasGrid: false,
+        hasFlex: false,
+    };
+    // インラインスタイルとスタイルタグからグリッド検出
+    const hasGridDisplay = html.includes("display: grid") ||
+        html.includes("display:grid") ||
+        html.match(/display\s*:\s*grid/i) !== null;
+    const hasFlexDisplay = html.includes("display: flex") ||
+        html.includes("display:flex") ||
+        html.match(/display\s*:\s*flex/i) !== null;
+    info.hasGrid = hasGridDisplay;
+    info.hasFlex = hasFlexDisplay;
+    // グリッドカラム数を推定
+    if (hasGridDisplay) {
+        // grid-template-columns パターンを検出
+        const columnMatch = html.match(/grid-template-columns:\s*repeat\s*\(\s*(\d+)/i);
+        if (columnMatch && columnMatch[1]) {
+            info.columnCount = parseInt(columnMatch[1], 10);
+        }
+        else {
+            // fr単位やピクセル値からカラム数を推定
+            const frMatch = html.match(/grid-template-columns:\s*([^;]+)/i);
+            if (frMatch && frMatch[1]) {
+                const frCount = (frMatch[1].match(/\dfr|\d+px|auto/gi) || []).length;
+                if (frCount > 0) {
+                    info.columnCount = frCount;
+                }
+            }
+        }
+        // gap/ガター幅を推定
+        const gapMatch = html.match(/(?:grid-)?gap:\s*(\d+)px/i);
+        if (gapMatch && gapMatch[1]) {
+            info.gutterWidth = parseInt(gapMatch[1], 10);
+        }
+    }
+    return info;
+}
+/**
+ * タイポグラフィ情報を抽出
+ */
+function extractTypography($, html) {
+    const headings = [];
+    const fontSizes = new Set();
+    const fontFamilies = new Set();
+    // 見出し要素を抽出
+    for (let level = 1; level <= 6; level++) {
+        const $headings = $(`h${level}`);
+        if ($headings.length > 0) {
+            headings.push({
+                level,
+                count: $headings.length,
+            });
+        }
+    }
+    // CSSからフォントサイズを抽出
+    const fontSizeMatches = html.match(/font-size:\s*([^;}\s]+)/gi);
+    if (fontSizeMatches) {
+        for (const match of fontSizeMatches) {
+            const size = match.replace(/font-size:\s*/i, "").trim();
+            if (size) {
+                fontSizes.add(size);
+            }
+        }
+    }
+    // CSSからフォントファミリーを抽出
+    const fontFamilyMatches = html.match(/font-family:\s*([^;]+)/gi);
+    if (fontFamilyMatches) {
+        for (const match of fontFamilyMatches) {
+            const family = match.replace(/font-family:\s*/i, "").trim();
+            // 最初のフォント名を抽出
+            const firstFont = family.split(",")[0]?.replace(/['"]/g, "").trim();
+            if (firstFont) {
+                fontFamilies.add(firstFont);
+            }
+        }
+    }
+    // exactOptionalPropertyTypes対応: undefined を代入せずプロパティを省略
+    const result = {
+        headings,
+    };
+    if (fontSizes.size > 0) {
+        result.fontSizes = Array.from(fontSizes);
+    }
+    if (fontFamilies.size > 0) {
+        result.fontFamilies = Array.from(fontFamilies);
+    }
+    return result;
+}
+/**
+ * 色情報を抽出（CSS変数解決対応）
+ *
+ * CSS変数（var(--color-bg) 等）を実際の色値に解決してから抽出します。
+ * これにより、ax1.vcのようなCSS変数を多用するサイトでも
+ * 正確に色情報を取得できます。
+ *
+ * @param $ - CheerioAPI
+ * @param html - HTML文字列
+ * @param externalCss - 外部CSSコンテンツ（オプション）
+ * @returns ColorInfo
+ */
+function extractColors($, html, externalCss) {
+    const backgroundColors = new Set();
+    const textColors = new Set();
+    let hasGradients = false;
+    // CSS変数リゾルバを初期化
+    const resolver = new webdesign_core_1.CssVariableResolver();
+    // HTMLから変数定義を抽出
+    resolver.extractVariablesFromHtml(html);
+    // 外部CSSからも変数定義を抽出
+    if (externalCss) {
+        resolver.extractVariablesFromCss(externalCss);
+    }
+    if ((0, logger_1.isDevelopment)()) {
+        logger_1.logger.info("[LayoutAnalyzerService] CSS variables extracted", {
+            variableCount: resolver.size,
+        });
+    }
+    // ヘルパー: 色値を解決して追加
+    const resolveAndAddColor = (value, colorSet) => {
+        const trimmedValue = value.trim();
+        if (!trimmedValue)
+            return;
+        // CSS変数を解決
+        const result = resolver.resolve(trimmedValue);
+        const resolvedValue = result.success && result.resolvedValue ? result.resolvedValue : trimmedValue;
+        // 有効な色値かチェック
+        if ((0, webdesign_core_1.isValidColorValue)(resolvedValue)) {
+            colorSet.add(resolvedValue);
+        }
+    };
+    // ヘルパー: CSSテキストから色を抽出
+    const extractColorsFromCssText = (cssText) => {
+        // 背景色を抽出
+        const bgColorPattern = /background(?:-color)?:\s*([^;}\n]+)/gi;
+        let match;
+        while ((match = bgColorPattern.exec(cssText)) !== null) {
+            const value = match[1]?.trim();
+            if (value) {
+                // グラデーションチェック
+                if (value.includes("gradient")) {
+                    hasGradients = true;
+                }
+                else if (!value.includes("url(")) {
+                    resolveAndAddColor(value, backgroundColors);
+                }
+            }
+        }
+        // テキスト色を抽出（background-colorではなくcolorのみ）
+        const colorPattern = /(?:^|[;\s{])color:\s*([^;}\n]+)/gi;
+        while ((match = colorPattern.exec(cssText)) !== null) {
+            const value = match[1]?.trim();
+            if (value) {
+                resolveAndAddColor(value, textColors);
+            }
+        }
+    };
+    // 1. 全要素のstyle属性から色を抽出
+    $("[style]").each((_, elem) => {
+        const styleAttr = $(elem).attr("style");
+        if (styleAttr) {
+            extractColorsFromCssText(styleAttr);
+        }
+    });
+    // 2. <style>タグ内のCSSからも色を抽出
+    $("style").each((_, elem) => {
+        const cssContent = $(elem).html();
+        if (cssContent) {
+            extractColorsFromCssText(cssContent);
+        }
+    });
+    // 3. 外部CSSからも抽出
+    if (externalCss) {
+        extractColorsFromCssText(externalCss);
+    }
+    // パレット生成（頻出色上位）
+    const allColors = [...backgroundColors, ...textColors];
+    const palette = Array.from(new Set(allColors)).slice(0, 10);
+    // exactOptionalPropertyTypes対応: undefined を代入せずプロパティを省略
+    const result = {
+        hasGradients,
+    };
+    if (backgroundColors.size > 0) {
+        result.backgroundColors = Array.from(backgroundColors);
+    }
+    if (textColors.size > 0) {
+        result.textColors = Array.from(textColors);
+    }
+    if (palette.length > 0) {
+        result.palette = palette;
+    }
+    return result;
+}
+/**
+ * HTMLからCSSスニペットを抽出
+ *
+ * 抽出対象:
+ * - <style>タグ内のCSS（有効なセレクタ付きルールのみ）
+ * - 外部CSSリンク（参照のみ、@import形式）
+ *
+ * 注意:
+ * - インラインスタイル（style属性）は抽出しない
+ *   → セレクタなしの宣言は無効なCSSとなるため
+ *   → スタイルはhtmlSnippet内のstyle属性として既に適用されている
+ *
+ * @param $ - CheerioAPI
+ * @returns CSSスニペット
+ */
+function extractCssSnippet($) {
+    const cssChunks = [];
+    // 1. <style>タグからCSS抽出
+    $("style").each((_, elem) => {
+        const css = $(elem).html();
+        if (css && css.trim().length > 0) {
+            cssChunks.push(`/* <style> tag */\n${css.trim()}`);
+        }
+    });
+    // 2. インラインスタイルは抽出しない
+    // 理由: セレクタなしのCSS宣言は無効であり、ブラウザで無視される
+    // 実際のスタイルはhtmlSnippet内の各要素のstyle属性に保持されている
+    // 3. 外部CSS参照
+    const externalCss = [];
+    $('link[rel="stylesheet"]').each((_, elem) => {
+        const href = $(elem).attr("href");
+        if (href && href.trim().length > 0) {
+            externalCss.push(href.trim());
+        }
+    });
+    if (externalCss.length > 0) {
+        cssChunks.push(`/* External CSS References (${externalCss.length} files) */\n${externalCss.map((href) => `@import url("${href}");`).join("\n")}`);
+    }
+    return cssChunks.length > 0 ? cssChunks.join("\n\n") : "";
+}
+/**
+ * HTMLから外部CSSリンクのURLを抽出
+ *
+ * @param $ - CheerioAPI
+ * @param baseUrl - ベースURL（相対URL解決用）
+ * @returns 外部CSSのURL配列
+ */
+function extractExternalCssUrls($, baseUrl) {
+    const urls = [];
+    $('link[rel="stylesheet"]').each((_, elem) => {
+        const href = $(elem).attr("href");
+        if (href && href.trim().length > 0) {
+            const trimmedHref = href.trim();
+            // 相対URLを絶対URLに解決
+            try {
+                const absoluteUrl = new URL(trimmedHref, baseUrl).href;
+                urls.push(absoluteUrl);
+            }
+            catch {
+                // URLが無効な場合はスキップ
+                if ((0, logger_1.isDevelopment)()) {
+                    logger_1.logger.warn("[LayoutAnalyzerService] Invalid CSS URL", { href: trimmedHref, baseUrl });
+                }
+            }
+        }
+    });
+    return urls;
+}
+/**
+ * 外部CSSファイルを取得してCSSスニペットに結合
+ *
+ * @param $ - CheerioAPI
+ * @param options - 外部CSS取得オプション
+ * @returns CSSスニペットと取得結果
+ */
+async function extractCssWithExternalContent($, options) {
+    const startTime = Date.now();
+    const cssChunks = [];
+    const externalCssContentChunks = [];
+    // 1. <style>タグからCSS抽出
+    $("style").each((_, elem) => {
+        const css = $(elem).html();
+        if (css && css.trim().length > 0) {
+            cssChunks.push(`/* <style> tag */\n${css.trim()}`);
+        }
+    });
+    // 2. インラインスタイルは抽出しない
+    // 理由: セレクタなしのCSS宣言は無効であり、ブラウザで無視される
+    // 実際のスタイルはhtmlSnippet内の各要素のstyle属性に保持されている
+    // 3. 外部CSS参照（@import）
+    const baseUrl = options.baseUrl ?? "";
+    const maxCssFiles = options.maxCssFiles ?? 20;
+    // preExtractedUrlsが渡された場合はそれを使用
+    // （DOMPurifyで<link>タグが除去される問題の回避策）
+    let externalCssUrls;
+    if (options.preExtractedUrls && options.preExtractedUrls.length > 0) {
+        externalCssUrls = options.preExtractedUrls;
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.debug("[LayoutAnalyzerService] Using pre-extracted CSS URLs", {
+                count: externalCssUrls.length,
+            });
+        }
+    }
+    else {
+        externalCssUrls = extractExternalCssUrls($, baseUrl);
+    }
+    // 最大取得数を制限
+    if (externalCssUrls.length > maxCssFiles) {
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.warn("[LayoutAnalyzerService] Limiting external CSS files", {
+                total: externalCssUrls.length,
+                limit: maxCssFiles,
+            });
+        }
+        externalCssUrls = externalCssUrls.slice(0, maxCssFiles);
+    }
+    // 参照用の@importを追加（外部CSSはexternalCssContentに分離）
+    if (externalCssUrls.length > 0) {
+        cssChunks.push(`/* External CSS References (${externalCssUrls.length} files) */\n${externalCssUrls.map((href) => `@import url("${href}");`).join("\n")}`);
+    }
+    let fetchResult = {
+        successCount: 0,
+        failedCount: 0,
+        totalSize: 0,
+        processingTimeMs: 0,
+        results: [],
+    };
+    if (externalCssUrls.length > 0) {
+        const fetcher = new external_css_fetcher_1.ExternalCssFetcher({
+            timeout: options.timeout ?? 5000,
+            maxSize: options.maxSize ?? 5 * 1024 * 1024, // 5MB
+            maxConcurrent: options.maxConcurrent ?? 5,
+        });
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.debug("[LayoutAnalyzerService] Fetching external CSS files", {
+                count: externalCssUrls.length,
+                urls: externalCssUrls,
+            });
+        }
+        const fetchAllOptions = {
+            timeout: options.timeout ?? 5000,
+            maxSize: options.maxSize ?? 5 * 1024 * 1024,
+            maxConcurrent: options.maxConcurrent ?? 5,
+            continueOnError: true,
+        };
+        // v0.1.0: 全体の外部CSS取得に30秒のハードタイムアウトを設定
+        // 多数のファイル（Tildaサイト等で43ファイル）のバッチ処理で
+        // 合計時間が膨れてページ分析全体がタイムアウトするのを防止
+        const EXTERNAL_CSS_OVERALL_TIMEOUT_MS = 30000; // 30秒
+        try {
+            const fetchAllResult = await Promise.race([
+                fetcher.fetchAllCss(externalCssUrls, fetchAllOptions),
+                new Promise((_, reject) => {
+                    setTimeout(() => {
+                        reject(new Error(`External CSS fetch overall timeout after ${EXTERNAL_CSS_OVERALL_TIMEOUT_MS}ms`));
+                    }, EXTERNAL_CSS_OVERALL_TIMEOUT_MS);
+                }),
+            ]);
+            // 結果を外部CSSチャンクに追加
+            for (const result of fetchAllResult.results) {
+                if (result.success && result.content) {
+                    const contentSize = result.contentSize ?? new TextEncoder().encode(result.content).length;
+                    externalCssContentChunks.push(`/* External CSS: ${result.url} (${contentSize} bytes) */\n${result.content}`);
+                }
+            }
+            // FetchAllCssDetailedResultの値を直接使用
+            fetchResult = {
+                successCount: fetchAllResult.successCount,
+                failedCount: fetchAllResult.failedCount,
+                totalSize: fetchAllResult.totalSize,
+                processingTimeMs: Date.now() - startTime,
+                results: fetchAllResult.results.map((r) => {
+                    const result = {
+                        url: r.url,
+                        content: r.success && r.content ? r.content : null,
+                    };
+                    if (r.error) {
+                        result.error = r.error;
+                    }
+                    return result;
+                }),
+            };
+            if ((0, logger_1.isDevelopment)()) {
+                logger_1.logger.debug("[LayoutAnalyzerService] External CSS fetch completed", {
+                    successCount: fetchResult.successCount,
+                    failedCount: fetchResult.failedCount,
+                    totalSize: fetchResult.totalSize,
+                    processingTimeMs: fetchResult.processingTimeMs,
+                });
+            }
+        }
+        catch (overallFetchError) {
+            // 全体タイムアウト: Graceful Degradation（インラインCSSのみで分析を継続）
+            if ((0, logger_1.isDevelopment)()) {
+                logger_1.logger.warn("[LayoutAnalyzerService] External CSS fetch overall timeout (graceful degradation)", {
+                    error: overallFetchError instanceof Error
+                        ? overallFetchError.message
+                        : String(overallFetchError),
+                    urlCount: externalCssUrls.length,
+                    timeoutMs: EXTERNAL_CSS_OVERALL_TIMEOUT_MS,
+                });
+            }
+            // fetchResult はデフォルト値のまま（successCount: 0）
+        }
+    }
+    return {
+        cssSnippet: cssChunks.length > 0 ? cssChunks.join("\n\n") : "",
+        externalCssContent: externalCssContentChunks.length > 0 ? externalCssContentChunks.join("\n\n") : "",
+        fetchResult,
+    };
+}
+// =====================================================
+// CSSフレームワーク検出
+// =====================================================
+/**
+ * Tailwind CSS検出パターン
+ */
+const TAILWIND_CDN_PATTERNS = [
+    "cdn.tailwindcss.com",
+    "tailwindcss.min.css",
+    "tailwindcss/base",
+    "tailwindcss/components",
+    "tailwindcss/utilities",
+];
+/**
+ * Tailwind CSSユーティリティクラスパターン
+ */
+const TAILWIND_UTILITY_PATTERNS = [
+    // Layout
+    "flex",
+    "grid",
+    "block",
+    "inline",
+    "hidden",
+    "absolute",
+    "relative",
+    "fixed",
+    "sticky",
+    "items-center",
+    "items-start",
+    "items-end",
+    "items-stretch",
+    "justify-center",
+    "justify-between",
+    "justify-start",
+    "justify-end",
+    "justify-around",
+    "flex-col",
+    "flex-row",
+    "flex-wrap",
+    "flex-1",
+    // Spacing - regex patterns
+    /^p-\d+$/,
+    /^px-\d+$/,
+    /^py-\d+$/,
+    /^pt-\d+$/,
+    /^pb-\d+$/,
+    /^pl-\d+$/,
+    /^pr-\d+$/,
+    /^m-\d+$/,
+    /^mx-\d+$/,
+    /^my-\d+$/,
+    /^mt-\d+$/,
+    /^mb-\d+$/,
+    /^ml-\d+$/,
+    /^mr-\d+$/,
+    /^-m\w?-\d+$/, // negative margins
+    /^gap-\d+$/,
+    /^gap-x-\d+$/,
+    /^gap-y-\d+$/,
+    /^space-[xy]-\d+$/,
+    // Sizing
+    /^w-\d+$/,
+    /^w-full$/,
+    /^w-screen$/,
+    /^w-auto$/,
+    /^w-\d+\/\d+$/,
+    /^h-\d+$/,
+    /^h-full$/,
+    /^h-screen$/,
+    /^h-auto$/,
+    /^min-w-/,
+    /^max-w-/,
+    /^min-h-/,
+    /^max-h-/,
+    // Colors
+    /^bg-\w+-\d+$/,
+    /^bg-\w+$/,
+    /^bg-gradient-/,
+    /^text-\w+-\d+$/,
+    /^text-white$/,
+    /^text-black$/,
+    /^border-\w+-\d+$/,
+    /^border-\w+$/,
+    // Typography
+    /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+    /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+    /^leading-\d+$/,
+    /^tracking-\w+$/,
+    // Borders & Rounded
+    /^rounded(-\w+)?$/,
+    /^rounded-(sm|md|lg|xl|2xl|3xl|full|none)$/,
+    /^border(-\d+)?$/,
+    /^border-(t|b|l|r)-\d+$/,
+    // Shadows
+    /^shadow(-\w+)?$/,
+    // Transforms
+    /^scale-\d+$/,
+    /^rotate-\d+$/,
+    /^translate-[xy]-\d+$/,
+    // Containers
+    "container",
+    "mx-auto",
+    // Grid
+    /^grid-cols-\d+$/,
+    /^col-span-\d+$/,
+    /^grid-rows-\d+$/,
+    /^row-span-\d+$/,
+    // Hover/Focus states
+    /^hover:/,
+    /^focus:/,
+    /^active:/,
+    /^disabled:/,
+    // Responsive prefixes
+    /^(sm|md|lg|xl|2xl):/,
+];
+/**
+ * Bootstrap検出パターン
+ */
+const BOOTSTRAP_CDN_PATTERNS = [
+    "bootstrap.min.css",
+    "bootstrap.css",
+    "bootstrap.bundle",
+    "cdn.jsdelivr.net/npm/bootstrap",
+    "stackpath.bootstrapcdn.com",
+    "maxcdn.bootstrapcdn.com/bootstrap",
+];
+/**
+ * Bootstrapクラスパターン
+ */
+const BOOTSTRAP_CLASS_PATTERNS = [
+    // Components
+    "navbar",
+    "navbar-expand",
+    "navbar-dark",
+    "navbar-light",
+    "navbar-brand",
+    "navbar-nav",
+    "nav-link",
+    "nav-item",
+    "btn",
+    /^btn-\w+$/,
+    "btn-primary",
+    "btn-secondary",
+    "btn-success",
+    "btn-danger",
+    "btn-warning",
+    "btn-info",
+    "btn-light",
+    "btn-dark",
+    "card",
+    "card-body",
+    "card-header",
+    "card-footer",
+    "card-title",
+    "card-text",
+    "card-img",
+    "card-img-top",
+    "modal",
+    "modal-dialog",
+    "modal-content",
+    "modal-header",
+    "modal-body",
+    "modal-footer",
+    "alert",
+    /^alert-\w+$/,
+    "badge",
+    /^badge-\w+$/,
+    "form-control",
+    "form-group",
+    "form-label",
+    "form-check",
+    "form-select",
+    "table",
+    "table-striped",
+    "table-bordered",
+    "table-hover",
+    "list-group",
+    "list-group-item",
+    "dropdown",
+    "dropdown-menu",
+    "dropdown-item",
+    "dropdown-toggle",
+    "accordion",
+    "accordion-item",
+    "accordion-header",
+    "accordion-body",
+    // Layout
+    "container",
+    "container-fluid",
+    "container-sm",
+    "container-md",
+    "container-lg",
+    "container-xl",
+    "row",
+    "col",
+    /^col-\d+$/,
+    /^col-md-\d+$/,
+    /^col-lg-\d+$/,
+    /^col-sm-\d+$/,
+    /^col-xl-\d+$/,
+    // Utilities
+    "d-flex",
+    "d-grid",
+    "d-block",
+    "d-inline",
+    "d-none",
+    "justify-content-center",
+    "justify-content-between",
+    "justify-content-start",
+    "justify-content-end",
+    "align-items-center",
+    "align-items-start",
+    "align-items-end",
+    /^mt-\d+$/,
+    /^mb-\d+$/,
+    /^ms-\d+$/,
+    /^me-\d+$/,
+    /^mx-\d+$/,
+    /^my-\d+$/,
+    /^pt-\d+$/,
+    /^pb-\d+$/,
+    /^ps-\d+$/,
+    /^pe-\d+$/,
+    /^px-\d+$/,
+    /^py-\d+$/,
+    /^text-\w+$/,
+    /^bg-\w+$/,
+];
+/**
+ * CSS Modules検出パターン
+ * 複数の形式に対応:
+ * 1. 従来形式: component_class__hash (e.g., Header_title__abc123)
+ * 2. GitHub/Next.js形式: ComponentName-module__className--hash (e.g., MarketingNavigation-module__nav--jA9Zq)
+ * 3. Vite形式: _class_hash (e.g., _title_1a2b3)
+ * 4. Webpack 5形式: ComponentModule-class-hash (e.g., HeaderModule-title-abc12)
+ */
+const CSS_MODULES_PATTERNS = [
+    // 従来形式: component_class__hash
+    /^[a-zA-Z][a-zA-Z0-9]*_[a-zA-Z][a-zA-Z0-9]*__[a-zA-Z0-9]{5,}$/,
+    // GitHub/Next.js形式: ComponentName-module__className--hash
+    /^[a-zA-Z][a-zA-Z0-9]*-module__[a-zA-Z][a-zA-Z0-9_-]*--[a-zA-Z0-9]{4,}$/,
+    // 汎用形式: ComponentName__className--hash (moduleなし)
+    /^[a-zA-Z][a-zA-Z0-9-]*__[a-zA-Z][a-zA-Z0-9_-]*--[a-zA-Z0-9]{4,}$/,
+    // Vite形式: _class_hash
+    /^_[a-zA-Z][a-zA-Z0-9]*_[a-zA-Z0-9]{5,}$/,
+];
+/**
+ * styled-components / Emotion検出パターン
+ */
+const STYLED_COMPONENTS_PATTERNS = [
+    /^sc-[a-zA-Z0-9]+$/, // styled-components: sc-xyz123
+    /^css-[a-zA-Z0-9]+$/, // Emotion: css-xyz123
+    /^emotion-[a-zA-Z0-9]+$/, // Emotion: emotion-xyz123
+    /^e[a-z0-9]{6,}$/, // Emotion hash classes
+];
+// =====================================================
+// No-Code Tools / Additional Framework Patterns
+// =====================================================
+/**
+ * Webflow CDN検出パターン
+ */
+const WEBFLOW_CDN_PATTERNS = [
+    "assets.website-files.com",
+    "uploads-ssl.webflow.com",
+    "global-uploads.webflow.com",
+    "d3e54v103j8qbb.cloudfront.net", // Webflow CDN
+];
+/**
+ * Webflowクラス検出パターン
+ * Webflowは .w-* クラスパターンを使用
+ * 3つ以上マッチで確定（高信頼度）
+ */
+const WEBFLOW_CLASS_PATTERNS = [
+    // Layout
+    /^w-container$/,
+    /^w-row$/,
+    /^w-col$/,
+    /^w-col-\d+$/,
+    /^w-layout-grid$/,
+    /^w-layout-\w+$/, // w-layout-* variants
+    // Display/Inline
+    /^w-inline-block$/,
+    /^w-inline$/,
+    /^w-block$/,
+    // Navigation
+    /^w-nav$/,
+    /^w-nav-brand$/,
+    /^w-nav-menu$/,
+    /^w-nav-link$/,
+    /^w-nav-button$/,
+    /^w-nav-overlay$/,
+    /^w-icon-nav-menu$/,
+    // Form
+    /^w-form$/,
+    /^w-form-\w+$/, // w-form-done, w-form-fail, etc.
+    /^w-input$/,
+    /^w-button$/,
+    /^w-select$/,
+    /^w-checkbox$/,
+    /^w-checkbox-input$/,
+    /^w-radio$/,
+    /^w-radio-input$/,
+    /^w-file-upload$/,
+    /^w-file-upload-\w+$/,
+    // Slider
+    /^w-slider$/,
+    /^w-slide$/,
+    /^w-slider-arrow-left$/,
+    /^w-slider-arrow-right$/,
+    /^w-slider-nav$/,
+    /^w-slider-dot$/,
+    /^w-slider-mask$/,
+    // Tabs
+    /^w-tabs$/,
+    /^w-tab-menu$/,
+    /^w-tab-link$/,
+    /^w-tab-content$/,
+    /^w-tab-pane$/,
+    // Lightbox
+    /^w-lightbox$/,
+    /^w-lightbox-thumbnail$/,
+    /^w-lightbox-\w+$/,
+    // Dropdown
+    /^w-dropdown$/,
+    /^w-dropdown-toggle$/,
+    /^w-dropdown-list$/,
+    /^w-dropdown-link$/,
+    /^w-dropdown-btn$/,
+    // Rich text
+    /^w-richtext$/,
+    /^w-richtext-\w+$/,
+    // Embed
+    /^w-embed$/,
+    /^w-embed-\w+$/,
+    // Video
+    /^w-background-video$/,
+    /^w-video$/,
+    /^w-video-\w+$/,
+    // State classes (w--current, w--open, etc.)
+    /^w--current$/,
+    /^w--open$/,
+    /^w--active$/,
+    /^w--redirecting-to-tab$/,
+    /^w--tab-active$/,
+    // Modifier classes (w-mod-*)
+    /^w-mod-\w+$/,
+    /^w-mod-touch$/,
+    /^w-mod-js$/,
+    // Responsive hiding
+    /^w-hidden-\w+$/,
+    /^w-hidden$/,
+    // Condition classes
+    /^w-condition-invisible$/,
+    // Dynamic list
+    /^w-dyn-list$/,
+    /^w-dyn-item$/,
+    /^w-dyn-items$/,
+    /^w-dyn-bind-empty$/,
+    // Commerce
+    /^w-commerce-\w+$/,
+];
+/**
+ * jQuery UI CDN検出パターン
+ */
+const JQUERY_UI_CDN_PATTERNS = [
+    "code.jquery.com/ui",
+    "jquery-ui.min.js",
+    "jquery-ui.js",
+    "jquery-ui.min.css",
+    "jquery-ui.css",
+    "themes/base/jquery-ui",
+];
+/**
+ * jQuery UIクラス検出パターン
+ * jQuery UIは ui-* クラスパターンを使用
+ */
+const JQUERY_UI_CLASS_PATTERNS = [
+    // Core
+    /^ui-widget$/,
+    /^ui-widget-header$/,
+    /^ui-widget-content$/,
+    /^ui-widget-overlay$/,
+    /^ui-helper-\w+$/,
+    /^ui-corner-\w+$/,
+    // States
+    /^ui-state-default$/,
+    /^ui-state-hover$/,
+    /^ui-state-focus$/,
+    /^ui-state-active$/,
+    /^ui-state-highlight$/,
+    /^ui-state-error$/,
+    /^ui-state-disabled$/,
+    // Buttons
+    /^ui-button$/,
+    /^ui-button-\w+$/,
+    // Dialog
+    /^ui-dialog$/,
+    /^ui-dialog-\w+$/,
+    // Accordion
+    /^ui-accordion$/,
+    /^ui-accordion-\w+$/,
+    // Tabs
+    /^ui-tabs$/,
+    /^ui-tabs-\w+$/,
+    // Menu
+    /^ui-menu$/,
+    /^ui-menu-\w+$/,
+    // Autocomplete
+    /^ui-autocomplete$/,
+    /^ui-autocomplete-\w+$/,
+    // Datepicker
+    /^ui-datepicker$/,
+    /^ui-datepicker-\w+$/,
+    // Progressbar
+    /^ui-progressbar$/,
+    /^ui-progressbar-\w+$/,
+    // Slider (jQuery UI Slider)
+    /^ui-slider$/,
+    /^ui-slider-\w+$/,
+    // Sortable/Draggable
+    /^ui-sortable$/,
+    /^ui-draggable$/,
+    /^ui-droppable$/,
+    /^ui-resizable$/,
+    /^ui-selectable$/,
+];
+/**
+ * Squarespace CDN検出パターン
+ */
+const SQUARESPACE_CDN_PATTERNS = [
+    "static1.squarespace.com",
+    "static.squarespace.com",
+    "squarespace-cdn.com",
+    "sqsp.io",
+];
+/**
+ * Squarespaceクラス検出パターン
+ * Squarespaceは sqs-* クラスパターンを使用
+ */
+const SQUARESPACE_CLASS_PATTERNS = [
+    // Layout
+    /^sqs-layout$/,
+    /^sqs-row$/,
+    /^sqs-col-\d+$/,
+    /^sqs-grid-\d+$/,
+    // Blocks
+    /^sqs-block$/,
+    /^sqs-block-\w+$/,
+    /^sqs-block-content$/,
+    // Gallery
+    /^sqs-gallery$/,
+    /^sqs-gallery-\w+$/,
+    // Slide
+    /^sqs-slide$/,
+    /^sqs-slide-\w+$/,
+    // Other
+    /^sqs-image$/,
+    /^sqs-title$/,
+    /^sqs-button$/,
+    /^sqs-video$/,
+    /^sqs-audio$/,
+    /^sqs-html-content$/,
+];
+/**
+ * Framer検出パターン（クラス + data-framer-* 属性）
+ */
+const FRAMER_CLASS_PATTERNS = [
+    // Class patterns
+    /^framer-[a-zA-Z0-9]+$/, // framer-1abc23
+    /^framer-text$/,
+    /^framer-container$/,
+    /^framer-button$/,
+    /^framer-link$/,
+    /^framer-image$/,
+    /^framer-video$/,
+    /^framer-nav$/,
+    /^framer-rich-text-container$/,
+];
+/**
+ * Framer data-* 属性検出パターン
+ */
+const FRAMER_DATA_ATTRIBUTES = [
+    "data-framer-name",
+    "data-framer-component-type",
+    "data-framer-appear-id",
+    "data-framer-generated",
+];
+/**
+ * Elementor CDN検出パターン
+ */
+const ELEMENTOR_CDN_PATTERNS = [
+    "/wp-content/plugins/elementor/",
+    "/wp-content/plugins/elementor-pro/",
+    "elementor/assets/",
+];
+/**
+ * Elementorクラス検出パターン
+ * Elementorは elementor-* クラスパターンを使用
+ */
+const ELEMENTOR_CLASS_PATTERNS = [
+    // Core
+    /^elementor$/,
+    /^elementor-\d+$/, // elementor-123
+    /^elementor-page$/,
+    /^elementor-kit-\d+$/,
+    // Sections
+    /^elementor-section$/,
+    /^elementor-section-\w+$/,
+    /^elementor-top-section$/,
+    /^elementor-inner-section$/,
+    // Columns
+    /^elementor-column$/,
+    /^elementor-col-\d+$/,
+    /^elementor-column-gap-\w+$/,
+    // Widgets
+    /^elementor-widget$/,
+    /^elementor-widget-\w+$/,
+    /^elementor-widget-container$/,
+    /^elementor-widget-wrap$/,
+    // Container
+    /^elementor-container$/,
+    // Elements
+    /^elementor-heading-title$/,
+    /^elementor-button$/,
+    /^elementor-button-\w+$/,
+    /^elementor-image$/,
+    /^elementor-size-\w+$/,
+    /^elementor-text-editor$/,
+];
+/**
+ * Wixクラス検出パターン
+ * Wixは wixui-* や comp-* などのパターンを使用
+ */
+const WIX_CLASS_PATTERNS = [
+    // wixui components
+    /^wixui-\w+$/,
+    /^wixui-vertical-menu$/,
+    /^wixui-vertical-menu__\w+$/,
+    /^wixui-button$/,
+    /^wixui-button__\w+$/,
+    /^wixui-rich-text$/,
+    /^wixui-rich-text__\w+$/,
+    // comp- patterns
+    /^comp-\w+$/,
+    // font classes (Wix specific)
+    /^font_\d+$/,
+    // _3xyz hash classes (common in Wix)
+    /^_[0-9a-zA-Z]{4,}$/,
+];
+/**
+ * Wix構造検出パターン（ID）
+ */
+const WIX_STRUCTURE_IDS = [
+    "SITE_CONTAINER",
+    "SITE_HEADER",
+    "SITE_PAGES",
+    "SITE_FOOTER",
+    "masterPage",
+    "PAGES_CONTAINER",
+];
+/**
+ * クラス名がパターンにマッチするかチェック
+ */
+function matchesPattern(className, pattern) {
+    if (typeof pattern === "string") {
+        return className === pattern;
+    }
+    return pattern.test(className);
+}
+/**
+ * HTMLからCSSフレームワークを検出
+ *
+ * 検出対象:
+ * - Tailwind CSS（CDNスクリプト/リンク、ユーティリティクラス）
+ * - Bootstrap（CDNリンク、コンポーネントクラス）
+ * - CSS Modules（[component]_[class]__[hash] 形式）
+ * - styled-components/Emotion（sc-*, css-* 形式）
+ * - Webflow（.w-* クラスパターン）
+ * - jQuery UI（.ui-* クラスパターン）
+ * - Squarespace（.sqs-* クラスパターン）
+ * - Framer（.framer-* クラス、data-framer-* 属性）
+ * - Elementor（.elementor-* クラスパターン）
+ * - Wix（.wixui-* クラス、SITE_* 構造）
+ * - vanilla CSS（上記に該当しない場合）
+ *
+ * @param $ - CheerioAPI
+ * @param html - 元のHTML文字列（CDN検出用）
+ * @returns CSSフレームワーク検出結果
+ */
+function detectCssFramework($, html) {
+    const scores = [
+        { framework: "tailwind", score: 0, evidence: [], cdnDetected: false },
+        { framework: "bootstrap", score: 0, evidence: [], cdnDetected: false },
+        { framework: "css_modules", score: 0, evidence: [], cdnDetected: false },
+        { framework: "styled_components", score: 0, evidence: [], cdnDetected: false },
+        { framework: "webflow", score: 0, evidence: [], cdnDetected: false },
+        { framework: "jquery_ui", score: 0, evidence: [], cdnDetected: false },
+        { framework: "squarespace", score: 0, evidence: [], cdnDetected: false },
+        { framework: "framer", score: 0, evidence: [], cdnDetected: false },
+        { framework: "elementor", score: 0, evidence: [], cdnDetected: false },
+        { framework: "wix", score: 0, evidence: [], cdnDetected: false },
+    ];
+    const getScore = (framework) => scores.find((s) => s.framework === framework);
+    // =====================================================
+    // 1. CDN/外部参照検出（高信頼度）
+    // =====================================================
+    // Tailwind CDN検出
+    for (const pattern of TAILWIND_CDN_PATTERNS) {
+        if (html.includes(pattern)) {
+            getScore("tailwind").score += 50;
+            getScore("tailwind").evidence.push(`CDN detected: ${pattern}`);
+            getScore("tailwind").cdnDetected = true;
+        }
+    }
+    // Bootstrap CDN検出
+    for (const pattern of BOOTSTRAP_CDN_PATTERNS) {
+        if (html.includes(pattern)) {
+            getScore("bootstrap").score += 50;
+            getScore("bootstrap").evidence.push(`CDN detected: ${pattern}`);
+            getScore("bootstrap").cdnDetected = true;
+        }
+    }
+    // Webflow CDN検出
+    for (const pattern of WEBFLOW_CDN_PATTERNS) {
+        if (html.includes(pattern)) {
+            getScore("webflow").score += 50;
+            getScore("webflow").evidence.push(`Webflow CDN detected: ${pattern}`);
+            getScore("webflow").cdnDetected = true;
+        }
+    }
+    // jQuery UI CDN検出
+    for (const pattern of JQUERY_UI_CDN_PATTERNS) {
+        if (html.includes(pattern)) {
+            getScore("jquery_ui").score += 50;
+            getScore("jquery_ui").evidence.push(`jQuery UI CDN detected: ${pattern}`);
+            getScore("jquery_ui").cdnDetected = true;
+        }
+    }
+    // Squarespace CDN検出
+    for (const pattern of SQUARESPACE_CDN_PATTERNS) {
+        if (html.includes(pattern)) {
+            getScore("squarespace").score += 50;
+            getScore("squarespace").evidence.push(`Squarespace CDN detected: ${pattern}`);
+            getScore("squarespace").cdnDetected = true;
+        }
+    }
+    // Elementor CDN検出
+    for (const pattern of ELEMENTOR_CDN_PATTERNS) {
+        if (html.includes(pattern)) {
+            getScore("elementor").score += 50;
+            getScore("elementor").evidence.push(`Elementor plugin detected: ${pattern}`);
+            getScore("elementor").cdnDetected = true;
+        }
+    }
+    // =====================================================
+    // 2. data-* 属性検出（Framer専用）
+    // =====================================================
+    let framerDataAttrCount = 0;
+    for (const attr of FRAMER_DATA_ATTRIBUTES) {
+        const elements = $(`[${attr}]`);
+        if (elements.length > 0) {
+            framerDataAttrCount += elements.length;
+        }
+    }
+    if (framerDataAttrCount > 0) {
+        const attrScore = Math.min(framerDataAttrCount * 10, 60);
+        getScore("framer").score += attrScore;
+        getScore("framer").evidence.push(`Found ${framerDataAttrCount} Framer data-* attributes`);
+    }
+    // =====================================================
+    // 3. Wix構造検出（ID ベース）
+    // =====================================================
+    let wixStructureCount = 0;
+    for (const id of WIX_STRUCTURE_IDS) {
+        if ($(`#${id}`).length > 0) {
+            wixStructureCount++;
+        }
+    }
+    if (wixStructureCount >= 2) {
+        const structureScore = Math.min(wixStructureCount * 15, 45);
+        getScore("wix").score += structureScore;
+        getScore("wix").evidence.push(`Found ${wixStructureCount} Wix structure IDs (SITE_*)`);
+    }
+    // =====================================================
+    // 4. クラス名パターン検出
+    // =====================================================
+    // 全クラス名を収集
+    const allClasses = new Set();
+    $("[class]").each((_, elem) => {
+        const classAttr = $(elem).attr("class");
+        if (classAttr) {
+            for (const className of classAttr.split(/\s+/)) {
+                const trimmed = className.trim();
+                if (trimmed.length > 0) {
+                    allClasses.add(trimmed);
+                }
+            }
+        }
+    });
+    // クラス名カウンター
+    let tailwindClassCount = 0;
+    let bootstrapClassCount = 0;
+    let cssModulesClassCount = 0;
+    let styledComponentsClassCount = 0;
+    let webflowClassCount = 0;
+    let jqueryUiClassCount = 0;
+    let squarespaceClassCount = 0;
+    let framerClassCount = 0;
+    let elementorClassCount = 0;
+    let wixClassCount = 0;
+    const cssModulesExamples = [];
+    const styledComponentsExamples = [];
+    const webflowExamples = [];
+    const jqueryUiExamples = [];
+    const squarespaceExamples = [];
+    const framerExamples = [];
+    const elementorExamples = [];
+    const wixExamples = [];
+    for (const className of allClasses) {
+        // Tailwind検出
+        for (const pattern of TAILWIND_UTILITY_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                tailwindClassCount++;
+                break;
+            }
+        }
+        // Bootstrap検出
+        for (const pattern of BOOTSTRAP_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                bootstrapClassCount++;
+                break;
+            }
+        }
+        // CSS Modules検出（複数パターンに対応）
+        for (const cssModulesPattern of CSS_MODULES_PATTERNS) {
+            if (cssModulesPattern.test(className)) {
+                cssModulesClassCount++;
+                if (cssModulesExamples.length < 3) {
+                    cssModulesExamples.push(className);
+                }
+                break;
+            }
+        }
+        // styled-components / Emotion検出
+        for (const pattern of STYLED_COMPONENTS_PATTERNS) {
+            if (pattern.test(className)) {
+                styledComponentsClassCount++;
+                if (styledComponentsExamples.length < 3) {
+                    styledComponentsExamples.push(className);
+                }
+                break;
+            }
+        }
+        // Webflow検出
+        for (const pattern of WEBFLOW_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                webflowClassCount++;
+                if (webflowExamples.length < 3) {
+                    webflowExamples.push(className);
+                }
+                break;
+            }
+        }
+        // jQuery UI検出
+        for (const pattern of JQUERY_UI_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                jqueryUiClassCount++;
+                if (jqueryUiExamples.length < 3) {
+                    jqueryUiExamples.push(className);
+                }
+                break;
+            }
+        }
+        // Squarespace検出
+        for (const pattern of SQUARESPACE_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                squarespaceClassCount++;
+                if (squarespaceExamples.length < 3) {
+                    squarespaceExamples.push(className);
+                }
+                break;
+            }
+        }
+        // Framer検出
+        for (const pattern of FRAMER_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                framerClassCount++;
+                if (framerExamples.length < 3) {
+                    framerExamples.push(className);
+                }
+                break;
+            }
+        }
+        // Elementor検出
+        for (const pattern of ELEMENTOR_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                elementorClassCount++;
+                if (elementorExamples.length < 3) {
+                    elementorExamples.push(className);
+                }
+                break;
+            }
+        }
+        // Wix検出
+        for (const pattern of WIX_CLASS_PATTERNS) {
+            if (matchesPattern(className, pattern)) {
+                wixClassCount++;
+                if (wixExamples.length < 3) {
+                    wixExamples.push(className);
+                }
+                break;
+            }
+        }
+    }
+    // =====================================================
+    // 5. スコア計算
+    // =====================================================
+    // Tailwind: ユーティリティクラス数に基づくスコア
+    if (tailwindClassCount > 0) {
+        // 10クラス以上で顕著、30クラス以上で確実
+        const classScore = Math.min(tailwindClassCount * 2, 50);
+        getScore("tailwind").score += classScore;
+        getScore("tailwind").evidence.push(`Found ${tailwindClassCount} Tailwind utility classes`);
+    }
+    // Bootstrap: コンポーネントクラス数に基づくスコア
+    if (bootstrapClassCount > 0) {
+        const classScore = Math.min(bootstrapClassCount * 3, 50);
+        getScore("bootstrap").score += classScore;
+        getScore("bootstrap").evidence.push(`Found ${bootstrapClassCount} Bootstrap component classes`);
+    }
+    // CSS Modules: ハッシュ付きクラス数に基づくスコア
+    if (cssModulesClassCount > 0) {
+        const classScore = Math.min(cssModulesClassCount * 5, 70);
+        getScore("css_modules").score += classScore;
+        getScore("css_modules").evidence.push(`Found ${cssModulesClassCount} CSS Modules pattern classes (e.g., ${cssModulesExamples.join(", ")})`);
+    }
+    // styled-components: パターンマッチ数に基づくスコア
+    if (styledComponentsClassCount > 0) {
+        const classScore = Math.min(styledComponentsClassCount * 5, 70);
+        getScore("styled_components").score += classScore;
+        getScore("styled_components").evidence.push(`Found ${styledComponentsClassCount} styled-components/Emotion classes (e.g., ${styledComponentsExamples.join(", ")})`);
+    }
+    // Webflow: w-* クラス数に基づくスコア
+    if (webflowClassCount > 0) {
+        const classScore = Math.min(webflowClassCount * 5, 70);
+        getScore("webflow").score += classScore;
+        getScore("webflow").evidence.push(`Found ${webflowClassCount} Webflow classes (e.g., ${webflowExamples.join(", ")})`);
+    }
+    // jQuery UI: ui-* クラス数に基づくスコア
+    if (jqueryUiClassCount > 0) {
+        const classScore = Math.min(jqueryUiClassCount * 5, 70);
+        getScore("jquery_ui").score += classScore;
+        getScore("jquery_ui").evidence.push(`Found ${jqueryUiClassCount} jQuery UI classes (e.g., ${jqueryUiExamples.join(", ")})`);
+    }
+    // Squarespace: sqs-* クラス数に基づくスコア
+    if (squarespaceClassCount > 0) {
+        const classScore = Math.min(squarespaceClassCount * 5, 70);
+        getScore("squarespace").score += classScore;
+        getScore("squarespace").evidence.push(`Found ${squarespaceClassCount} Squarespace classes (e.g., ${squarespaceExamples.join(", ")})`);
+    }
+    // Framer: framer-* クラス数に基づくスコア
+    if (framerClassCount > 0) {
+        const classScore = Math.min(framerClassCount * 5, 70);
+        getScore("framer").score += classScore;
+        getScore("framer").evidence.push(`Found ${framerClassCount} Framer classes (e.g., ${framerExamples.join(", ")})`);
+    }
+    // Elementor: elementor-* クラス数に基づくスコア
+    if (elementorClassCount > 0) {
+        const classScore = Math.min(elementorClassCount * 5, 70);
+        getScore("elementor").score += classScore;
+        getScore("elementor").evidence.push(`Found ${elementorClassCount} Elementor classes (e.g., ${elementorExamples.join(", ")})`);
+    }
+    // Wix: comp-* / style-* クラス数に基づくスコア
+    if (wixClassCount > 0) {
+        const classScore = Math.min(wixClassCount * 5, 70);
+        getScore("wix").score += classScore;
+        getScore("wix").evidence.push(`Found ${wixClassCount} Wix classes (e.g., ${wixExamples.join(", ")})`);
+    }
+    // =====================================================
+    // 4. CSS変数検出
+    // =====================================================
+    const cssVariablesResult = detectCssVariables(html);
+    // =====================================================
+    // 5. 結果決定
+    // =====================================================
+    // 最高スコアのフレームワークを選択
+    const sortedScores = [...scores].sort((a, b) => b.score - a.score);
+    const topScore = sortedScores[0];
+    // スコアが低すぎる場合はvanilla
+    if (!topScore || topScore.score < 10) {
+        const vanillaResult = {
+            framework: "vanilla",
+            confidence: 0.3,
+            evidence: ["No significant CSS framework patterns detected"],
+        };
+        // CSS変数が検出された場合のみcompositeを追加
+        if (cssVariablesResult.detected) {
+            vanillaResult.composite = {
+                primary: "vanilla",
+                secondary: [],
+                confidenceMap: { vanilla: 0.3 },
+                hasCssVariables: true,
+                cssVariablesConfidence: cssVariablesResult.confidence,
+            };
+            vanillaResult.evidence.push(`Detected ${cssVariablesResult.variableCount} CSS custom properties (e.g., ${cssVariablesResult.examples.slice(0, 3).join(", ")})`);
+        }
+        return vanillaResult;
+    }
+    // 信頼度計算（0-1）
+    // CDN検出 → 高信頼度、クラスパターンのみ → 中程度
+    let confidence;
+    if (topScore.cdnDetected) {
+        confidence = Math.min(0.9 + (topScore.score - 50) * 0.002, 0.99);
+    }
+    else {
+        // クラスパターンのみの場合、スコアに基づく信頼度
+        confidence = Math.min(0.5 + topScore.score * 0.01, 0.89);
+    }
+    // =====================================================
+    // 6. 複合検出結果の構築
+    // =====================================================
+    const result = {
+        framework: topScore.framework,
+        confidence: Math.round(confidence * 100) / 100,
+        evidence: topScore.evidence,
+    };
+    // セカンダリフレームワークを検出（プライマリの30%以上のスコアがあるもの）
+    const secondaryThreshold = topScore.score * 0.3;
+    const secondaryFrameworks = [];
+    const confidenceMap = {
+        [topScore.framework]: result.confidence,
+    };
+    for (let i = 1; i < sortedScores.length; i++) {
+        const scoreEntry = sortedScores[i];
+        if (scoreEntry === undefined) {
+            continue;
+        }
+        if (scoreEntry.score >= secondaryThreshold && scoreEntry.score >= 10) {
+            secondaryFrameworks.push(scoreEntry.framework);
+            // セカンダリの信頼度計算
+            let secondaryConfidence;
+            if (scoreEntry.cdnDetected) {
+                secondaryConfidence = Math.min(0.9 + (scoreEntry.score - 50) * 0.002, 0.99);
+            }
+            else {
+                secondaryConfidence = Math.min(0.5 + scoreEntry.score * 0.01, 0.89);
+            }
+            confidenceMap[scoreEntry.framework] = Math.round(secondaryConfidence * 100) / 100;
+            // evidenceにセカンダリ検出を追加
+            const evidenceText = scoreEntry.evidence[0] ?? "pattern matches";
+            result.evidence.push(`Also detected ${scoreEntry.framework}: ${evidenceText}`);
+        }
+    }
+    // 複合検出がある場合（セカンダリフレームワークまたはCSS変数がある場合）
+    if (secondaryFrameworks.length > 0 || cssVariablesResult.detected) {
+        result.composite = {
+            primary: topScore.framework,
+            secondary: secondaryFrameworks,
+            confidenceMap,
+            hasCssVariables: cssVariablesResult.detected,
+        };
+        if (cssVariablesResult.detected) {
+            result.composite.cssVariablesConfidence = cssVariablesResult.confidence;
+            result.evidence.push(`Detected ${cssVariablesResult.variableCount} CSS custom properties (e.g., ${cssVariablesResult.examples.slice(0, 3).join(", ")})`);
+        }
+    }
+    return result;
+}
+function detectCssVariables(html) {
+    // var(--*) パターンを検出（クラス属性、style属性、<style>タグ内）
+    const varPattern = /var\s*\(\s*(--[\w-]+)\s*(?:,\s*[^)]+)?\s*\)/g;
+    const definitionPattern = /(--[\w-]+)\s*:/g;
+    const usedVariables = new Set();
+    const definedVariables = new Set();
+    // var(--*) の使用を検出
+    let match;
+    while ((match = varPattern.exec(html)) !== null) {
+        const varName = match[1];
+        if (varName !== undefined) {
+            usedVariables.add(varName);
+        }
+    }
+    // --variable: の定義を検出
+    while ((match = definitionPattern.exec(html)) !== null) {
+        const varName = match[1];
+        if (varName !== undefined) {
+            definedVariables.add(varName);
+        }
+    }
+    const allVariables = new Set([...usedVariables, ...definedVariables]);
+    const variableCount = allVariables.size;
+    const examples = Array.from(allVariables).slice(0, 5);
+    if (variableCount === 0) {
+        return {
+            detected: false,
+            confidence: 0,
+            variableCount: 0,
+            examples: [],
+        };
+    }
+    // 信頼度計算
+    // 3個以上で中程度、10個以上で高信頼度
+    let confidence;
+    if (variableCount >= 10) {
+        confidence = Math.min(0.8 + variableCount * 0.01, 0.95);
+    }
+    else if (variableCount >= 3) {
+        confidence = 0.6 + variableCount * 0.03;
+    }
+    else {
+        confidence = 0.4 + variableCount * 0.1;
+    }
+    return {
+        detected: true,
+        confidence: Math.round(confidence * 100) / 100,
+        variableCount,
+        examples,
+    };
+}
+/**
+ * CoreDetectedSection を DetectedSection に変換
+ *
+ * @param coreSection - コアのセクション
+ * @param includeContent - コンテンツを含めるか
+ * @param includeStyles - スタイルを含めるか
+ * @param sectionIndex - セクションインデックス（computed styles マッチング用）
+ * @param computedStyles - Computed Styles配列（オプション）
+ * @returns 変換されたDetectedSection（computed styles適用済みの場合はhtmlSnippetにインラインスタイル含む）
+ */
+function convertSection(coreSection, includeContent, includeStyles, sectionIndex, computedStyles) {
+    const section = {
+        id: (0, uuid_1.v7)(),
+        type: coreSection.type,
+        confidence: coreSection.confidence,
+        position: {
+            startY: coreSection.position.startY,
+            endY: coreSection.position.endY,
+            height: coreSection.position.height,
+        },
+    };
+    // 要素情報 - exactOptionalPropertyTypes対応
+    const element = {
+        tagName: coreSection.element.tagName,
+    };
+    if (coreSection.element.selector !== undefined) {
+        element.selector = coreSection.element.selector;
+    }
+    if (coreSection.element.classes !== undefined) {
+        element.classes = coreSection.element.classes;
+    }
+    if (coreSection.element.id !== undefined) {
+        element.id = coreSection.element.id;
+    }
+    section.element = element;
+    // コンテンツ情報（オプション）- exactOptionalPropertyTypes対応
+    if (includeContent && coreSection.content) {
+        const content = {};
+        if (coreSection.content.headings !== undefined) {
+            content.headings = coreSection.content.headings;
+        }
+        if (coreSection.content.paragraphs !== undefined) {
+            content.paragraphs = coreSection.content.paragraphs;
+        }
+        if (coreSection.content.links !== undefined) {
+            content.links = coreSection.content.links;
+        }
+        if (coreSection.content.images !== undefined) {
+            // images の alt プロパティも exactOptionalPropertyTypes 対応
+            content.images = coreSection.content.images.map((img) => {
+                const result = { src: img.src };
+                if (img.alt !== undefined) {
+                    result.alt = img.alt;
+                }
+                return result;
+            });
+        }
+        if (coreSection.content.buttons !== undefined) {
+            content.buttons = coreSection.content.buttons.map((b) => {
+                const result = { text: b.text };
+                if (b.type !== undefined) {
+                    result.type = b.type;
+                }
+                return result;
+            });
+        }
+        section.content = content;
+    }
+    // スタイル情報（オプション）- exactOptionalPropertyTypes対応
+    if (includeStyles && coreSection.style) {
+        const style = {};
+        if (coreSection.style.backgroundColor !== undefined) {
+            style.backgroundColor = coreSection.style.backgroundColor;
+        }
+        if (coreSection.style.textColor !== undefined) {
+            style.textColor = coreSection.style.textColor;
+        }
+        if (coreSection.style.hasGradient !== undefined) {
+            style.hasGradient = coreSection.style.hasGradient;
+        }
+        if (coreSection.style.hasImage !== undefined) {
+            style.hasImage = coreSection.style.hasImage;
+        }
+        section.style = style;
+    }
+    // HTMLスニペット（存在する場合のみ）- exactOptionalPropertyTypes対応
+    if (coreSection.htmlSnippet !== undefined) {
+        let htmlSnippet = coreSection.htmlSnippet;
+        // Computed Styles をインラインスタイルとして適用
+        if (computedStyles && computedStyles.length > 0 && sectionIndex !== undefined) {
+            const matchingStyles = findMatchingComputedStyles(sectionIndex, computedStyles);
+            if (matchingStyles) {
+                htmlSnippet = applyComputedStylesToHtml(htmlSnippet, matchingStyles);
+                if ((0, logger_1.isDevelopment)()) {
+                    logger_1.logger.debug("[convertSection] Applied computed styles to section", {
+                        sectionIndex,
+                        sectionType: coreSection.type,
+                        childCount: matchingStyles.children?.length ?? 0,
+                    });
+                }
+            }
+        }
+        section.htmlSnippet = htmlSnippet;
+    }
+    return section;
+}
+// =====================================================
+// LayoutAnalyzerService クラス
+// =====================================================
+/**
+ * レイアウト解析サービス
+ *
+ * Cheerioと@reftrixmcp/webdesign-coreを使用してHTMLを解析し、
+ * セクション、グリッド、タイポグラフィ、色情報を抽出する
+ */
+class LayoutAnalyzerService {
+    sectionDetector;
+    constructor() {
+        this.sectionDetector = new webdesign_core_1.SectionDetector({
+            detectLandmarks: true,
+            detectSemanticTags: true,
+            detectVisualSections: true,
+            maxSectionsPerType: 30,
+        });
+    }
+    /**
+     * HTMLを解析してレイアウト情報を抽出
+     *
+     * @param html - 解析対象のHTML
+     * @param options - 解析オプション
+     * @returns レイアウト解析結果
+     */
+    async analyze(html, options = {}) {
+        const startTime = Date.now();
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.debug("[LayoutAnalyzerService] analyze called", {
+                htmlLength: html.length,
+                options,
+            });
+        }
+        try {
+            // 空のHTMLをチェック
+            if (!html || html.trim().length === 0) {
+                return {
+                    success: true,
+                    sections: [],
+                    sectionCount: 0,
+                    sectionTypes: {},
+                    cssFramework: {
+                        framework: "vanilla",
+                        confidence: 0.3,
+                        evidence: ["Empty or minimal HTML content"],
+                    },
+                    processingTimeMs: Date.now() - startTime,
+                };
+            }
+            // Cheerioでパース
+            const $ = cheerio.load(html);
+            // セクション検出（@reftrixmcp/webdesign-core使用）
+            let coreSections;
+            try {
+                coreSections = await this.sectionDetector.detect(html);
+            }
+            catch (detectionError) {
+                // 検出エラーでも続行（空の配列で続ける）
+                if ((0, logger_1.isDevelopment)()) {
+                    logger_1.logger.warn("[LayoutAnalyzerService] Section detection error", {
+                        error: detectionError,
+                    });
+                }
+                coreSections = [];
+            }
+            // セクションを変換
+            const includeContent = options.includeContent ?? false;
+            const includeStyles = options.includeStyles ?? false;
+            let sections = coreSections.map((cs, index) => convertSection(cs, includeContent, includeStyles, index, options.computedStyles));
+            // Computed styles 適用数のカウント
+            let computedStylesAppliedCount = 0;
+            if (options.computedStyles && options.computedStyles.length > 0) {
+                for (let i = 0; i < sections.length; i++) {
+                    if (findMatchingComputedStyles(i, options.computedStyles)) {
+                        computedStylesAppliedCount++;
+                    }
+                }
+            }
+            // maxSections制限
+            if (options.maxSections !== undefined && sections.length > options.maxSections) {
+                sections = sections.slice(0, options.maxSections);
+            }
+            // セクションタイプ別カウント
+            const sectionTypes = {};
+            for (const section of sections) {
+                sectionTypes[section.type] = (sectionTypes[section.type] || 0) + 1;
+            }
+            // グリッド情報
+            const grid = detectGridLayout($, html);
+            // タイポグラフィ情報
+            const typography = extractTypography($, html);
+            // CSS抽出（外部CSS取得オプション対応）
+            let cssSnippet;
+            let externalCssFetch;
+            let externalCssContent;
+            if (options.externalCss?.fetchExternalCss && options.externalCss.baseUrl) {
+                // 外部CSSファイルの内容を取得
+                const cssResult = await extractCssWithExternalContent($, options.externalCss);
+                cssSnippet = cssResult.cssSnippet;
+                externalCssContent =
+                    cssResult.externalCssContent && cssResult.externalCssContent.trim().length > 0
+                        ? cssResult.externalCssContent
+                        : undefined;
+                externalCssFetch = cssResult.fetchResult;
+            }
+            else {
+                // 従来通り参照のみ
+                cssSnippet = extractCssSnippet($);
+            }
+            // 色情報（外部CSSを含めてCSS変数を解決）
+            const combinedExternalCss = externalCssContent
+                ? [cssSnippet, externalCssContent].filter(Boolean).join("\n\n")
+                : undefined;
+            const colors = extractColors($, html, combinedExternalCss);
+            // CSSフレームワーク検出（外部CSSを含めた場合は再度検出）
+            // 外部CSSを取得した場合は、その内容も含めてフレームワーク検出を行う
+            let cssFramework;
+            if (externalCssFetch &&
+                externalCssFetch.successCount > 0 &&
+                (cssSnippet || externalCssContent)) {
+                // 外部CSSの内容を含めたHTMLを構築して検出
+                const combinedCss = [cssSnippet, externalCssContent].filter(Boolean).join("\n\n");
+                const htmlWithCss = html + `<style>${combinedCss}</style>`;
+                cssFramework = detectCssFramework($, htmlWithCss);
+            }
+            else {
+                cssFramework = detectCssFramework($, html);
+            }
+            const processingTimeMs = Date.now() - startTime;
+            if ((0, logger_1.isDevelopment)()) {
+                logger_1.logger.debug("[LayoutAnalyzerService] analyze completed", {
+                    sectionCount: sections.length,
+                    sectionTypes,
+                    cssFramework: cssFramework.framework,
+                    cssFrameworkConfidence: cssFramework.confidence,
+                    externalCssFetch: externalCssFetch
+                        ? {
+                            successCount: externalCssFetch.successCount,
+                            failedCount: externalCssFetch.failedCount,
+                            totalSize: externalCssFetch.totalSize,
+                        }
+                        : undefined,
+                    computedStylesAppliedCount,
+                    processingTimeMs,
+                });
+            }
+            // exactOptionalPropertyTypes対応: undefined を代入せずプロパティを省略
+            const result = {
+                success: true,
+                sections,
+                sectionCount: sections.length,
+                sectionTypes,
+                grid,
+                typography,
+                colors,
+                cssSnippet,
+                cssFramework,
+                processingTimeMs,
+            };
+            if (externalCssContent) {
+                result.externalCssContent = externalCssContent;
+            }
+            if (externalCssFetch) {
+                result.externalCssFetch = externalCssFetch;
+                const urls = externalCssFetch.results.map((r) => {
+                    const size = r.content ? new TextEncoder().encode(r.content).length : undefined;
+                    const entry = {
+                        url: r.url,
+                        success: !!r.content,
+                    };
+                    if (size !== undefined) {
+                        entry.size = size;
+                    }
+                    return entry;
+                });
+                result.externalCssMeta = {
+                    fetchedCount: externalCssFetch.successCount,
+                    failedCount: externalCssFetch.failedCount,
+                    totalSize: externalCssFetch.totalSize,
+                    urls,
+                    fetchedAt: new Date().toISOString(),
+                };
+            }
+            // Computed styles が適用された場合のみカウントを追加
+            if (computedStylesAppliedCount > 0) {
+                result.computedStylesAppliedCount = computedStylesAppliedCount;
+            }
+            return result;
+        }
+        catch (error) {
+            const processingTimeMs = Date.now() - startTime;
+            if ((0, logger_1.isDevelopment)()) {
+                logger_1.logger.error("[LayoutAnalyzerService] analyze error", { error });
+            }
+            return {
+                success: true, // エラーでもグレースフルに成功として返す
+                sections: [],
+                sectionCount: 0,
+                sectionTypes: {},
+                processingTimeMs,
+                error: {
+                    code: "LAYOUT_ANALYSIS_ERROR",
+                    message: error instanceof Error ? error.message : "Unknown error",
+                },
+            };
+        }
+    }
+}
+exports.LayoutAnalyzerService = LayoutAnalyzerService;
+// =====================================================
+// デフォルトエクスポート
+// =====================================================
+/**
+ * シングルトンインスタンス
+ */
+let sharedInstance = null;
+/**
+ * 共有インスタンスを取得
+ */
+function getLayoutAnalyzerService() {
+    if (!sharedInstance) {
+        sharedInstance = new LayoutAnalyzerService();
+    }
+    return sharedInstance;
+}
+/**
+ * 共有インスタンスをリセット（テスト用）
+ */
+function resetLayoutAnalyzerService() {
+    sharedInstance = null;
+}
+//# sourceMappingURL=layout-analyzer.service.js.map