@reftrixmcp/mcp-server 0.1.8 → 0.2.0

package/dist/services/background/background-design-detector.service.js

@@ -1,1106 +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.createBackgroundDesignDetectorService = createBackgroundDesignDetectorService;
-/**
- * Background Design Detector Service
- *
- * CSS/HTML コンテンツから背景デザインパターンを検出・分類するサービス。
- * グラデーション、ガラスモーフィズム、画像背景、パターン背景、アニメーション背景など
- * 14種類のデザインカテゴリを判別する。
- *
- * セキュリティ:
- * - 入力サイズバリデーション (5MB max) - SEC H-1
- *
- * @module services/background/background-design-detector.service
- */
-const webdesign_core_1 = require("@reftrixmcp/webdesign-core");
-const logger_1 = require("../../utils/logger");
-const logger = (0, logger_1.createLogger)("BackgroundDesignDetector");
-// =============================================================================
-// Constants
-// =============================================================================
-/** Maximum CSS content size in bytes (5MB) */
-const MAX_INPUT_SIZE_BYTES = 5 * 1024 * 1024;
-/** Named CSS colors (subset for detection) */
-const NAMED_COLORS = new Set([
-    "transparent",
-    "currentcolor",
-    "black",
-    "white",
-    "red",
-    "green",
-    "blue",
-    "yellow",
-    "orange",
-    "purple",
-    "pink",
-    "cyan",
-    "magenta",
-    "lime",
-    "aqua",
-    "navy",
-    "teal",
-    "maroon",
-    "olive",
-    "silver",
-    "gray",
-    "grey",
-    "fuchsia",
-    "coral",
-    "salmon",
-    "crimson",
-    "darkcyan",
-    "darkblue",
-    "darkgreen",
-    "darkred",
-    "darkgray",
-    "lightgray",
-    "lightblue",
-    "lightgreen",
-    "lightyellow",
-    "beige",
-    "ivory",
-    "gold",
-    "indigo",
-    "violet",
-    "plum",
-    "khaki",
-    "lavender",
-    "linen",
-    "wheat",
-    "tomato",
-    "turquoise",
-    "peru",
-    "orchid",
-    "sienna",
-    "tan",
-    "thistle",
-    "snow",
-    "seashell",
-    "mintcream",
-    "aliceblue",
-    "ghostwhite",
-    "whitesmoke",
-    "honeydew",
-    "azure",
-    "floralwhite",
-    "oldlace",
-    "cornsilk",
-    "papayawhip",
-    "blanchedalmond",
-    "bisque",
-    "moccasin",
-    "navajowhite",
-    "peachpuff",
-    "mistyrose",
-    "antiquewhite",
-    "lemonchiffon",
-]);
-/** Image file extensions */
-const IMAGE_EXTENSIONS = new Set([
-    ".jpg",
-    ".jpeg",
-    ".png",
-    ".gif",
-    ".webp",
-    ".avif",
-    ".bmp",
-    ".tiff",
-]);
-/** Direction keywords to angle mapping */
-const DIRECTION_ANGLE_MAP = {
-    "to top": 0,
-    "to top right": 45,
-    "to right": 90,
-    "to bottom right": 135,
-    "to bottom": 180,
-    "to bottom left": 225,
-    "to left": 270,
-    "to top left": 315,
-};
-// =============================================================================
-// CSS Parsing Functions
-// =============================================================================
-/**
- * Remove CSS comments from content
- * @param css - Raw CSS content
- * @returns CSS without comments
- */
-function removeComments(css) {
-    return css.replace(/\/\*[\s\S]*?\*\//g, "");
-}
-/**
- * Extract CSS from HTML <style> tags
- * @param html - HTML content
- * @returns Extracted CSS content
- */
-function extractCSSFromHTML(html) {
-    const parts = [];
-    const styleTagRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
-    let match;
-    while ((match = styleTagRegex.exec(html)) !== null) {
-        if (match[1]) {
-            parts.push(match[1]);
-        }
-    }
-    return parts.join("\n");
-}
-/**
- * Extract inline style attributes from HTML that contain background-related properties.
- * Converts inline styles to synthetic CSS rules for the detection pipeline.
- * Deduplicates identical style values to avoid counting repeated patterns.
- * @param html - HTML content
- * @returns CSS-like string with synthetic selectors
- */
-function extractInlineStylesFromHTML(html) {
-    const seen = new Set();
-    const parts = [];
-    // Match style="..." attributes (double quotes only; single quotes handled separately)
-    const inlineStyleRegex = /style\s*=\s*"([^"]*)"/gi;
-    let match;
-    let index = 0;
-    while ((match = inlineStyleRegex.exec(html)) !== null) {
-        const styleValue = match[1]?.trim();
-        if (!styleValue)
-            continue;
-        // Only include if it has background-related properties
-        if (!/background(?:-color|-image|-size|-position|-repeat|-attachment|-blend-mode)?|backdrop-filter/i.test(styleValue)) {
-            continue;
-        }
-        // Deduplicate identical style values
-        const normalized = styleValue.replace(/\s+/g, " ").toLowerCase();
-        if (seen.has(normalized))
-            continue;
-        seen.add(normalized);
-        parts.push(`[data-inline-bg-${index}] { ${styleValue} }`);
-        index++;
-    }
-    return parts.join("\n");
-}
-/**
- * Parse CSS content into rules with selectors and properties.
- * Handles nested @media/@supports blocks by extracting inner rules.
- * @param css - CSS content (comments already removed)
- * @returns Array of parsed rules
- */
-function parseCSSRules(css) {
-    const rules = [];
-    const cleaned = removeComments(css);
-    // First, expand nested at-rules so inner selectors are parsed as rules
-    const expanded = expandAtRules(cleaned);
-    // Match selector { declarations } blocks (simple, non-nested)
-    const ruleRegex = /([^{}@]+)\{([^{}]*)\}/g;
-    let match;
-    while ((match = ruleRegex.exec(expanded)) !== null) {
-        const selector = match[1]?.trim() ?? "";
-        const block = match[2] ?? "";
-        // Skip at-rules that aren't selectors (e.g. @keyframes name)
-        if (selector.startsWith("@") &&
-            !selector.startsWith("@media") &&
-            !selector.startsWith("@supports")) {
-            continue;
-        }
-        if (!selector)
-            continue;
-        const properties = parseDeclarations(block);
-        if (properties.size > 0) {
-            rules.push({ selector, properties });
-        }
-    }
-    return rules;
-}
-/**
- * Expand @media and @supports blocks into flat rule list.
- * Removes the @-rule wrapper, keeping inner content.
- * @param css - CSS with possible at-rules
- * @returns Flattened CSS string
- */
-function expandAtRules(css) {
-    // Replace @media (...) { ... } with just the inner content
-    // Handles one level of nesting (sufficient for background detection)
-    let result = css;
-    // Match @media / @supports blocks
-    const atRuleRegex = /@(?:media|supports)[^{]*\{([\s\S]*?\})\s*\}/g;
-    let match;
-    const replacements = [];
-    while ((match = atRuleRegex.exec(result)) !== null) {
-        replacements.push({
-            start: match.index,
-            end: match.index + match[0].length,
-            inner: match[1] ?? "",
-        });
-    }
-    // Apply replacements in reverse order to preserve indices
-    for (let i = replacements.length - 1; i >= 0; i--) {
-        const r = replacements[i];
-        result = result.slice(0, r.start) + r.inner + result.slice(r.end);
-    }
-    return result;
-}
-/**
- * Parse CSS declaration block into property-value map
- * @param block - CSS declarations (without braces)
- * @returns Map of property -> value
- */
-function parseDeclarations(block) {
-    const props = new Map();
-    const pairs = block.split(";");
-    for (const pair of pairs) {
-        const colonIndex = pair.indexOf(":");
-        if (colonIndex > 0) {
-            const property = pair.substring(0, colonIndex).trim().toLowerCase();
-            const value = pair.substring(colonIndex + 1).trim();
-            if (property && value) {
-                props.set(property, value);
-            }
-        }
-    }
-    return props;
-}
-/**
- * Extract gradient function matches from a CSS value.
- * Handles nested parentheses correctly.
- * @param value - CSS property value
- * @returns Array of gradient matches
- */
-function extractGradientMatches(value) {
-    const matches = [];
-    const gradientRegex = /(repeating-)?(linear|radial|conic)-gradient\(/g;
-    let regexMatch;
-    while ((regexMatch = gradientRegex.exec(value)) !== null) {
-        const isRepeating = !!regexMatch[1];
-        const type = regexMatch[2];
-        const startIndex = regexMatch.index;
-        const openParenIndex = startIndex + regexMatch[0].length - 1;
-        // Find matching closing parenthesis
-        let depth = 1;
-        let i = openParenIndex + 1;
-        while (i < value.length && depth > 0) {
-            if (value[i] === "(")
-                depth++;
-            if (value[i] === ")")
-                depth--;
-            i++;
-        }
-        const fullMatch = value.substring(startIndex, i);
-        const args = value.substring(openParenIndex + 1, i - 1);
-        matches.push({ type, fullMatch, args, isRepeating });
-    }
-    return matches;
-}
-// =============================================================================
-// Gradient Parsing Functions
-// =============================================================================
-/**
- * Split gradient arguments by top-level commas (respecting parentheses)
- * @param args - Gradient function arguments
- * @returns Array of argument parts
- */
-function splitGradientArgs(args) {
-    const parts = [];
-    let depth = 0;
-    let current = "";
-    for (const char of args) {
-        if (char === "(")
-            depth++;
-        if (char === ")")
-            depth--;
-        if (char === "," && depth === 0) {
-            parts.push(current.trim());
-            current = "";
-        }
-        else {
-            current += char;
-        }
-    }
-    if (current.trim()) {
-        parts.push(current.trim());
-    }
-    return parts;
-}
-/**
- * Parse linear gradient direction/angle from first argument
- * @param firstArg - First argument of linear-gradient()
- * @returns Angle in degrees or undefined
- */
-function parseLinearAngle(firstArg) {
-    const lower = firstArg.toLowerCase().trim();
-    // Check for angle (e.g., "135deg")
-    const angleMatch = lower.match(/^(-?\d+(?:\.\d+)?)(deg|grad|rad|turn)$/);
-    if (angleMatch) {
-        let val = parseFloat(angleMatch[1]);
-        const unit = angleMatch[2];
-        switch (unit) {
-            case "grad":
-                val = (val * 360) / 400;
-                break;
-            case "rad":
-                val = (val * 180) / Math.PI;
-                break;
-            case "turn":
-                val = val * 360;
-                break;
-        }
-        return val;
-    }
-    // Check direction keywords
-    for (const [keyword, angle] of Object.entries(DIRECTION_ANGLE_MAP)) {
-        if (lower === keyword) {
-            return angle;
-        }
-    }
-    return undefined;
-}
-/**
- * Check if a string is a direction/position specifier (not a color stop)
- * @param part - Gradient argument part
- * @returns True if the part is a direction/position
- */
-function isDirectionOrPosition(part) {
-    const lower = part.toLowerCase().trim();
-    return (/^(-?\d+(?:\.\d+)?)(deg|grad|rad|turn)$/.test(lower) ||
-        lower.startsWith("to ") ||
-        lower.startsWith("from ") ||
-        lower === "circle" ||
-        lower === "ellipse" ||
-        /^(circle|ellipse)\s/.test(lower) ||
-        lower.includes(" at "));
-}
-/**
- * Parse color stops from gradient arguments
- * @param args - Gradient function arguments string
- * @returns Array of gradient stops
- */
-function parseColorStops(args) {
-    const parts = splitGradientArgs(args);
-    const stops = [];
-    let startIdx = 0;
-    // Skip direction/position arguments
-    if (parts.length > 0 && isDirectionOrPosition(parts[0])) {
-        startIdx = 1;
-    }
-    const colorParts = parts.slice(startIdx);
-    for (let i = 0; i < colorParts.length; i++) {
-        const part = colorParts[i].trim();
-        // Extract position percentage if present
-        const posMatch = part.match(/(\d+(?:\.\d+)?%)\s*$/);
-        let position;
-        if (posMatch) {
-            position = parseFloat(posMatch[1]) / 100;
-        }
-        else if (i === 0) {
-            position = 0;
-        }
-        else if (i === colorParts.length - 1) {
-            position = 1;
-        }
-        else {
-            position = i / (colorParts.length - 1);
-        }
-        // Extract color part (remove position)
-        const colorPart = part.replace(/\s+\d+(?:\.\d+)?%\s*$/, "").trim();
-        if (colorPart) {
-            stops.push({ color: colorPart, position });
-        }
-    }
-    return stops;
-}
-// =============================================================================
-// Color Analysis Functions
-// =============================================================================
-/**
- * Check if a CSS color value has alpha transparency
- * @param value - CSS color value
- * @returns True if the color has alpha
- */
-function colorHasAlpha(value) {
-    const lower = value.toLowerCase();
-    return (lower.includes("rgba(") ||
-        lower.includes("hsla(") ||
-        lower.includes("oklch(") ||
-        /transparent/i.test(lower) ||
-        // Modern CSS color functions with alpha: rgb(r g b / a) or hsl(h s l / a)
-        /(?:rgb|hsl)\([^)]*\/\s*[\d.]+/.test(lower));
-}
-/**
- * Detect color space from a CSS color value
- * @param value - CSS color value
- * @returns Detected color space
- */
-function detectColorSpace(value) {
-    const lower = value.toLowerCase();
-    if (lower.includes("oklch(") || lower.includes("oklch "))
-        return "oklch";
-    if (lower.includes("color(display-p3") || lower.includes("color(p3"))
-        return "p3";
-    return "srgb";
-}
-/**
- * Extract distinct colors from a CSS value
- * @param value - CSS property value
- * @returns Array of color strings
- */
-function extractColorsFromValue(value) {
-    const colors = [];
-    // HEX colors
-    const hexMatches = value.match(/#[0-9a-fA-F]{3,8}\b/g);
-    if (hexMatches) {
-        colors.push(...hexMatches.map((c) => c.toLowerCase()));
-    }
-    // rgb/rgba
-    const rgbMatches = value.match(/rgba?\([^)]+\)/g);
-    if (rgbMatches) {
-        colors.push(...rgbMatches);
-    }
-    // hsl/hsla
-    const hslMatches = value.match(/hsla?\([^)]+\)/g);
-    if (hslMatches) {
-        colors.push(...hslMatches);
-    }
-    // oklch
-    const oklchMatches = value.match(/oklch\([^)]+\)/g);
-    if (oklchMatches) {
-        colors.push(...oklchMatches);
-    }
-    // Named colors (only at word boundaries, not inside function names)
-    const words = value.split(/[\s,()]+/);
-    for (const word of words) {
-        const lw = word.toLowerCase().replace(/;$/, "");
-        if (NAMED_COLORS.has(lw) && lw !== "transparent" && lw !== "currentcolor") {
-            colors.push(lw);
-        }
-    }
-    return colors;
-}
-// =============================================================================
-// Classification Logic
-// =============================================================================
-/**
- * Detect if a CSS rule represents a video background (via HTML context)
- * @param htmlContent - HTML content
- * @param selector - CSS selector
- * @param props - CSS properties
- * @returns True if video background detected
- */
-function isVideoBackground(htmlContent, selector, props) {
-    if (!htmlContent)
-        return false;
-    // Check if HTML has a <video> element
-    const hasVideo = /<video\b[^>]*>/i.test(htmlContent);
-    if (!hasVideo)
-        return false;
-    // Check if the selector targets a video-related element
-    const selectorLower = selector.toLowerCase();
-    const hasVideoSelector = selectorLower.includes("video") ||
-        selectorLower.includes("bg-video") ||
-        selectorLower.includes("background-video");
-    // Check for full-coverage positioning
-    const hasPositioning = props.get("position") === "absolute" || props.get("position") === "fixed";
-    const hasFullSize = props.get("width") === "100%" && props.get("height") === "100%";
-    const hasObjectFit = props.has("object-fit");
-    return hasVideoSelector && (hasPositioning || hasFullSize || hasObjectFit);
-}
-/**
- * Detect noise texture from SVG data URI
- * @param value - CSS background value
- * @returns True if noise texture detected
- */
-function isNoiseTexture(value) {
-    const lower = value.toLowerCase();
-    return (lower.includes("feturbulence") ||
-        lower.includes("fractalNoise".toLowerCase()) ||
-        (lower.includes("url(") && lower.includes("noise")));
-}
-/**
- * Detect SVG background
- * @param value - CSS background value
- * @returns True if SVG background detected
- */
-function isSVGBackground(value) {
-    const lower = value.toLowerCase();
-    return (lower.includes(".svg") ||
-        lower.includes("data:image/svg+xml") ||
-        lower.includes("data:image/svg+xml,"));
-}
-/**
- * Detect image background (non-SVG)
- * @param value - CSS background value
- * @returns True if image background detected
- */
-function isImageBackground(value) {
-    const lower = value.toLowerCase();
-    if (!lower.includes("url("))
-        return false;
-    // Check for image file extensions
-    for (const ext of IMAGE_EXTENSIONS) {
-        if (lower.includes(ext))
-            return true;
-    }
-    // Check for data URI images (non-SVG)
-    if (lower.includes("data:image/") && !lower.includes("data:image/svg")) {
-        return true;
-    }
-    return false;
-}
-/**
- * Detect pattern background (repeating small image)
- * @param value - CSS background-image value
- * @param props - All CSS properties
- * @returns True if pattern background detected
- */
-function isPatternBackground(value, props) {
-    if (!value.toLowerCase().includes("url("))
-        return false;
-    const repeat = props.get("background-repeat")?.toLowerCase() ?? "";
-    const size = props.get("background-size")?.toLowerCase() ?? "";
-    // Check for explicit repeat + small size
-    const hasRepeat = repeat === "repeat" || repeat === "repeat-x" || repeat === "repeat-y";
-    const hasSmallSize = /\d+px\s+\d+px/.test(size) && !size.includes("cover") && !size.includes("contain");
-    return hasRepeat && hasSmallSize;
-}
-/**
- * Detect glassmorphism (backdrop-filter blur + semi-transparent background)
- * @param props - CSS properties
- * @returns Blur radius if glassmorphism detected, 0 otherwise
- */
-function detectGlassmorphismBlur(props) {
-    const backdrop = props.get("backdrop-filter") ?? props.get("-webkit-backdrop-filter") ?? "";
-    const blurMatch = backdrop.match(/blur\((\d+(?:\.\d+)?)(px)?\)/);
-    if (blurMatch) {
-        return parseFloat(blurMatch[1]);
-    }
-    return 0;
-}
-/**
- * Check if a background value contains multiple layers (comma-separated backgrounds)
- * @param value - CSS background value
- * @returns Number of layers
- */
-function countBackgroundLayers(value) {
-    // Split by top-level commas (respecting parentheses)
-    const layers = splitGradientArgs(value);
-    return layers.length;
-}
-/**
- * Check if the background looks like a mesh gradient
- * (multiple overlapping radial gradients with transparent edges)
- * @param value - CSS background value
- * @returns True if mesh gradient pattern detected
- */
-function isMeshGradient(value) {
-    const gradients = extractGradientMatches(value);
-    const radialGradients = gradients.filter((g) => g.type === "radial");
-    if (radialGradients.length < 3)
-        return false;
-    // Check if most radial gradients fade to transparent
-    let transparentCount = 0;
-    for (const g of radialGradients) {
-        if (g.args.toLowerCase().includes("transparent")) {
-            transparentCount++;
-        }
-    }
-    return transparentCount >= 2;
-}
-/**
- * Detect animation info from CSS properties
- * @param props - CSS properties
- * @returns Animation info or undefined
- */
-function detectAnimationInfo(props) {
-    // Check for animation shorthand
-    const animationShorthand = props.get("animation");
-    if (animationShorthand) {
-        const parts = animationShorthand.split(/\s+/);
-        const info = { isAnimated: true };
-        for (const part of parts) {
-            if (/^\d+(\.\d+)?(s|ms)$/.test(part)) {
-                if (!info.duration) {
-                    info.duration = part;
-                }
-            }
-            else if (/^(ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier\([^)]+\)|steps\([^)]+\))$/.test(part)) {
-                info.easing = part;
-            }
-            else if (!/^(infinite|\d+)$/.test(part) &&
-                !/^(normal|reverse|alternate|alternate-reverse)$/.test(part) &&
-                !/^(none|forwards|backwards|both)$/.test(part) &&
-                !/^\d+(\.\d+)?(s|ms)$/.test(part)) {
-                if (!info.animationName) {
-                    info.animationName = part;
-                }
-            }
-        }
-        return info;
-    }
-    // Check for individual animation properties
-    const animName = props.get("animation-name");
-    if (animName && animName !== "none") {
-        const info = {
-            isAnimated: true,
-            animationName: animName,
-        };
-        const dur = props.get("animation-duration");
-        if (dur)
-            info.duration = dur;
-        const timing = props.get("animation-timing-function");
-        if (timing)
-            info.easing = timing;
-        return info;
-    }
-    // Check for transition on background
-    const transition = props.get("transition");
-    if (transition) {
-        const lower = transition.toLowerCase();
-        if (lower.includes("background") || lower.includes("all")) {
-            return { isAnimated: true };
-        }
-    }
-    const transitionProp = props.get("transition-property");
-    if (transitionProp) {
-        const lower = transitionProp.toLowerCase();
-        if (lower.includes("background") || lower.includes("all")) {
-            return { isAnimated: true };
-        }
-    }
-    return undefined;
-}
-/**
- * Assess performance impact of a background
- * @param detection - Partial detection (enough to assess)
- * @param props - CSS properties
- * @returns Performance info
- */
-function assessPerformance(designType, gradientStopCount, blurRadius, layerCount, props) {
-    const hasWillChange = props.has("will-change");
-    const hasTransform = props.has("transform");
-    const hasContain = props.get("contain")?.includes("paint") ?? false;
-    const gpuAccelerated = hasWillChange || hasTransform || hasContain;
-    // Most background changes trigger paint
-    const triggersPaint = designType !== "solid_color";
-    // Estimate impact
-    let impact = "low";
-    if (blurRadius > 0 || layerCount > 3 || gradientStopCount > 10) {
-        impact = "high";
-    }
-    else if (designType === "animated_gradient" ||
-        designType === "video_background" ||
-        layerCount > 1 ||
-        gradientStopCount > 5) {
-        impact = "medium";
-    }
-    return { gpuAccelerated, triggersPaint, estimatedImpact: impact };
-}
-/**
- * Generate a descriptive name for a background detection
- * @param designType - Detected design type
- * @param selector - CSS selector
- * @param gradientInfo - Optional gradient info
- * @param colorInfo - Color info
- * @returns Descriptive name
- */
-function generateName(designType, selector, gradientInfo, colorInfo) {
-    // Clean selector for name (take first class or element)
-    const selectorPart = selector
-        .replace(/[.#[\]:>+~ ]/g, " ")
-        .trim()
-        .split(/\s+/)[0] ?? "element";
-    switch (designType) {
-        case "solid_color":
-            return `${selectorPart} solid color background`;
-        case "linear_gradient": {
-            const angle = gradientInfo?.angle !== undefined ? `, ${gradientInfo.angle}deg` : "";
-            return `${selectorPart} linear gradient${angle}`;
-        }
-        case "radial_gradient":
-            return `${selectorPart} radial gradient`;
-        case "conic_gradient":
-            return `${selectorPart} conic gradient`;
-        case "mesh_gradient":
-            return `${selectorPart} mesh gradient (${colorInfo.colorCount} colors)`;
-        case "image_background":
-            return `${selectorPart} image background`;
-        case "pattern_background":
-            return `${selectorPart} pattern background`;
-        case "svg_background":
-            return `${selectorPart} SVG background`;
-        case "noise_texture":
-            return `${selectorPart} noise texture`;
-        case "video_background":
-            return `${selectorPart} video background`;
-        case "animated_gradient":
-            return `${selectorPart} animated gradient`;
-        case "glassmorphism":
-            return `${selectorPart} glassmorphism`;
-        case "multi_layer":
-            return `${selectorPart} multi-layer background`;
-        default:
-            return `${selectorPart} background`;
-    }
-}
-/**
- * Reconstruct CSS implementation from detection
- * @param props - CSS properties
- * @returns Reconstructed CSS string
- */
-function reconstructCSS(props) {
-    const bgProps = [
-        "background",
-        "background-color",
-        "background-image",
-        "background-size",
-        "background-repeat",
-        "background-position",
-        "background-blend-mode",
-        "backdrop-filter",
-        "-webkit-backdrop-filter",
-        "opacity",
-        "mix-blend-mode",
-        "will-change",
-    ];
-    const lines = [];
-    for (const prop of bgProps) {
-        const val = props.get(prop);
-        if (val) {
-            lines.push(`  ${prop}: ${val};`);
-        }
-    }
-    return lines.join("\n");
-}
-// =============================================================================
-// Main Classification
-// =============================================================================
-/**
- * Classify a CSS rule into a background design detection
- * @param rule - Parsed CSS rule
- * @param positionIndex - Position in CSS
- * @param htmlContent - Optional HTML content for context
- * @param keyframesNames - Set of detected @keyframes names
- * @returns Detection or null if no background found
- */
-function classifyRule(rule, positionIndex, htmlContent, keyframesNames) {
-    const props = rule.properties;
-    // Get all background-related values
-    const bgValue = props.get("background") ?? "";
-    const bgColor = props.get("background-color") ?? "";
-    const bgImage = props.get("background-image") ?? "";
-    const combinedValue = [bgValue, bgColor, bgImage].filter(Boolean).join(" ");
-    // Check for video background first (doesn't need background CSS properties)
-    const hasBackdropFilter = props.has("backdrop-filter") || props.has("-webkit-backdrop-filter");
-    const isVideo = isVideoBackground(htmlContent, rule.selector, props);
-    if (!combinedValue && !hasBackdropFilter && !isVideo) {
-        return null;
-    }
-    // Extract visual properties
-    const blurRadius = detectGlassmorphismBlur(props);
-    const opacityStr = props.get("opacity");
-    const opacity = opacityStr ? parseFloat(opacityStr) : 1;
-    const blendMode = props.get("mix-blend-mode") ?? props.get("background-blend-mode") ?? "normal";
-    const primaryBgValue = bgValue || bgImage || bgColor;
-    const layerCount = primaryBgValue ? countBackgroundLayers(primaryBgValue) : 1;
-    // Extract colors from all background values
-    const allColors = extractColorsFromValue(combinedValue);
-    const hasAlpha = colorHasAlpha(combinedValue);
-    const colorSpace = detectColorSpace(combinedValue);
-    // Extract gradient matches
-    const gradientMatches = extractGradientMatches(combinedValue);
-    // Detect animation info
-    const animationInfo = detectAnimationInfo(props);
-    // Check if animation involves background (by matching @keyframes)
-    let hasBackgroundAnimation = false;
-    if (animationInfo?.isAnimated && animationInfo.animationName) {
-        hasBackgroundAnimation = keyframesNames.has(animationInfo.animationName);
-    }
-    // Also consider transitions on background as animation
-    if (animationInfo?.isAnimated && !animationInfo.animationName) {
-        hasBackgroundAnimation = true;
-    }
-    // Classify design type
-    let designType = "unknown";
-    let gradientInfo;
-    let hasOverlay = false;
-    let confidence = 0.5;
-    // Priority classification
-    if (isVideo) {
-        designType = "video_background";
-        confidence = 0.9;
-    }
-    else if (isNoiseTexture(combinedValue)) {
-        designType = "noise_texture";
-        confidence = 0.85;
-    }
-    else if (blurRadius > 0 && hasAlpha) {
-        designType = "glassmorphism";
-        confidence = 0.9;
-    }
-    else if (isMeshGradient(primaryBgValue)) {
-        designType = "mesh_gradient";
-        confidence = 0.85;
-        // For mesh gradient, use the first radial gradient info
-        const firstRadial = gradientMatches.find((g) => g.type === "radial");
-        if (firstRadial) {
-            gradientInfo = {
-                type: "radial",
-                stops: parseColorStops(firstRadial.args),
-                repeating: firstRadial.isRepeating,
-            };
-        }
-    }
-    else if (gradientMatches.length > 0 && layerCount >= 2 && !isMeshGradient(primaryBgValue)) {
-        // Multi-layer: gradient + something else (or multiple backgrounds)
-        const hasUrl = combinedValue.toLowerCase().includes("url(");
-        if (hasUrl || (gradientMatches.length >= 1 && layerCount >= 2)) {
-            designType = "multi_layer";
-            confidence = 0.85;
-            hasOverlay = gradientMatches.some((g) => {
-                const lower = g.args.toLowerCase();
-                return lower.includes("rgba(") || lower.includes("transparent");
-            });
-        }
-    }
-    else if (gradientMatches.length > 0) {
-        // Single gradient
-        const gm = gradientMatches[0];
-        // Check if animated
-        if (hasBackgroundAnimation) {
-            designType = "animated_gradient";
-            confidence = 0.9;
-        }
-        else {
-            switch (gm.type) {
-                case "linear":
-                    designType = "linear_gradient";
-                    break;
-                case "radial":
-                    designType = "radial_gradient";
-                    break;
-                case "conic":
-                    designType = "conic_gradient";
-                    break;
-            }
-            confidence = 0.9;
-        }
-        // Parse gradient info
-        const stops = parseColorStops(gm.args);
-        gradientInfo = {
-            type: gm.type,
-            stops,
-            repeating: gm.isRepeating,
-        };
-        if (gm.type === "linear") {
-            const parts = splitGradientArgs(gm.args);
-            if (parts.length > 0) {
-                const angle = parseLinearAngle(parts[0]);
-                if (angle !== undefined) {
-                    gradientInfo.angle = angle;
-                }
-            }
-        }
-    }
-    else if (isPatternBackground(bgValue || bgImage, props)) {
-        designType = "pattern_background";
-        confidence = 0.8;
-    }
-    else if (isSVGBackground(combinedValue)) {
-        designType = "svg_background";
-        confidence = 0.85;
-    }
-    else if (isImageBackground(combinedValue)) {
-        designType = "image_background";
-        confidence = 0.85;
-    }
-    else if (bgColor || bgValue) {
-        // Solid color: no gradients, no images
-        const hasUrl = combinedValue.toLowerCase().includes("url(");
-        const hasGradient = gradientMatches.length > 0;
-        if (!hasUrl && !hasGradient) {
-            designType = "solid_color";
-            confidence = 0.95;
-        }
-    }
-    if (designType === "unknown") {
-        return null;
-    }
-    const colorInfo = {
-        dominantColors: [...new Set(allColors)],
-        colorCount: new Set(allColors).size,
-        hasAlpha,
-        colorSpace,
-    };
-    const visualProperties = {
-        blurRadius,
-        opacity,
-        blendMode,
-        hasOverlay,
-        layers: layerCount,
-    };
-    const gradientStopCount = gradientInfo?.stops.length ?? 0;
-    const perfInfo = assessPerformance(designType, gradientStopCount, blurRadius, layerCount, props);
-    const name = generateName(designType, rule.selector, gradientInfo, colorInfo);
-    const cssImplementation = reconstructCSS(props);
-    const detection = {
-        name,
-        designType,
-        selector: rule.selector,
-        cssValue: primaryBgValue,
-        positionIndex,
-        colorInfo,
-        visualProperties,
-        cssImplementation,
-        performance: perfInfo,
-        confidence,
-    };
-    if (gradientInfo) {
-        detection.gradientInfo = gradientInfo;
-    }
-    if (animationInfo) {
-        detection.animationInfo = animationInfo;
-    }
-    return detection;
-}
-/**
- * Extract @keyframes names that animate background-related properties
- * @param css - Full CSS content
- * @returns Set of keyframe animation names that affect backgrounds
- */
-function extractBackgroundKeyframes(css) {
-    const names = new Set();
-    const cleaned = removeComments(css);
-    // Match @keyframes blocks
-    const keyframeRegex = /@keyframes\s+([\w-]+)\s*\{([\s\S]*?\})\s*\}/g;
-    let match;
-    while ((match = keyframeRegex.exec(cleaned)) !== null) {
-        const name = match[1];
-        const body = match[2] ?? "";
-        // Check if the keyframe affects background properties
-        if (body.includes("background") ||
-            body.includes("gradient") ||
-            body.includes("background-position") ||
-            body.includes("background-color") ||
-            body.includes("background-size")) {
-            if (name) {
-                names.add(name);
-            }
-        }
-    }
-    return names;
-}
-// =============================================================================
-// Service Implementation
-// =============================================================================
-/**
- * Internal implementation of BackgroundDesignDetectorService
- */
-class BackgroundDesignDetectorServiceImpl {
-    /**
-     * Detect background designs from CSS/HTML content
-     * @param input - CSS content and optional HTML/external CSS
-     * @returns Detection results
-     * @throws Error if input exceeds 5MB size limit
-     */
-    detect(input) {
-        const startTime = performance.now();
-        // Validate input size (SEC H-1)
-        const totalSize = (input.cssContent?.length ?? 0) +
-            (input.htmlContent?.length ?? 0) +
-            (input.externalCssContent?.length ?? 0);
-        if (totalSize > MAX_INPUT_SIZE_BYTES) {
-            throw new Error(`Input size ${totalSize} bytes exceeds maximum of ${MAX_INPUT_SIZE_BYTES} bytes (5MB)`);
-        }
-        // Handle empty input
-        if (!input.cssContent && !input.htmlContent && !input.externalCssContent) {
-            return { backgrounds: [], totalDetected: 0, processingTimeMs: performance.now() - startTime };
-        }
-        try {
-            // Combine all CSS sources
-            let combinedCSS = input.cssContent ?? "";
-            // Extract CSS from HTML (<style> tags + inline style attributes)
-            if (input.htmlContent) {
-                const htmlCSS = extractCSSFromHTML(input.htmlContent);
-                combinedCSS += "\n" + htmlCSS;
-                const inlineCSS = extractInlineStylesFromHTML(input.htmlContent);
-                combinedCSS += "\n" + inlineCSS;
-            }
-            // Append external CSS
-            if (input.externalCssContent) {
-                combinedCSS += "\n" + input.externalCssContent;
-            }
-            // Resolve CSS variables (var(--name) → actual values)
-            const cssVarResolver = new webdesign_core_1.CssVariableResolver({ maxDepth: 10 });
-            if (input.htmlContent) {
-                cssVarResolver.extractVariablesFromHtml(input.htmlContent);
-            }
-            cssVarResolver.extractVariablesFromCss(combinedCSS);
-            // Extract @keyframes that affect backgrounds
-            const keyframesNames = extractBackgroundKeyframes(combinedCSS);
-            // Parse CSS rules
-            const rules = parseCSSRules(combinedCSS);
-            // Resolve CSS variables in background-related property values
-            for (const rule of rules) {
-                for (const [prop, value] of rule.properties) {
-                    if (/var\s*\(\s*--/.test(value)) {
-                        const result = cssVarResolver.resolve(value);
-                        if (result.success && result.resolvedValue) {
-                            rule.properties.set(prop, result.resolvedValue);
-                        }
-                    }
-                }
-            }
-            // Classify each rule
-            const rawBackgrounds = [];
-            let positionIndex = 0;
-            for (const rule of rules) {
-                const detection = classifyRule(rule, positionIndex, input.htmlContent, keyframesNames);
-                if (detection) {
-                    rawBackgrounds.push(detection);
-                    positionIndex++;
-                }
-            }
-            // Deduplicate: same designType + cssValue → keep first occurrence
-            const seen = new Set();
-            const backgrounds = [];
-            for (const bg of rawBackgrounds) {
-                const key = `${bg.designType}::${bg.cssValue.replace(/\s+/g, " ").toLowerCase()}`;
-                if (!seen.has(key)) {
-                    seen.add(key);
-                    backgrounds.push(bg);
-                }
-            }
-            const processingTimeMs = performance.now() - startTime;
-            logger.debug("Detection complete", {
-                totalDetected: backgrounds.length,
-                processingTimeMs: processingTimeMs.toFixed(1),
-                types: backgrounds.map((b) => b.designType),
-            });
-            return {
-                backgrounds,
-                totalDetected: backgrounds.length,
-                processingTimeMs,
-            };
-        }
-        catch (error) {
-            // Re-throw size validation errors
-            if (error instanceof Error && error.message.includes("exceeds maximum")) {
-                throw error;
-            }
-            logger.error("Detection failed", error);
-            return {
-                backgrounds: [],
-                totalDetected: 0,
-                processingTimeMs: performance.now() - startTime,
-            };
-        }
-    }
-}
-// =============================================================================
-// Factory Function
-// =============================================================================
-/**
- * Create a new BackgroundDesignDetectorService instance
- * @returns BackgroundDesignDetectorService instance
- */
-function createBackgroundDesignDetectorService() {
-    return new BackgroundDesignDetectorServiceImpl();
-}
-//# sourceMappingURL=background-design-detector.service.js.map