@reftrixmcp/mcp-server 0.1.7

package/dist/services/quality/visual-design-analyzer.service.js

@@ -0,0 +1,762 @@
+"use strict";
+// SPDX-FileCopyrightText: 2026 TKMD and Reftrix Contributors
+// SPDX-License-Identifier: AGPL-3.0-only
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualDesignAnalyzerService = void 0;
+exports.setVisualDesignAnalyzerServiceFactory = setVisualDesignAnalyzerServiceFactory;
+exports.resetVisualDesignAnalyzerServiceFactory = resetVisualDesignAnalyzerServiceFactory;
+exports.getVisualDesignAnalyzerService = getVisualDesignAnalyzerService;
+exports.createVisualDesignAnalyzerService = createVisualDesignAnalyzerService;
+/**
+ * VisualDesignAnalyzer Service
+ *
+ * HTML+CSS文字列の静的解析による視覚デザイン品質メトリクス算出サービス。
+ * 外部リソースフェッチなし、正規表現/DOM解析のみで動作。
+ *
+ * 5つのメトリクス:
+ * - visualDensity: 視覚的密度（メディア要素/セクション比）
+ * - typographyContrast: タイポグラフィコントラスト（フォントサイズ・ウェイト階層）
+ * - colorVariety: 色彩豊富度（ユニークカラー数・色相分散）
+ * - whitespaceIntentionality: 余白の意図性（スペーシングスケール一貫性）
+ * - visualDepth: 視覚的深度（シャドウ・グラデーション・トランスフォーム）
+ *
+ * @module services/quality/visual-design-analyzer.service
+ */
+const logger_1 = require("../../utils/logger");
+// =====================================================
+// Constants
+// =====================================================
+/** メディア要素セレクタ正規表現 */
+const MEDIA_ELEMENT_RE = /<(?:img|svg|picture|video|canvas|i\b|span\b)[^>]*class\s*=\s*["'][^"']*(?:icon|ico)[^"']*["'][^>]*>|<(?:img|svg|picture|video|canvas)\b[^>]*>/gi;
+/** 装飾的img正規表現（alt=""） */
+const DECORATIVE_IMG_RE = /<img[^>]*\balt\s*=\s*["']\s*["'][^>]*>/gi;
+/** セクション要素正規表現 */
+const SECTION_ELEMENT_RE = /<(?:section|article|main|header|footer|nav)\b[^>]*>|<[^>]*\brole\s*=\s*["'](?:region|main|banner|contentinfo|navigation)["'][^>]*>/gi;
+/** font-size値の正規表現 */
+const FONT_SIZE_RE = /font-size\s*:\s*([\d.]+(?:px|rem|em|vw|vh|%)|clamp\([^)]+\))/gi;
+/** font-weight値の正規表現 */
+const FONT_WEIGHT_RE = /font-weight\s*:\s*(\d{3}|bold|bolder|lighter|normal)/gi;
+/** line-height値の正規表現 */
+const LINE_HEIGHT_RE = /line-height\s*:\s*([\d.]+(?:px|rem|em|%)?)/gi;
+/** カラー値の正規表現（hex, rgb, rgba, hsl, hsla） */
+const COLOR_VALUE_RE = /#(?:[0-9a-fA-F]{3,4}){1,2}\b|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*[\d.]+)?\s*\)|hsla?\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%(?:\s*,\s*[\d.]+)?\s*\)/gi;
+/** CSS名前付きカラー（主要なもの） */
+const NAMED_COLORS = new Set([
+    "black",
+    "white",
+    "red",
+    "green",
+    "blue",
+    "yellow",
+    "orange",
+    "purple",
+    "pink",
+    "gray",
+    "grey",
+    "brown",
+    "cyan",
+    "magenta",
+    "lime",
+    "navy",
+    "teal",
+    "olive",
+    "maroon",
+    "silver",
+    "gold",
+    "coral",
+    "salmon",
+    "tomato",
+    "crimson",
+    "indigo",
+    "violet",
+    "turquoise",
+    "tan",
+    "khaki",
+    "beige",
+    "ivory",
+    "lavender",
+    "plum",
+    "orchid",
+    "sienna",
+    "peru",
+    "chocolate",
+    "firebrick",
+    "darkred",
+    "darkblue",
+    "darkgreen",
+    "darkgray",
+    "darkgrey",
+    "lightgray",
+    "lightgrey",
+    "whitesmoke",
+    "ghostwhite",
+    "aliceblue",
+    "mintcream",
+    "honeydew",
+    "azure",
+    "mistyrose",
+    "linen",
+    "seashell",
+    "snow",
+    "floralwhite",
+]);
+/** 名前付きカラー検出正規表現（CSSプロパティ値内） */
+const NAMED_COLOR_IN_CSS_RE = /(?:color|background(?:-color)?|border(?:-color)?|outline-color|fill|stroke)\s*:\s*([a-zA-Z]+)\b/gi;
+/** padding/margin/gap値の正規表現 */
+const SPACING_VALUE_RE = /(?:padding|margin|gap|row-gap|column-gap)(?:-(?:top|right|bottom|left|inline|block|inline-start|inline-end|block-start|block-end))?\s*:\s*([^;}{]+)/gi;
+/** clamp()使用の正規表現 */
+const CLAMP_RE = /clamp\([^)]+\)/gi;
+/** CSS変数使用の正規表現 */
+const CSS_VAR_RE = /var\(--[^)]+\)/gi;
+/** box-shadow正規表現 */
+const BOX_SHADOW_RE = /box-shadow\s*:[^;}{]+/gi;
+/** text-shadow正規表現 */
+const TEXT_SHADOW_RE = /text-shadow\s*:[^;}{]+/gi;
+/** filter正規表現 */
+const FILTER_RE = /(?:^|[^-])filter\s*:[^;}{]+/gi;
+/** backdrop-filter正規表現 */
+const BACKDROP_FILTER_RE = /backdrop-filter\s*:[^;}{]+/gi;
+/** gradient正規表現 */
+const GRADIENT_RE = /(?:linear|radial|conic)-gradient\([^)]*(?:\([^)]*\))*[^)]*\)/gi;
+/** transform正規表現 */
+const TRANSFORM_RE = /transform\s*:[^;}{]+/gi;
+/** z-index正規表現 */
+const Z_INDEX_RE = /z-index\s*:\s*-?\d+/gi;
+/** 疑似要素正規表現 */
+const PSEUDO_ELEMENT_RE = /::(?:before|after)\s*\{[^}]*\}/gi;
+/** <style>タグ内のCSS抽出正規表現 */
+const STYLE_TAG_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+/** inline style属性の抽出正規表現 */
+const INLINE_STYLE_RE = /style\s*=\s*["']([^"']+)["']/gi;
+// =====================================================
+// Helper Functions
+// =====================================================
+/**
+ * HTML内の<style>タグとinline styleからCSS文字列を結合抽出
+ */
+function extractCssFromHtml(html) {
+    const parts = [];
+    // <style>タグ内のCSS
+    let match;
+    const styleTagRe = new RegExp(STYLE_TAG_RE.source, STYLE_TAG_RE.flags);
+    while ((match = styleTagRe.exec(html)) !== null) {
+        if (match[1])
+            parts.push(match[1]);
+    }
+    // inline style属性
+    const inlineStyleRe = new RegExp(INLINE_STYLE_RE.source, INLINE_STYLE_RE.flags);
+    while ((match = inlineStyleRe.exec(html)) !== null) {
+        if (match[1])
+            parts.push(match[1]);
+    }
+    return parts.join("\n");
+}
+/**
+ * 正規表現のグローバルマッチをカウント
+ */
+function countMatches(text, pattern) {
+    const re = new RegExp(pattern.source, pattern.flags);
+    const matches = text.match(re);
+    return matches ? matches.length : 0;
+}
+/**
+ * 正規表現のグローバルマッチを配列で取得
+ */
+function getAllMatches(text, pattern) {
+    const re = new RegExp(pattern.source, pattern.flags);
+    return text.match(re) ?? [];
+}
+/**
+ * font-sizeをpx換算（概算）
+ * rem/emは16px基準、clamp()は中間値を使用
+ */
+function normalizeFontSizeToPx(value) {
+    const trimmed = value.trim().toLowerCase();
+    // clamp()の場合は中間値（preferred）を使用
+    if (trimmed.startsWith("clamp(")) {
+        const inner = trimmed.slice(6, -1);
+        const parts = inner.split(",").map((s) => s.trim());
+        const preferred = parts[1];
+        if (parts.length >= 2 && preferred) {
+            return normalizeFontSizeToPx(preferred);
+        }
+        return 16;
+    }
+    const numMatch = trimmed.match(/([\d.]+)(px|rem|em|vw|vh|%)?/);
+    if (!numMatch || !numMatch[1])
+        return 16;
+    const num = parseFloat(numMatch[1]);
+    const unit = numMatch[2] ?? "px";
+    switch (unit) {
+        case "px":
+            return num;
+        case "rem":
+        case "em":
+            return num * 16;
+        case "vw":
+        case "vh":
+            return num * 10; // 1000px viewport概算
+        case "%":
+            return (num / 100) * 16;
+        default:
+            return num;
+    }
+}
+/**
+ * font-weightを数値に変換
+ */
+function normalizeWeight(value) {
+    const trimmed = value.trim().toLowerCase();
+    switch (trimmed) {
+        case "normal":
+            return 400;
+        case "bold":
+            return 700;
+        case "bolder":
+            return 800;
+        case "lighter":
+            return 300;
+        default: {
+            const parsed = parseInt(trimmed, 10);
+            return isNaN(parsed) ? 400 : parsed;
+        }
+    }
+}
+/**
+ * hex/rgb/hsl色をHSLに変換（色相抽出用）
+ * 簡易実装: 色相の分散計算に使用
+ */
+function extractHue(colorStr) {
+    const trimmed = colorStr.trim().toLowerCase();
+    // HSL形式
+    const hslMatch = trimmed.match(/hsla?\(\s*([\d.]+)/);
+    if (hslMatch && hslMatch[1]) {
+        return parseFloat(hslMatch[1]) % 360;
+    }
+    // RGB形式
+    const rgbMatch = trimmed.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/);
+    if (rgbMatch && rgbMatch[1] && rgbMatch[2] && rgbMatch[3]) {
+        return rgbToHue(parseInt(rgbMatch[1], 10), parseInt(rgbMatch[2], 10), parseInt(rgbMatch[3], 10));
+    }
+    // Hex形式
+    const hexMatch = trimmed.match(/^#([0-9a-f]{3,8})$/);
+    if (hexMatch && hexMatch[1]) {
+        const hex = hexMatch[1];
+        let r, g, b;
+        if (hex.length === 3 || hex.length === 4) {
+            r = parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            g = parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            b = parseInt(hex.charAt(2) + hex.charAt(2), 16);
+        }
+        else {
+            r = parseInt(hex.slice(0, 2), 16);
+            g = parseInt(hex.slice(2, 4), 16);
+            b = parseInt(hex.slice(4, 6), 16);
+        }
+        return rgbToHue(r, g, b);
+    }
+    return null;
+}
+/**
+ * RGB → Hue (0-360) 変換
+ */
+function rgbToHue(r, g, b) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const delta = max - min;
+    if (delta === 0)
+        return 0;
+    let hue;
+    if (max === rn) {
+        hue = ((gn - bn) / delta) % 6;
+    }
+    else if (max === gn) {
+        hue = (bn - rn) / delta + 2;
+    }
+    else {
+        hue = (rn - gn) / delta + 4;
+    }
+    hue *= 60;
+    if (hue < 0)
+        hue += 360;
+    return hue;
+}
+/**
+ * 色相の分散（標準偏差）を計算（circular statistics）
+ */
+function calculateHueVariance(hues) {
+    if (hues.length < 2)
+        return 0;
+    // 円形統計: sinとcosの平均を使用
+    let sinSum = 0;
+    let cosSum = 0;
+    for (const h of hues) {
+        const rad = (h * Math.PI) / 180;
+        sinSum += Math.sin(rad);
+        cosSum += Math.cos(rad);
+    }
+    const meanSin = sinSum / hues.length;
+    const meanCos = cosSum / hues.length;
+    const r = Math.sqrt(meanSin * meanSin + meanCos * meanCos);
+    // r = 1: 全て同じ方向 → 分散低, r = 0: 均等分散 → 分散高
+    // 分散 = 1 - r (0-1)
+    return 1 - r;
+}
+/**
+ * spacing値をpx換算
+ */
+function normalizeSpacingToPx(value) {
+    const trimmed = value.trim().toLowerCase();
+    if (trimmed.startsWith("clamp(")) {
+        const inner = trimmed.slice(6, -1);
+        const parts = inner.split(",").map((s) => s.trim());
+        const preferred = parts[1];
+        if (parts.length >= 2 && preferred) {
+            return normalizeSpacingToPx(preferred);
+        }
+        return 0;
+    }
+    if (trimmed.startsWith("var(")) {
+        return -1; // CSS変数はスコア加算用のシグナル
+    }
+    const numMatch = trimmed.match(/([\d.]+)(px|rem|em|%|vw|vh)?/);
+    if (!numMatch || !numMatch[1])
+        return 0;
+    const num = parseFloat(numMatch[1]);
+    const unit = numMatch[2] ?? "px";
+    switch (unit) {
+        case "px":
+            return num;
+        case "rem":
+        case "em":
+            return num * 16;
+        case "%":
+        case "vw":
+        case "vh":
+            return num * 10;
+        default:
+            return num;
+    }
+}
+/**
+ * 値を0-100にクランプ
+ */
+function clampScore(value) {
+    return Math.max(0, Math.min(100, Math.round(value)));
+}
+// =====================================================
+// Metric Calculators
+// =====================================================
+/**
+ * 1. visualDensity: 視覚的密度メトリクス
+ */
+function calculateVisualDensity(html) {
+    // メディア要素カウント
+    const allMedia = getAllMatches(html, MEDIA_ELEMENT_RE);
+    const decorativeImgs = getAllMatches(html, DECORATIVE_IMG_RE);
+    // 装飾的imgを除外したメディア数
+    const effectiveMediaCount = Math.max(0, allMedia.length - decorativeImgs.length);
+    // セクション要素カウント
+    const sectionCount = Math.max(1, countMatches(html, SECTION_ELEMENT_RE));
+    // セクションあたりの密度
+    const density = effectiveMediaCount / sectionCount;
+    let score;
+    if (effectiveMediaCount === 0) {
+        score = 0;
+    }
+    else if (density < 0.5) {
+        score = Math.round(density * 80);
+    }
+    else if (density < 1) {
+        score = Math.round(40 + (density - 0.5) * 40);
+    }
+    else if (density < 2) {
+        score = Math.round(60 + (density - 1) * 20);
+    }
+    else if (density < 3) {
+        score = Math.round(80 + (density - 2) * 15);
+    }
+    else {
+        score = Math.round(Math.min(100, 95 + (density - 3) * 2));
+    }
+    score = clampScore(score);
+    const detail = `visualDensity: ${score} (media=${effectiveMediaCount}, sections=${sectionCount}, density=${density.toFixed(2)})`;
+    return { score, detail };
+}
+/**
+ * 2. typographyContrast: タイポグラフィコントラスト
+ */
+function calculateTypographyContrast(css, html) {
+    // font-size値を全て抽出
+    const fontSizes = [];
+    let match;
+    const fontSizeRe = new RegExp(FONT_SIZE_RE.source, FONT_SIZE_RE.flags);
+    while ((match = fontSizeRe.exec(css)) !== null) {
+        if (match[1])
+            fontSizes.push(normalizeFontSizeToPx(match[1]));
+    }
+    // HTMLからも抽出（style属性等）
+    const htmlFontSizeRe = new RegExp(FONT_SIZE_RE.source, FONT_SIZE_RE.flags);
+    while ((match = htmlFontSizeRe.exec(html)) !== null) {
+        if (match[1])
+            fontSizes.push(normalizeFontSizeToPx(match[1]));
+    }
+    // font-weight値を抽出
+    const weights = [];
+    const fontWeightRe = new RegExp(FONT_WEIGHT_RE.source, FONT_WEIGHT_RE.flags);
+    while ((match = fontWeightRe.exec(css)) !== null) {
+        if (match[1])
+            weights.push(normalizeWeight(match[1]));
+    }
+    const htmlWeightRe = new RegExp(FONT_WEIGHT_RE.source, FONT_WEIGHT_RE.flags);
+    while ((match = htmlWeightRe.exec(html)) !== null) {
+        if (match[1])
+            weights.push(normalizeWeight(match[1]));
+    }
+    // line-height値を抽出
+    const lineHeights = countMatches(css, LINE_HEIGHT_RE) + countMatches(html, LINE_HEIGHT_RE);
+    if (fontSizes.length === 0) {
+        return {
+            score: 10,
+            detail: "typographyContrast: 10 (no font-size declarations found)",
+        };
+    }
+    // ユニークサイズ数
+    const uniqueSizes = [...new Set(fontSizes.map((s) => Math.round(s)))];
+    const uniqueWeights = [...new Set(weights)];
+    const maxSize = Math.max(...fontSizes);
+    const minSize = Math.min(...fontSizes);
+    // サイズ比（最大/最小）: h1/body相当
+    const sizeRatio = minSize > 0 ? maxSize / minSize : 1;
+    let score = 0;
+    // サイズ比スコア (0-40)
+    if (sizeRatio >= 3) {
+        score += 40;
+    }
+    else if (sizeRatio >= 2) {
+        score += 25 + Math.round((sizeRatio - 2) * 15);
+    }
+    else if (sizeRatio >= 1.5) {
+        score += 15 + Math.round((sizeRatio - 1.5) * 20);
+    }
+    else {
+        score += Math.round(sizeRatio * 10);
+    }
+    // ユニークサイズ数ボーナス (0-25)
+    score += Math.min(25, uniqueSizes.length * 5);
+    // font-weightバリエーションボーナス (0-20)
+    score += Math.min(20, uniqueWeights.length * 7);
+    // line-height使用ボーナス (0-15)
+    score += Math.min(15, lineHeights * 3);
+    score = clampScore(score);
+    const detail = `typographyContrast: ${score} (sizes=${uniqueSizes.length}, ratio=${sizeRatio.toFixed(1)}, weights=${uniqueWeights.length}, lineHeights=${lineHeights})`;
+    return { score, detail };
+}
+/**
+ * 3. colorVariety: 色彩豊富度
+ */
+function calculateColorVariety(css, html) {
+    const combined = css + "\n" + html;
+    // カラー値を抽出
+    const colorMatches = getAllMatches(combined, COLOR_VALUE_RE);
+    // 名前付きカラーを検出
+    const namedColorMatches = [];
+    let match;
+    const namedRe = new RegExp(NAMED_COLOR_IN_CSS_RE.source, NAMED_COLOR_IN_CSS_RE.flags);
+    while ((match = namedRe.exec(combined)) !== null) {
+        if (!match[1])
+            continue;
+        const colorName = match[1].toLowerCase();
+        if (NAMED_COLORS.has(colorName)) {
+            namedColorMatches.push(colorName);
+        }
+    }
+    // ユニークカラー集合
+    const uniqueColors = new Set([
+        ...colorMatches.map((c) => c.toLowerCase().replace(/\s+/g, "")),
+        ...namedColorMatches,
+    ]);
+    const uniqueCount = uniqueColors.size;
+    // 色相抽出
+    const hues = [];
+    for (const color of uniqueColors) {
+        const hue = extractHue(color);
+        if (hue !== null) {
+            hues.push(hue);
+        }
+    }
+    // 色相の分散
+    const hueVariance = calculateHueVariance(hues);
+    let score = 0;
+    // ユニークカラー数スコア (0-50)
+    if (uniqueCount <= 1) {
+        score += 5;
+    }
+    else if (uniqueCount <= 3) {
+        score += 15 + (uniqueCount - 1) * 5;
+    }
+    else if (uniqueCount <= 6) {
+        score += 25 + (uniqueCount - 3) * 5;
+    }
+    else if (uniqueCount <= 10) {
+        score += 40 + (uniqueCount - 6) * 2;
+    }
+    else {
+        score += Math.min(50, 48 + Math.floor(uniqueCount / 10));
+    }
+    // 色相分散スコア (0-50)
+    // hueVariance: 0 (全て同色) ～ 1 (均等分散)
+    score += Math.round(hueVariance * 50);
+    score = clampScore(score);
+    const detail = `colorVariety: ${score} (uniqueColors=${uniqueCount}, hueVariance=${hueVariance.toFixed(2)}, hues=${hues.length})`;
+    return { score, detail };
+}
+/**
+ * 4. whitespaceIntentionality: 余白の意図性
+ */
+function calculateWhitespaceIntentionality(css, html) {
+    const combined = css + "\n" + html;
+    // spacing値を抽出
+    const spacingDeclarations = getAllMatches(combined, SPACING_VALUE_RE);
+    const spacingValues = [];
+    let clampCount = 0;
+    let cssVarCount = 0;
+    for (const decl of spacingDeclarations) {
+        // プロパティ名部分を除去して値部分のみ取得
+        const colonIndex = decl.indexOf(":");
+        if (colonIndex === -1)
+            continue;
+        const rawValue = decl.slice(colonIndex + 1).trim();
+        // 複数値（shorthand）を個別に処理
+        const values = rawValue
+            .split(/\s+/)
+            .filter((v) => v && v !== "0" && v !== "auto" && v !== "inherit");
+        for (const v of values) {
+            if (CLAMP_RE.test(v)) {
+                clampCount++;
+                // clamp正規表現のlastIndexをリセット
+                CLAMP_RE.lastIndex = 0;
+            }
+            if (CSS_VAR_RE.test(v)) {
+                cssVarCount++;
+                CSS_VAR_RE.lastIndex = 0;
+            }
+            const px = normalizeSpacingToPx(v);
+            if (px > 0) {
+                spacingValues.push(px);
+            }
+        }
+    }
+    // 追加: combined全体からclamp/var使用をカウント
+    const totalClamps = countMatches(combined, CLAMP_RE);
+    const totalVars = countMatches(combined, CSS_VAR_RE);
+    clampCount = Math.max(clampCount, totalClamps);
+    cssVarCount = Math.max(cssVarCount, totalVars);
+    if (spacingValues.length === 0 && clampCount === 0 && cssVarCount === 0) {
+        return {
+            score: 10,
+            detail: "whitespaceIntentionality: 10 (no spacing declarations found)",
+        };
+    }
+    let score = 0;
+    // 基本スペーシング宣言数 (0-25)
+    score += Math.min(25, spacingDeclarations.length * 2);
+    // clamp()使用ボーナス (0-25)
+    score += Math.min(25, clampCount * 8);
+    // CSS変数使用ボーナス (0-20)
+    score += Math.min(20, cssVarCount * 5);
+    // 一貫したスケール検出 (0-20)
+    // 8pxの倍数パターンの検出
+    if (spacingValues.length >= 3) {
+        const roundedValues = spacingValues.map((v) => Math.round(v));
+        const multiplesOf8 = roundedValues.filter((v) => v % 8 === 0 || v % 4 === 0);
+        const scaleConsistency = multiplesOf8.length / roundedValues.length;
+        score += Math.round(scaleConsistency * 20);
+    }
+    // 大きなセクションパディング検出 (0-10)
+    const largeSpacings = spacingValues.filter((v) => v >= 80);
+    if (largeSpacings.length > 0) {
+        score += Math.min(10, largeSpacings.length * 3);
+    }
+    score = clampScore(score);
+    const detail = `whitespaceIntentionality: ${score} (declarations=${spacingDeclarations.length}, clamp=${clampCount}, cssVar=${cssVarCount}, values=${spacingValues.length})`;
+    return { score, detail };
+}
+/**
+ * 5. visualDepth: 視覚的深度
+ */
+function calculateVisualDepth(css, html) {
+    const combined = css + "\n" + html;
+    // 各プロパティの使用数をカウント
+    const boxShadowCount = countMatches(combined, BOX_SHADOW_RE);
+    const textShadowCount = countMatches(combined, TEXT_SHADOW_RE);
+    const filterCount = countMatches(combined, FILTER_RE);
+    const backdropFilterCount = countMatches(combined, BACKDROP_FILTER_RE);
+    const gradients = getAllMatches(combined, GRADIENT_RE);
+    const transformCount = countMatches(combined, TRANSFORM_RE);
+    const zIndexCount = countMatches(combined, Z_INDEX_RE);
+    const pseudoElements = getAllMatches(combined, PSEUDO_ELEMENT_RE);
+    let score = 0;
+    // box-shadow (0-20)
+    score += Math.min(20, boxShadowCount * 8);
+    // text-shadow (0-10)
+    score += Math.min(10, textShadowCount * 5);
+    // filter / backdrop-filter (0-15)
+    score += Math.min(10, filterCount * 5);
+    score += Math.min(5, backdropFilterCount * 5);
+    // gradient複雑度 (0-20)
+    if (gradients.length > 0) {
+        let gradientScore = Math.min(10, gradients.length * 4);
+        // グラデーション内のstop数
+        for (const grad of gradients) {
+            const commaCount = (grad.match(/,/g) ?? []).length;
+            if (commaCount >= 3) {
+                gradientScore += 3; // 多段グラデーション
+            }
+        }
+        score += Math.min(20, gradientScore);
+    }
+    // transform (0-15)
+    score += Math.min(15, transformCount * 5);
+    // z-index（レイヤリング意識） (0-10)
+    score += Math.min(10, zIndexCount * 3);
+    // 疑似要素の装飾利用 (0-10)
+    let pseudoDecorationScore = 0;
+    for (const pseudo of pseudoElements) {
+        if (/content\s*:\s*["'][^"']*["']/.test(pseudo) ||
+            /background/.test(pseudo) ||
+            /border/.test(pseudo) ||
+            /position\s*:\s*absolute/.test(pseudo)) {
+            pseudoDecorationScore += 3;
+        }
+    }
+    score += Math.min(10, pseudoDecorationScore);
+    score = clampScore(score);
+    const detail = `visualDepth: ${score} (shadow=${boxShadowCount}+${textShadowCount}, filter=${filterCount}+${backdropFilterCount}, gradients=${gradients.length}, transform=${transformCount}, zIndex=${zIndexCount}, pseudo=${pseudoElements.length})`;
+    return { score, detail };
+}
+// =====================================================
+// Service Implementation
+// =====================================================
+/**
+ * VisualDesignAnalyzerService
+ *
+ * HTML+CSS文字列から視覚デザイン品質メトリクスを算出。
+ * 外部リソースフェッチなし、正規表現ベースの静的解析。
+ *
+ * @example
+ * ```typescript
+ * const service = getVisualDesignAnalyzerService();
+ * const metrics = service.analyze(html, css);
+ * console.log(metrics.overall); // 0-100
+ * ```
+ */
+class VisualDesignAnalyzerService {
+    /**
+     * HTML+CSSから視覚デザインメトリクスを算出
+     *
+     * @param html - 分析対象のHTML文字列
+     * @param css - 追加のCSS文字列（オプション）
+     * @returns 5つのメトリクス + overall + details
+     */
+    analyze(html, css) {
+        if (!html || html.trim() === "") {
+            return this.createEmptyResult();
+        }
+        const startTime = Date.now();
+        // HTMLからCSSを抽出し、外部CSSと結合
+        const extractedCss = extractCssFromHtml(html);
+        const combinedCss = css ? `${extractedCss}\n${css}` : extractedCss;
+        // 各メトリクスを計算
+        const density = calculateVisualDensity(html);
+        const typography = calculateTypographyContrast(combinedCss, html);
+        const color = calculateColorVariety(combinedCss, html);
+        const whitespace = calculateWhitespaceIntentionality(combinedCss, html);
+        const depth = calculateVisualDepth(combinedCss, html);
+        // 加重平均
+        const overall = clampScore(density.score * 0.25 +
+            typography.score * 0.2 +
+            color.score * 0.15 +
+            whitespace.score * 0.15 +
+            depth.score * 0.25);
+        const elapsed = Date.now() - startTime;
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.info("[VisualDesignAnalyzer] Analysis completed", {
+                overall,
+                elapsed: `${elapsed}ms`,
+                htmlLength: html.length,
+                cssLength: combinedCss.length,
+            });
+        }
+        return {
+            visualDensity: density.score,
+            typographyContrast: typography.score,
+            colorVariety: color.score,
+            whitespaceIntentionality: whitespace.score,
+            visualDepth: depth.score,
+            overall,
+            details: [
+                density.detail,
+                typography.detail,
+                color.detail,
+                whitespace.detail,
+                depth.detail,
+                `overall: ${overall} (weighted average, elapsed=${elapsed}ms)`,
+            ],
+        };
+    }
+    /**
+     * 空の結果を作成
+     */
+    createEmptyResult() {
+        return {
+            visualDensity: 0,
+            typographyContrast: 0,
+            colorVariety: 0,
+            whitespaceIntentionality: 0,
+            visualDepth: 0,
+            overall: 0,
+            details: ["No HTML content provided"],
+        };
+    }
+}
+exports.VisualDesignAnalyzerService = VisualDesignAnalyzerService;
+// =====================================================
+// Factory Functions (DI Pattern)
+// =====================================================
+/** ファクトリ関数（テスト時のDI用） */
+let visualDesignAnalyzerServiceFactory = null;
+/**
+ * VisualDesignAnalyzerServiceファクトリを設定（テスト用）
+ */
+function setVisualDesignAnalyzerServiceFactory(factory) {
+    visualDesignAnalyzerServiceFactory = factory;
+}
+/**
+ * VisualDesignAnalyzerServiceファクトリをリセット（テスト用）
+ */
+function resetVisualDesignAnalyzerServiceFactory() {
+    visualDesignAnalyzerServiceFactory = null;
+}
+/**
+ * VisualDesignAnalyzerServiceインスタンスを取得
+ *
+ * ファクトリが設定されている場合はそれを使用、
+ * なければデフォルトのVisualDesignAnalyzerServiceを返す。
+ */
+function getVisualDesignAnalyzerService() {
+    if (visualDesignAnalyzerServiceFactory) {
+        return visualDesignAnalyzerServiceFactory();
+    }
+    return new VisualDesignAnalyzerService();
+}
+/**
+ * VisualDesignAnalyzerServiceのインスタンスを直接作成
+ */
+function createVisualDesignAnalyzerService() {
+    return new VisualDesignAnalyzerService();
+}
+//# sourceMappingURL=visual-design-analyzer.service.js.map