@reftrixmcp/mcp-server 0.1.7 → 0.2.0

package/dist/tools/layout/inspect/inspect.utils.js

@@ -1,1104 +0,0 @@
-"use strict";
-// SPDX-FileCopyrightText: 2026 TKMD and Reftrix Contributors
-// SPDX-License-Identifier: AGPL-3.0-only
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_SECTION_HEIGHT = exports.SECTION_DEFAULT_HEIGHTS = void 0;
-exports.detectSections = detectSections;
-exports.extractSectionContent = extractSectionContent;
-exports.extractSectionStyle = extractSectionStyle;
-exports.extractColors = extractColors;
-exports.inferColorRole = inferColorRole;
-exports.analyzeTypography = analyzeTypography;
-exports.detectGrid = detectGrid;
-exports.generateTextRepresentation = generateTextRepresentation;
-exports.getDefaultColorPalette = getDefaultColorPalette;
-exports.getDefaultTypography = getDefaultTypography;
-exports.getDefaultGrid = getDefaultGrid;
-exports.getDefaultMediaElements = getDefaultMediaElements;
-exports.detectVideos = detectVideos;
-exports.detectVisualDecorations = detectVisualDecorations;
-exports.getDefaultVisualDecorations = getDefaultVisualDecorations;
-/**
- * layout.inspect HTMLパースユーティリティ
- *
- * HTMLから以下の情報を抽出する純粋関数群:
- * - セクション構成（hero, features, cta等）
- * - 色情報（パレット、ドミナント、背景、テキスト色）
- * - タイポグラフィ（フォント、サイズスケール、行間）
- * - グリッド構成（flex, grid, float）
- * - Embedding用テキスト表現
- *
- * @module tools/layout/inspect/inspect.utils
- */
-const jsdom_1 = require("jsdom");
-const visual_decoration_detector_service_1 = require("../../../services/visual-extractor/visual-decoration-detector.service");
-/**
- * セクション検出用の正規表現パターン
- * 優先度順に並べられている
- */
-const SECTION_PATTERNS = [
-    { pattern: /<header[^>]*>/i, type: "header", confidence: 0.95 },
-    { pattern: /<nav[^>]*>/i, type: "navigation", confidence: 0.9 },
-    { pattern: /class="[^"]*hero[^"]*"/i, type: "hero", confidence: 0.9 },
-    { pattern: /<section[^>]*class="[^"]*hero[^"]*"/i, type: "hero", confidence: 0.95 },
-    { pattern: /class="[^"]*features?[^"]*"/i, type: "features", confidence: 0.85 },
-    { pattern: /class="[^"]*testimonial[^"]*"/i, type: "testimonial", confidence: 0.9 },
-    { pattern: /<blockquote/i, type: "testimonial", confidence: 0.7 },
-    { pattern: /class="[^"]*pricing[^"]*"/i, type: "pricing", confidence: 0.9 },
-    { pattern: /class="[^"]*cta[^"]*"/i, type: "cta", confidence: 0.85 },
-    { pattern: /<footer[^>]*>/i, type: "footer", confidence: 0.95 },
-    { pattern: /class="[^"]*gallery[^"]*"/i, type: "gallery", confidence: 0.85 },
-    { pattern: /class="[^"]*about[^"]*"/i, type: "about", confidence: 0.8 },
-    { pattern: /class="[^"]*contact[^"]*"/i, type: "contact", confidence: 0.85 },
-    { pattern: /class="[^"]*faq[^"]*"/i, type: "faq", confidence: 0.85 },
-    { pattern: /class="[^"]*team[^"]*"/i, type: "team", confidence: 0.8 },
-];
-const SECTION_SELECTORS = [
-    { selector: "header", type: "header", confidence: 0.95 },
-    { selector: "nav", type: "navigation", confidence: 0.9 },
-    {
-        selector: 'section[class*="hero"], div[class*="hero"], [class*="hero"]',
-        type: "hero",
-        confidence: 0.9,
-    },
-    {
-        selector: 'section[class*="feature"], div[class*="feature"], [class*="feature"]',
-        type: "features",
-        confidence: 0.85,
-    },
-    {
-        selector: 'section[class*="testimonial"], div[class*="testimonial"], [class*="testimonial"]',
-        type: "testimonial",
-        confidence: 0.9,
-    },
-    {
-        selector: 'section[class*="pricing"], div[class*="pricing"], [class*="pricing"]',
-        type: "pricing",
-        confidence: 0.9,
-    },
-    {
-        selector: 'section[class*="cta"], div[class*="cta"], [class*="cta"]',
-        type: "cta",
-        confidence: 0.85,
-    },
-    { selector: "footer", type: "footer", confidence: 0.95 },
-    {
-        selector: 'section[class*="gallery"], div[class*="gallery"], [class*="gallery"]',
-        type: "gallery",
-        confidence: 0.85,
-    },
-    {
-        selector: 'section[class*="about"], div[class*="about"], [class*="about"]',
-        type: "about",
-        confidence: 0.8,
-    },
-    {
-        selector: 'section[class*="contact"], div[class*="contact"], [class*="contact"]',
-        type: "contact",
-        confidence: 0.85,
-    },
-    {
-        selector: 'section[class*="faq"], div[class*="faq"], [class*="faq"]',
-        type: "faq",
-        confidence: 0.85,
-    },
-    {
-        selector: 'section[class*="team"], div[class*="team"], [class*="team"]',
-        type: "team",
-        confidence: 0.8,
-    },
-    // WordPress / DigitalSilk block wrappers: treat each wrapper as a distinct content section
-    {
-        selector: 'div[class*="dst-wrapper"], div[class*="ds-blocks-dst-wrapper"]',
-        type: "content",
-        confidence: 0.65,
-        multi: true,
-    },
-];
-/**
- * セクションタイプごとのデフォルト高さ（ピクセル）
- */
-exports.SECTION_DEFAULT_HEIGHTS = {
-    hero: 600,
-    footer: 200,
-};
-exports.DEFAULT_SECTION_HEIGHT = 400;
-// =====================================================
-// セクション検出関数
-// =====================================================
-/**
- * HTMLからセクションを検出する
- *
- * JSDOMを使用してHTML内のセクション構成を解析します。
- * 各セクションの実際のHTML範囲を特定し、そのコンテンツのみを抽出します。
- * 検出されたセクションは位置（startY）でソートされ、一意のIDが割り当てられます。
- *
- * @param html - 解析対象のHTML文字列
- * @returns 検出されたセクション情報の配列
- *
- * @example
- * ```typescript
- * const html = '<section class="hero"><h1>Welcome</h1></section>';
- * const sections = detectSections(html);
- * // [{ id: 'section-0', type: 'hero', confidence: 0.9, ... }]
- * ```
- */
-function detectSections(html) {
-    const sections = [];
-    let currentY = 0;
-    // 検出されたタイプを記録（重複防止）
-    const detectedTypes = new Set();
-    // 処理済み要素を記録（同じ要素を複数回処理しない）
-    const processedElements = new Set();
-    // JSDOMでHTMLをパース
-    const dom = new jsdom_1.JSDOM(html);
-    const document = dom.window.document;
-    for (const { selector, type, confidence, multi } of SECTION_SELECTORS) {
-        if (!multi && detectedTypes.has(type))
-            continue;
-        // セレクターにマッチする最初の要素を取得
-        const elements = document.querySelectorAll(selector);
-        for (const element of elements) {
-            // 既に処理済みの要素、または処理済み要素の子要素はスキップ
-            if (processedElements.has(element))
-                continue;
-            let isChildOfProcessed = false;
-            for (const processed of processedElements) {
-                if (processed.contains(element)) {
-                    isChildOfProcessed = true;
-                    break;
-                }
-            }
-            if (isChildOfProcessed)
-                continue;
-            // このタイプが既に検出済みならスキップ
-            if (!multi && detectedTypes.has(type))
-                break;
-            if (!multi) {
-                detectedTypes.add(type);
-            }
-            processedElements.add(element);
-            const sectionHeight = exports.SECTION_DEFAULT_HEIGHTS[type] ?? exports.DEFAULT_SECTION_HEIGHT;
-            // セクション要素のHTMLを取得して、そのコンテンツのみを抽出
-            const sectionHtml = element.outerHTML;
-            sections.push({
-                id: `section-${sections.length}`,
-                type,
-                confidence,
-                position: {
-                    startY: currentY,
-                    endY: currentY + sectionHeight,
-                    height: sectionHeight,
-                },
-                content: extractSectionContent(sectionHtml, type),
-                style: extractSectionStyle(sectionHtml, type),
-            });
-            currentY += sectionHeight;
-            if (!multi) {
-                break; // このタイプの最初の要素のみ処理
-            }
-        }
-    }
-    // 正規表現パターンでのフォールバック検出
-    // （DOMセレクターで検出できなかったセクション用）
-    for (const { pattern, type, confidence } of SECTION_PATTERNS) {
-        if (pattern.test(html) && !detectedTypes.has(type)) {
-            // セクション要素のHTML範囲を正規表現で抽出
-            const sectionHtml = extractSectionHtmlByPattern(html, type);
-            if (sectionHtml) {
-                detectedTypes.add(type);
-                const sectionHeight = exports.SECTION_DEFAULT_HEIGHTS[type] ?? exports.DEFAULT_SECTION_HEIGHT;
-                sections.push({
-                    id: `section-${sections.length}`,
-                    type,
-                    confidence,
-                    position: {
-                        startY: currentY,
-                        endY: currentY + sectionHeight,
-                        height: sectionHeight,
-                    },
-                    content: extractSectionContent(sectionHtml, type),
-                    style: extractSectionStyle(sectionHtml, type),
-                });
-                currentY += sectionHeight;
-            }
-        }
-    }
-    // ソート（position.startYで昇順）
-    sections.sort((a, b) => a.position.startY - b.position.startY);
-    // IDを再割り当て
-    sections.forEach((section, index) => {
-        section.id = `section-${index}`;
-    });
-    return sections;
-}
-/**
- * 正規表現パターンを使用してセクションのHTML範囲を抽出
- *
- * @param html - 解析対象のHTML文字列
- * @param type - セクションタイプ
- * @returns セクションのHTML文字列、見つからない場合はnull
- */
-function extractSectionHtmlByPattern(html, type) {
-    // JSDOMでパースして該当セクションを探す
-    const dom = new jsdom_1.JSDOM(html);
-    const document = dom.window.document;
-    // タイプに応じたセレクターでセクションを取得
-    const selectorMap = {
-        header: "header",
-        navigation: "nav",
-        hero: '[class*="hero"], section[class*="hero"]',
-        features: '[class*="feature"], section[class*="feature"]',
-        testimonial: '[class*="testimonial"], section[class*="testimonial"]',
-        pricing: '[class*="pricing"], section[class*="pricing"]',
-        cta: '[class*="cta"]:not(button), section[class*="cta"]',
-        footer: "footer",
-        content: '[class*="content"], section[class*="content"], main',
-        gallery: '[class*="gallery"], section[class*="gallery"]',
-        about: '[class*="about"], section[class*="about"]',
-        contact: '[class*="contact"], section[class*="contact"]',
-        faq: '[class*="faq"], section[class*="faq"]',
-        team: '[class*="team"], section[class*="team"]',
-        stats: '[class*="stats"], section[class*="stats"]',
-        unknown: "",
-    };
-    const selector = selectorMap[type];
-    if (!selector)
-        return null;
-    const element = document.querySelector(selector);
-    return element?.outerHTML ?? null;
-}
-/**
- * セクションコンテンツを抽出
- *
- * 渡されたHTMLからセクションタイプに対応する要素を特定し、
- * その要素内のコンテンツ（見出し、段落、リンク、画像、ボタン）を抽出します。
- *
- * HTML全体が渡された場合は、セクションタイプに対応する要素を自動的に特定します。
- * セクション要素のHTMLのみが渡された場合は、そのHTMLから直接抽出します。
- *
- * @param html - 解析対象のHTML文字列
- * @param sectionType - セクションタイプ（コンテンツ抽出の範囲を特定するために使用）
- * @returns セクションコンテンツ情報
- */
-function extractSectionContent(html, sectionType) {
-    // セクションタイプに対応するセレクター
-    const selectorMap = {
-        header: "header",
-        navigation: "nav",
-        hero: '[class*="hero"], section[class*="hero"]',
-        features: '[class*="feature"], section[class*="feature"]',
-        testimonial: '[class*="testimonial"], section[class*="testimonial"]',
-        pricing: '[class*="pricing"], section[class*="pricing"]',
-        cta: 'section[class*="cta"], div[class*="cta"]:not(button)',
-        footer: "footer",
-        content: '[class*="content"], section[class*="content"], main',
-        gallery: '[class*="gallery"], section[class*="gallery"]',
-        about: '[class*="about"], section[class*="about"]',
-        contact: '[class*="contact"], section[class*="contact"]',
-        faq: '[class*="faq"], section[class*="faq"]',
-        team: '[class*="team"], section[class*="team"]',
-        stats: '[class*="stats"], section[class*="stats"]',
-        unknown: "",
-    };
-    // JSDOMでHTMLをパース
-    const dom = new jsdom_1.JSDOM(html);
-    const document = dom.window.document;
-    // セレクターで該当セクション要素を取得
-    const selector = selectorMap[sectionType];
-    let sectionElement = null;
-    if (selector) {
-        sectionElement = document.querySelector(selector);
-    }
-    // セクション要素が見つからない場合は、渡されたHTML全体がセクション要素として扱う
-    // （detectSectionsから呼ばれた場合、既にセクション範囲のHTMLが渡されている）
-    if (!sectionElement) {
-        sectionElement = document.body;
-    }
-    return extractContentFromElement(sectionElement);
-}
-/**
- * DOM要素からコンテンツを抽出
- *
- * @param element - 対象のDOM要素
- * @returns セクションコンテンツ情報
- */
-function extractContentFromElement(element) {
-    const headings = [];
-    const paragraphs = [];
-    const links = [];
-    const images = [];
-    const buttons = [];
-    // 見出し抽出（h1-h6）
-    const headingElements = element.querySelectorAll("h1, h2, h3, h4, h5, h6");
-    for (const h of headingElements) {
-        const level = parseInt(h.tagName.charAt(1), 10);
-        const text = h.textContent?.trim() ?? "";
-        if (text) {
-            headings.push({ level, text });
-        }
-    }
-    // 段落抽出
-    const paragraphElements = element.querySelectorAll("p");
-    for (const p of paragraphElements) {
-        const text = p.textContent?.trim() ?? "";
-        if (text) {
-            paragraphs.push(text);
-        }
-    }
-    // リンク抽出
-    const linkElements = element.querySelectorAll("a[href]");
-    for (const a of linkElements) {
-        const href = a.getAttribute("href") ?? "";
-        const text = a.textContent?.trim() ?? "";
-        links.push({ href, text });
-    }
-    // 画像抽出
-    const imageElements = element.querySelectorAll("img[src]");
-    for (const img of imageElements) {
-        const src = img.getAttribute("src") ?? "";
-        const alt = img.getAttribute("alt") ?? undefined;
-        images.push({ src, alt });
-    }
-    // ボタン抽出
-    const buttonElements = element.querySelectorAll("button");
-    for (const btn of buttonElements) {
-        const text = btn.textContent?.trim() ?? "";
-        const className = btn.getAttribute("class") ?? "";
-        const type = className.includes("cta") || className.includes("primary") ? "primary" : "secondary";
-        buttons.push({ text, type });
-    }
-    return { headings, paragraphs, links, images, buttons };
-}
-/**
- * セクションスタイルを抽出
- *
- * HTML/CSS内からスタイル情報（背景色、テキスト色、グラデーション、背景画像）を抽出します。
- * heroセクションは特別な処理で、.heroクラスのスタイルを解析します。
- *
- * @param html - 解析対象のHTML文字列
- * @param sectionType - セクションタイプ（heroの場合は特別処理）
- * @returns セクションスタイル情報
- */
-function extractSectionStyle(html, sectionType) {
-    const style = {};
-    // 背景色の検出
-    const bgColorMatch = html.match(/background(?:-color)?:\s*([#\w]+)/i);
-    if (bgColorMatch) {
-        const color = bgColorMatch[1];
-        if (color?.startsWith("#")) {
-            style.backgroundColor = color;
-        }
-    }
-    // テキスト色の検出
-    const textColorMatch = html.match(/(?:^|\s)color:\s*([#\w]+)/i);
-    if (textColorMatch) {
-        const color = textColorMatch[1];
-        if (color?.startsWith("#")) {
-            style.textColor = color;
-        }
-    }
-    // グラデーションの検出
-    style.hasGradient = /linear-gradient|radial-gradient/i.test(html);
-    // 背景画像の検出
-    style.hasImage = /background(?:-image)?:\s*url/i.test(html);
-    // heroセクションは特別な処理
-    if (sectionType === "hero") {
-        const heroStyleMatch = html.match(/\.hero\s*\{([^}]*)\}/i);
-        if (heroStyleMatch) {
-            const heroStyle = heroStyleMatch[1] ?? "";
-            const heroBgMatch = heroStyle.match(/background(?:-color)?:\s*([^;]+)/i);
-            if (heroBgMatch) {
-                const bgValue = heroBgMatch[1]?.trim() ?? "";
-                if (bgValue.includes("gradient")) {
-                    style.hasGradient = true;
-                    // グラデーションから最初の色を抽出
-                    const colorMatch = bgValue.match(/#[0-9a-fA-F]{6}/);
-                    if (colorMatch) {
-                        style.backgroundColor = colorMatch[0];
-                    }
-                }
-                else if (bgValue.startsWith("#")) {
-                    style.backgroundColor = bgValue;
-                }
-            }
-            // heroセクションのテキスト色
-            const heroColorMatch = heroStyle.match(/(?:^|;)\s*color:\s*([^;]+)/i);
-            if (heroColorMatch) {
-                style.textColor = heroColorMatch[1]?.trim();
-            }
-        }
-    }
-    return style;
-}
-// =====================================================
-// 色情報抽出関数
-// =====================================================
-/**
- * 色情報を抽出
- *
- * HTML/CSS内からHEXカラーとRGBカラーを抽出し、出現回数でソートしたパレットを作成します。
- * 色の役割（primary, secondary, background, text）も推定します。
- *
- * @param html - 解析対象のHTML文字列
- * @returns カラーパレット情報
- *
- * @example
- * ```typescript
- * const html = '<div style="color: #333; background: #ffffff;">';
- * const colors = extractColors(html);
- * // { palette: [...], dominant: '#333333', background: '#FFFFFF', text: '#333333' }
- * ```
- */
-function extractColors(html) {
-    const colorCounts = new Map();
-    // HEXカラーを抽出
-    const hexMatches = html.matchAll(/#([0-9a-fA-F]{6})\b/g);
-    for (const match of hexMatches) {
-        const hex = `#${(match[1] ?? "").toUpperCase()}`;
-        colorCounts.set(hex, (colorCounts.get(hex) ?? 0) + 1);
-    }
-    // rgb/rgbaカラーを抽出しHEXに変換
-    const rgbMatches = html.matchAll(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/gi);
-    for (const match of rgbMatches) {
-        const r = parseInt(match[1] ?? "0", 10);
-        const g = parseInt(match[2] ?? "0", 10);
-        const b = parseInt(match[3] ?? "0", 10);
-        const hex = rgbToHex(r, g, b);
-        colorCounts.set(hex, (colorCounts.get(hex) ?? 0) + 1);
-    }
-    // ソートしてパレット作成
-    const sortedColors = Array.from(colorCounts.entries())
-        .sort((a, b) => b[1] - a[1])
-        .map(([hex, count]) => ({ hex, count }));
-    // 色の役割を推定
-    const palette = sortedColors.map((color, index) => {
-        const role = inferColorRole(color.hex, index, sortedColors);
-        return { ...color, role };
-    });
-    // ドミナント、背景、テキスト色の決定
-    const dominant = palette.find((c) => c.role === "primary")?.hex ??
-        palette.find((c) => c.role !== "background" && c.role !== "text")?.hex ??
-        "#000000";
-    const background = palette.find((c) => c.role === "background")?.hex ?? "#FFFFFF";
-    const text = palette.find((c) => c.role === "text")?.hex ?? "#000000";
-    const accent = palette.find((c) => c.role === "secondary")?.hex;
-    return {
-        palette,
-        dominant,
-        background,
-        text,
-        accent,
-    };
-}
-/**
- * RGBをHEX形式に変換
- *
- * @param r - 赤成分（0-255）
- * @param g - 緑成分（0-255）
- * @param b - 青成分（0-255）
- * @returns HEX形式の色コード（大文字）
- */
-function rgbToHex(r, g, b) {
-    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
-}
-/**
- * 色の役割を推定
- *
- * @param hex - HEX形式の色コード
- * @param index - パレット内のインデックス
- * @param sortedColors - ソート済み色配列
- * @returns 推定された色の役割
- */
-function inferColorRole(hex, index, sortedColors) {
-    const hexLower = hex.toLowerCase();
-    // 白系
-    if (hexLower === "#ffffff" || hexLower === "#fff") {
-        return "background";
-    }
-    // 黒系（ダークモードのテキストやボディカラー）
-    if (hexLower === "#000000" ||
-        hexLower === "#1a1a1a" ||
-        hexLower === "#1f2937" ||
-        hexLower === "#111827") {
-        return "text";
-    }
-    // 白・黒以外の色で役割を決定
-    // 白・黒を除いたインデックスを計算
-    const colorIndex = sortedColors.slice(0, index + 1).filter((c) => {
-        const h = c.hex.toLowerCase();
-        return (h !== "#ffffff" &&
-            h !== "#fff" &&
-            h !== "#000000" &&
-            h !== "#1a1a1a" &&
-            h !== "#1f2937" &&
-            h !== "#111827");
-    }).length - 1;
-    // 最も使われている色（白・黒以外で最初）
-    if (colorIndex === 0) {
-        return "primary";
-    }
-    // 2番目に使われている色
-    if (colorIndex === 1) {
-        return "secondary";
-    }
-    return undefined;
-}
-// =====================================================
-// タイポグラフィ解析関数
-// =====================================================
-/**
- * タイポグラフィ情報を解析
- *
- * HTML/CSS内からフォント情報、見出しサイズスケール、本文サイズ、行間を抽出します。
- *
- * @param html - 解析対象のHTML文字列
- * @returns タイポグラフィ情報
- *
- * @example
- * ```typescript
- * const html = '<style>body { font-family: "Inter", sans-serif; }</style>';
- * const typography = analyzeTypography(html);
- * // { fonts: [{ family: 'Inter', weights: [400] }], ... }
- * ```
- */
-function analyzeTypography(html) {
-    const fonts = [];
-    const fontFamilies = new Map();
-    // font-familyを抽出
-    const fontFamilyMatches = html.matchAll(/font-family:\s*([^;]+)/gi);
-    for (const match of fontFamilyMatches) {
-        const familyString = match[1] ?? "";
-        // 最初のフォントを取得
-        const firstFont = familyString.split(",")[0]?.trim().replace(/['"]/g, "");
-        if (firstFont && !firstFont.startsWith("-apple-system")) {
-            if (!fontFamilies.has(firstFont)) {
-                fontFamilies.set(firstFont, new Set());
-            }
-        }
-    }
-    // font-weightを抽出
-    const fontWeightMatches = html.matchAll(/font-weight:\s*(\d+|bold|normal)/gi);
-    for (const match of fontWeightMatches) {
-        const weightStr = match[1] ?? "400";
-        const weight = parseWeight(weightStr);
-        // すべてのフォントに適用
-        for (const [, weights] of fontFamilies) {
-            weights.add(weight);
-        }
-    }
-    // フォント情報を配列に変換
-    for (const [family, weights] of fontFamilies) {
-        fonts.push({
-            family,
-            weights: Array.from(weights).sort((a, b) => a - b),
-        });
-    }
-    // デフォルトフォントがない場合
-    if (fonts.length === 0) {
-        fonts.push({ family: "sans-serif", weights: [400] });
-    }
-    // 見出しスケールを抽出
-    const headingScale = extractHeadingScale(html);
-    // 本文サイズ
-    const bodySize = extractBodySize(html);
-    // 行間
-    const lineHeight = extractLineHeight(html);
-    return {
-        fonts,
-        headingScale,
-        bodySize,
-        lineHeight,
-    };
-}
-/**
- * font-weight文字列を数値に変換
- */
-function parseWeight(weightStr) {
-    if (weightStr === "bold")
-        return 700;
-    if (weightStr === "normal")
-        return 400;
-    return parseInt(weightStr, 10);
-}
-/**
- * 見出しサイズスケールを抽出
- * - <style>タグ内のCSS: h1 { font-size: 64px; }
- * - インラインスタイル: <h1 style="font-size: 64px;">
- */
-function extractHeadingScale(html) {
-    const headingScale = [];
-    for (let i = 1; i <= 6; i++) {
-        // <style>タグ内のCSSブロック形式
-        let sizeMatch = html.match(new RegExp(`h${i}[^{]*\\{[^}]*font-size:\\s*(\\d+)`, "i"));
-        // インラインスタイル形式: <h1 style="font-size: 64px;">
-        if (!sizeMatch) {
-            sizeMatch = html.match(new RegExp(`<h${i}[^>]*style="[^"]*font-size:\\s*(\\d+)`, "i"));
-        }
-        // シングルクォート版
-        if (!sizeMatch) {
-            sizeMatch = html.match(new RegExp(`<h${i}[^>]*style='[^']*font-size:\\s*(\\d+)`, "i"));
-        }
-        if (sizeMatch) {
-            headingScale.push(parseInt(sizeMatch[1] ?? "16", 10));
-        }
-    }
-    // デフォルトスケール
-    if (headingScale.length === 0) {
-        headingScale.push(48, 36, 24, 20, 18, 16);
-    }
-    return headingScale;
-}
-/**
- * 本文サイズを抽出
- * - <style>タグ内のCSS: body { font-size: 16px; } または p { font-size: 18px; }
- * - インラインスタイル: <p style="font-size: 18px;">
- */
-function extractBodySize(html) {
-    // <style>タグ内のCSSブロック形式
-    let bodySizeMatch = html.match(/(?:body|p)[^{]*\{[^}]*font-size:\s*(\d+)/i);
-    if (bodySizeMatch) {
-        return parseInt(bodySizeMatch[1] ?? "16", 10);
-    }
-    // インラインスタイル: <p style="font-size: 18px;">
-    bodySizeMatch = html.match(/<p[^>]*style="[^"]*font-size:\s*(\d+)/i);
-    if (bodySizeMatch) {
-        return parseInt(bodySizeMatch[1] ?? "16", 10);
-    }
-    // シングルクォート版
-    bodySizeMatch = html.match(/<p[^>]*style='[^']*font-size:\s*(\d+)/i);
-    if (bodySizeMatch) {
-        return parseInt(bodySizeMatch[1] ?? "16", 10);
-    }
-    return 16;
-}
-/**
- * 行間を抽出
- */
-function extractLineHeight(html) {
-    const lineHeightMatch = html.match(/line-height:\s*([\d.]+)/i);
-    if (lineHeightMatch) {
-        return parseFloat(lineHeightMatch[1] ?? "1.5");
-    }
-    return 1.5;
-}
-// =====================================================
-// グリッド検出関数
-// =====================================================
-/**
- * グリッド情報を検出
- *
- * HTML/CSS内からグリッドシステム（CSS Grid, Flexbox, Float）を検出します。
- * 検出優先度: CSS Grid > Flexbox > Float
- *
- * @param html - 解析対象のHTML文字列
- * @returns グリッド情報
- *
- * @example
- * ```typescript
- * const html = '<style>.container { display: grid; grid-template-columns: repeat(3, 1fr); }</style>';
- * const grid = detectGrid(html);
- * // { type: 'grid', columns: 3 }
- * ```
- */
-function detectGrid(html) {
-    // CSS Gridの検出
-    const gridMatch = html.match(/display:\s*grid/i);
-    if (gridMatch) {
-        return parseGridStyles(html);
-    }
-    // Flexboxの検出
-    const flexMatch = html.match(/display:\s*flex/i);
-    if (flexMatch) {
-        return parseFlexStyles(html);
-    }
-    // Floatの検出
-    const floatMatch = html.match(/float:\s*(left|right)/i);
-    if (floatMatch) {
-        return { type: "float" };
-    }
-    return { type: "unknown" };
-}
-/**
- * CSS Gridスタイルを解析
- */
-function parseGridStyles(html) {
-    const grid = { type: "grid" };
-    // カラム数
-    const columnsMatch = html.match(/grid-template-columns:\s*repeat\(\s*(\d+)/i);
-    if (columnsMatch) {
-        grid.columns = parseInt(columnsMatch[1] ?? "1", 10);
-    }
-    // ガター幅
-    const gapMatch = html.match(/gap:\s*(\d+)/i);
-    if (gapMatch) {
-        grid.gutterWidth = parseInt(gapMatch[1] ?? "0", 10);
-    }
-    // max-width
-    const maxWidthMatch = html.match(/max-width:\s*(\d+)/i);
-    if (maxWidthMatch) {
-        grid.maxWidth = parseInt(maxWidthMatch[1] ?? "0", 10);
-    }
-    // ブレイクポイント
-    const breakpoints = parseBreakpoints(html);
-    if (breakpoints.length > 0) {
-        grid.breakpoints = breakpoints;
-    }
-    return grid;
-}
-/**
- * Flexboxスタイルを解析
- */
-function parseFlexStyles(html) {
-    const grid = { type: "flex" };
-    // ガター幅
-    const gapMatch = html.match(/gap:\s*(\d+)/i);
-    if (gapMatch) {
-        grid.gutterWidth = parseInt(gapMatch[1] ?? "0", 10);
-    }
-    return grid;
-}
-/**
- * ブレイクポイントを解析
- */
-function parseBreakpoints(html) {
-    const breakpoints = [];
-    const mediaMatches = html.matchAll(/@media[^{]*\((?:max|min)-width:\s*(\d+)px\)/gi);
-    for (const match of mediaMatches) {
-        const width = parseInt(match[1] ?? "0", 10);
-        let name = "sm";
-        if (width >= 1024)
-            name = "lg";
-        else if (width >= 768)
-            name = "md";
-        else if (width >= 480)
-            name = "sm";
-        else
-            name = "xs";
-        breakpoints.push({ name, minWidth: width });
-    }
-    return breakpoints.sort((a, b) => a.minWidth - b.minWidth);
-}
-// =====================================================
-// テキスト表現生成関数
-// =====================================================
-/**
- * テキスト表現を生成（Embedding用）
- *
- * 解析データからベクトル検索用のテキスト表現を生成します。
- * セクション構成、色、タイポグラフィ、グリッド情報、メディア要素を自然言語で表現します。
- *
- * @param data - 解析済みレイアウトデータ
- * @returns Embedding用テキスト表現
- *
- * @example
- * ```typescript
- * const data: LayoutInspectData = { ... };
- * const text = generateTextRepresentation(data);
- * // "Layout with 3 sections: hero, features, footer. Color palette: #3B82F6 dominant, #FFFFFF background."
- * ```
- */
-function generateTextRepresentation(data) {
-    const parts = [];
-    // セクション情報
-    if (data.sections.length > 0) {
-        const sectionTypes = data.sections.map((s) => s.type).join(", ");
-        parts.push(`Layout with ${data.sections.length} sections: ${sectionTypes}.`);
-        // heroセクションの詳細
-        const hero = data.sections.find((s) => s.type === "hero");
-        if (hero) {
-            const heading = hero.content.headings[0];
-            if (heading) {
-                parts.push(`Hero section with heading '${heading.text}'.`);
-            }
-            if (hero.content.buttons.length > 0) {
-                const buttonTexts = hero.content.buttons.map((b) => b.text).join(", ");
-                parts.push(`CTA buttons: ${buttonTexts}.`);
-            }
-        }
-        // featuresセクション
-        const features = data.sections.find((s) => s.type === "features");
-        if (features) {
-            const imageCount = features.content.images.length;
-            if (imageCount > 0) {
-                parts.push(`${imageCount} feature items with icons.`);
-            }
-        }
-    }
-    // 色情報
-    parts.push(`Color palette: ${data.colors.dominant} dominant, ${data.colors.background} background.`);
-    // タイポグラフィ情報
-    if (data.typography.fonts.length > 0) {
-        const fontNames = data.typography.fonts.map((f) => f.family).join(", ");
-        parts.push(`Typography: ${fontNames} font.`);
-    }
-    // グリッド情報
-    if (data.grid.type !== "unknown") {
-        let gridDesc = `${data.grid.type} layout`;
-        if (data.grid.columns) {
-            gridDesc += ` with ${data.grid.columns} columns`;
-        }
-        parts.push(`${gridDesc}.`);
-    }
-    // メディア要素情報（video）
-    if (data.mediaElements) {
-        const { videos, backgroundVideos } = data.mediaElements;
-        if (backgroundVideos.length > 0) {
-            parts.push(`Background video: ${backgroundVideos.length} video(s) used as background.`);
-        }
-        if (videos.length > backgroundVideos.length) {
-            const inlineCount = videos.length - backgroundVideos.length;
-            parts.push(`Media: ${inlineCount} inline video(s).`);
-        }
-    }
-    return parts.join(" ");
-}
-// =====================================================
-// デフォルト値ヘルパー
-// =====================================================
-/**
- * デフォルトのカラーパレット情報を取得
- *
- * @returns デフォルトのColorPaletteInfo
- */
-function getDefaultColorPalette() {
-    return {
-        palette: [],
-        dominant: "#000000",
-        background: "#FFFFFF",
-        text: "#000000",
-    };
-}
-/**
- * デフォルトのタイポグラフィ情報を取得
- *
- * @returns デフォルトのTypographyInfo
- */
-function getDefaultTypography() {
-    return {
-        fonts: [],
-        headingScale: [],
-        bodySize: 16,
-        lineHeight: 1.5,
-    };
-}
-/**
- * デフォルトのグリッド情報を取得
- *
- * @returns デフォルトのGridInfo
- */
-function getDefaultGrid() {
-    return { type: "unknown" };
-}
-// =====================================================
-// Video要素検出関数
-// =====================================================
-/**
- * デフォルトのメディア要素情報を取得
- *
- * @returns デフォルトのMediaElements
- */
-function getDefaultMediaElements() {
-    return {
-        videos: [],
-        backgroundVideos: [],
-    };
-}
-/**
- * Video要素の配置パターンを解析
- *
- * @param element - video要素または親コンテナ
- * @param style - インラインスタイル文字列
- * @returns 配置パターン
- */
-function analyzeVideoPositioning(element, style) {
-    const styleLower = style.toLowerCase();
-    // 親要素のスタイルもチェック
-    const parentStyle = element.parentElement?.getAttribute("style")?.toLowerCase() ?? "";
-    // position: fixed + z-index: -1 パターン（ページ全体背景）
-    if ((styleLower.includes("position: fixed") ||
-        styleLower.includes("position:fixed") ||
-        parentStyle.includes("position: fixed") ||
-        parentStyle.includes("position:fixed")) &&
-        (styleLower.includes("z-index: -1") ||
-            styleLower.includes("z-index:-1") ||
-            parentStyle.includes("z-index: -1") ||
-            parentStyle.includes("z-index:-1"))) {
-        return "fixed-background";
-    }
-    // position: absolute + z-index: -1 パターン（セクション背景）
-    if ((styleLower.includes("position: absolute") ||
-        styleLower.includes("position:absolute") ||
-        parentStyle.includes("position: absolute") ||
-        parentStyle.includes("position:absolute")) &&
-        (styleLower.includes("z-index: -1") ||
-            styleLower.includes("z-index:-1") ||
-            parentStyle.includes("z-index: -1") ||
-            parentStyle.includes("z-index:-1"))) {
-        return "absolute-background";
-    }
-    return "inline";
-}
-/**
- * Video要素のCSSセレクタを生成
- *
- * @param element - video要素
- * @param index - 同一タグ内でのインデックス
- * @returns CSSセレクタ文字列
- */
-function generateVideoSelector(element, index) {
-    // 親要素のクラスやIDを取得して、より具体的なセレクタを生成
-    const parentClasses = [];
-    let parent = element.parentElement;
-    let depth = 0;
-    const maxDepth = 3;
-    while (parent && depth < maxDepth) {
-        const parentClass = parent.getAttribute("class");
-        const parentId = parent.getAttribute("id");
-        const parentTag = parent.tagName.toLowerCase();
-        if (parentId) {
-            parentClasses.unshift(`#${parentId}`);
-            break;
-        }
-        else if (parentClass) {
-            const firstClass = parentClass.split(" ").filter((c) => c.trim())[0];
-            if (firstClass) {
-                parentClasses.unshift(`.${firstClass}`);
-            }
-        }
-        else if (parentTag === "section" || parentTag === "header" || parentTag === "footer") {
-            parentClasses.unshift(parentTag);
-        }
-        parent = parent.parentElement;
-        depth++;
-    }
-    // セレクタを構築
-    if (parentClasses.length > 0) {
-        return `${parentClasses.join(" ")} video`;
-    }
-    // フォールバック: インデックスベース
-    return index === 0 ? "video" : `video:nth-of-type(${index + 1})`;
-}
-/**
- * HTMLからVideo要素を検出する
- *
- * JSDOMを使用してHTML内のvideo要素を解析します。
- * - src属性とsource子要素からURL抽出
- * - poster属性の抽出
- * - 再生制御属性（autoplay, loop, muted, playsinline, controls）の検出
- * - 背景動画パターン（position: absolute/fixed + z-index: -1）の判定
- *
- * @param html - 解析対象のHTML文字列
- * @returns メディア要素情報
- *
- * @example
- * ```typescript
- * const html = '<video autoplay muted loop src="/bg.mp4" style="position: absolute; z-index: -1;"></video>';
- * const media = detectVideos(html);
- * // { videos: [{ src: '/bg.mp4', positioning: 'absolute-background', ... }], backgroundVideos: [...] }
- * ```
- */
-function detectVideos(html) {
-    const videos = [];
-    // JSDOMでHTMLをパース
-    const dom = new jsdom_1.JSDOM(html);
-    const document = dom.window.document;
-    // video要素を検出
-    const videoElements = document.querySelectorAll("video");
-    videoElements.forEach((videoElement, index) => {
-        const videoInfo = {
-            selector: generateVideoSelector(videoElement, index),
-        };
-        // src属性
-        const src = videoElement.getAttribute("src");
-        if (src) {
-            videoInfo.src = src;
-        }
-        // source子要素
-        const sourceElements = videoElement.querySelectorAll("source");
-        if (sourceElements.length > 0) {
-            videoInfo.sources = [];
-            sourceElements.forEach((sourceElement) => {
-                const sourceSrc = sourceElement.getAttribute("src");
-                const sourceType = sourceElement.getAttribute("type");
-                if (sourceSrc) {
-                    const sourceInfo = { src: sourceSrc };
-                    if (sourceType) {
-                        sourceInfo.type = sourceType;
-                    }
-                    videoInfo.sources.push(sourceInfo);
-                }
-            });
-        }
-        // poster属性
-        const poster = videoElement.getAttribute("poster");
-        if (poster) {
-            videoInfo.poster = poster;
-        }
-        // 再生制御属性
-        videoInfo.attributes = {
-            autoplay: videoElement.hasAttribute("autoplay"),
-            loop: videoElement.hasAttribute("loop"),
-            muted: videoElement.hasAttribute("muted"),
-            playsinline: videoElement.hasAttribute("playsinline"),
-            controls: videoElement.hasAttribute("controls"),
-        };
-        // 配置パターン解析
-        const style = videoElement.getAttribute("style") ?? "";
-        videoInfo.positioning = analyzeVideoPositioning(videoElement, style);
-        videos.push(videoInfo);
-    });
-    // 背景動画のフィルタ
-    const backgroundVideos = videos.filter((v) => v.positioning === "absolute-background" || v.positioning === "fixed-background");
-    return {
-        videos,
-        backgroundVideos,
-    };
-}
-// =====================================================
-// VisualDecoration検出関数
-// =====================================================
-/**
- * VisualDecorationDetectorサービスのシングルトンインスタンス
- */
-const visualDecorationDetector = new visual_decoration_detector_service_1.VisualDecorationDetectorService();
-/**
- * HTMLから視覚的装飾要素を検出する
- *
- * 以下の視覚効果を検出します:
- * - glow: box-shadowベースの発光効果
- * - gradient: linear-gradient, radial-gradient, conic-gradient背景
- * - animated-border: アニメーション付きボーダー、グラデーションボーダー
- * - glass-morphism: backdrop-filterベースのガラス効果
- *
- * @param html - 解析対象のHTML文字列
- * @returns 検出された視覚装飾の結果
- *
- * @example
- * ```typescript
- * const html = '<div style="box-shadow: 0 0 20px rgba(255, 100, 50, 0.5);"></div>';
- * const result = detectVisualDecorations(html);
- * // { decorations: [{ type: 'glow', element: 'div', properties: { color: '#ff6432', blur: 20 }, confidence: 0.9 }], ... }
- * ```
- */
-function detectVisualDecorations(html) {
-    return visualDecorationDetector.detectFromHTML(html);
-}
-/**
- * デフォルトのVisualDecorationsResult を取得
- *
- * @returns デフォルトのVisualDecorationsResult
- */
-function getDefaultVisualDecorations() {
-    return {
-        decorations: [],
-        summary: {
-            glowCount: 0,
-            gradientCount: 0,
-            animatedBorderCount: 0,
-            glassMorphismCount: 0,
-        },
-        processingTimeMs: 0,
-    };
-}
-//# sourceMappingURL=inspect.utils.js.map