@reftrixmcp/mcp-server 0.1.7 → 0.2.0

package/dist/services/layout-to-code.service.js

@@ -1,1368 +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.LayoutToCodeService = void 0;
-exports.setLayoutToCodePrismaClientFactory = setLayoutToCodePrismaClientFactory;
-exports.resetLayoutToCodePrismaClientFactory = resetLayoutToCodePrismaClientFactory;
-exports.getLayoutToCodeService = getLayoutToCodeService;
-exports.resetLayoutToCodeService = resetLayoutToCodeService;
-exports.createLayoutToCodeServiceFactory = createLayoutToCodeServiceFactory;
-/**
- * LayoutToCodeService
- * layout.to_code ツール用のサービス実装
- *
- * 機能:
- * - セクションパターンをIDで取得
- * - React/Vue/HTMLコードを生成
- * - TypeScript/JavaScript選択
- * - Tailwind CSS/Vanilla CSS選択
- *
- * @module services/layout-to-code.service
- */
-const logger_1 = require("../utils/logger");
-const html_to_jsx_converter_1 = require("./layout/html-to-jsx-converter");
-const component_splitter_1 = require("./layout/component-splitter");
-const semantic_html_converter_1 = require("./layout/semantic-html-converter");
-// =====================================================
-// サービスファクトリ（DI用）
-// =====================================================
-let prismaClientFactory = null;
-/**
- * PrismaClientファクトリを設定
- */
-function setLayoutToCodePrismaClientFactory(factory) {
-    prismaClientFactory = factory;
-}
-/**
- * PrismaClientファクトリをリセット
- */
-function resetLayoutToCodePrismaClientFactory() {
-    prismaClientFactory = null;
-}
-// =====================================================
-// ヘルパー関数
-// =====================================================
-/**
- * DBレコードをSectionPatternに変換
- */
-function recordToSectionPattern(record) {
-    const layoutInfo = typeof record.layoutInfo === "object" && record.layoutInfo !== null
-        ? record.layoutInfo
-        : {};
-    const visualFeatures = typeof record.visualFeatures === "object" && record.visualFeatures !== null
-        ? record.visualFeatures
-        : {};
-    // components を配列として取得（デフォルトは空配列）
-    // 型アサーションでComponentInfo[]に変換（DBからの生データは型が不完全な可能性がある）
-    const rawComponents = Array.isArray(record.components)
-        ? record.components
-        : [];
-    // 有効なcomponents（type必須）のみをフィルタリングしてComponentInfo型に変換
-    const components = rawComponents
-        .filter((c) => typeof c.type === "string")
-        .map((c) => {
-        const result = {
-            type: c.type,
-        };
-        if (typeof c.level === "number") {
-            result.level = c.level;
-        }
-        if (typeof c.text === "string") {
-            result.text = c.text;
-        }
-        if (typeof c.variant === "string") {
-            result.variant = c.variant;
-        }
-        if (typeof c.src === "string") {
-            result.src = c.src;
-        }
-        if (typeof c.alt === "string") {
-            result.alt = c.alt;
-        }
-        return result;
-    });
-    // 開発環境でのデバッグログ
-    if ((0, logger_1.isDevelopment)()) {
-        logger_1.logger.debug("[recordToSectionPattern] Converting record", {
-            id: record.id,
-            sectionType: record.sectionType,
-            hasLayoutInfo: Object.keys(layoutInfo).length > 0,
-            layoutInfoKeys: Object.keys(layoutInfo),
-            componentsCount: components.length,
-            hasHtmlSnippet: !!record.htmlSnippet,
-        });
-    }
-    // layoutInfo オブジェクトを構築（undefinedプロパティを除外）
-    const layoutInfoResult = {};
-    if (typeof layoutInfo.type === "string") {
-        layoutInfoResult.type = layoutInfo.type;
-    }
-    if (typeof layoutInfo.heading === "string") {
-        layoutInfoResult.heading = layoutInfo.heading;
-    }
-    if (typeof layoutInfo.description === "string") {
-        layoutInfoResult.description = layoutInfo.description;
-    }
-    if (layoutInfo.grid !== undefined) {
-        layoutInfoResult.grid = layoutInfo.grid;
-    }
-    if (typeof layoutInfo.alignment === "string") {
-        layoutInfoResult.alignment = layoutInfo.alignment;
-    }
-    // visualFeatures オブジェクトを構築（undefinedプロパティを除外）
-    const visualFeaturesResult = {};
-    if (visualFeatures.colors !== undefined) {
-        visualFeaturesResult.colors = visualFeatures.colors;
-    }
-    // webPage オブジェクトを構築（undefinedプロパティを除外）
-    const webPageResult = {
-        id: record.webPage.id,
-        url: record.webPage.url,
-        sourceType: record.webPage.sourceType,
-        usageScope: record.webPage.usageScope,
-    };
-    if (record.webPage.title) {
-        webPageResult.title = record.webPage.title;
-    }
-    // 結果オブジェクトを構築（undefinedプロパティを除外）
-    const result = {
-        id: record.id,
-        webPageId: record.webPageId,
-        sectionType: record.sectionType,
-        positionIndex: record.positionIndex,
-        webPage: webPageResult,
-    };
-    // オプショナルプロパティは値がある場合のみ設定
-    if (record.sectionName) {
-        result.sectionName = record.sectionName;
-    }
-    if (Object.keys(layoutInfoResult).length > 0) {
-        result.layoutInfo = layoutInfoResult;
-    }
-    if (Object.keys(visualFeaturesResult).length > 0) {
-        result.visualFeatures = visualFeaturesResult;
-    }
-    // components を設定（空でも設定する - コード生成で使用するため）
-    result.components = components;
-    if (record.htmlSnippet) {
-        result.htmlSnippet = record.htmlSnippet;
-    }
-    // cssSnippetを設定（コード生成でスタイル適用に使用）
-    if (record.cssSnippet) {
-        result.cssSnippet = record.cssSnippet;
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[recordToSectionPattern] CSS snippet found", {
-                id: record.id,
-                cssSnippetLength: record.cssSnippet.length,
-            });
-        }
-    }
-    // externalCssContentを設定（外部CSSファイルの実コンテンツ、CSS Modules等で必要）
-    if (record.externalCssContent) {
-        result.externalCssContent = record.externalCssContent;
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[recordToSectionPattern] External CSS content found", {
-                id: record.id,
-                externalCssContentLength: record.externalCssContent.length,
-            });
-        }
-    }
-    // cssFrameworkを設定（コード生成でフレームワーク別処理に使用）
-    if (record.cssFramework) {
-        result.cssFramework = record.cssFramework;
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[recordToSectionPattern] CSS framework detected", {
-                id: record.id,
-                cssFramework: record.cssFramework,
-            });
-        }
-    }
-    // cssFrameworkMetaを設定（exactOptionalPropertyTypes対応: undefinedを代入せずプロパティを省略）
-    if (record.cssFrameworkMeta && typeof record.cssFrameworkMeta === "object") {
-        const meta = record.cssFrameworkMeta;
-        const cssFrameworkMeta = {};
-        if (typeof meta.confidence === "number") {
-            cssFrameworkMeta.confidence = meta.confidence;
-        }
-        if (Array.isArray(meta.evidence)) {
-            cssFrameworkMeta.evidence = meta.evidence.filter((e) => typeof e === "string");
-        }
-        // 空オブジェクトでない場合のみ設定
-        if (Object.keys(cssFrameworkMeta).length > 0) {
-            result.cssFrameworkMeta = cssFrameworkMeta;
-        }
-    }
-    if (record.textRepresentation) {
-        result.textRepresentation = record.textRepresentation;
-    }
-    return result;
-}
-/**
- * セクションタイプからコンポーネント名を生成
- */
-function generateComponentName(sectionType, customName) {
-    if (customName) {
-        return customName;
-    }
-    // セクションタイプをPascalCaseに変換
-    const pascalCase = sectionType
-        .split(/[-_]/)
-        .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
-        .join("");
-    return `${pascalCase}Section`;
-}
-/**
- * フレームワークに応じたファイル名を生成
- */
-function generateFilename(componentName, framework, typescript) {
-    const extension = framework === "html" ? "html" : typescript ? "tsx" : "jsx";
-    // Vue の場合は .vue 拡張子
-    if (framework === "vue") {
-        return `${componentName}.vue`;
-    }
-    return `${componentName}.${extension}`;
-}
-/**
- * フレームワークに応じた依存関係を取得
- */
-function getDependencies(framework, tailwind) {
-    const deps = [];
-    if (framework === "react") {
-        deps.push("react");
-    }
-    else if (framework === "vue") {
-        deps.push("vue");
-    }
-    if (tailwind) {
-        deps.push("tailwindcss");
-    }
-    return deps;
-}
-// =====================================================
-// コード生成関数
-// =====================================================
-/**
- * Reactコンポーネントを生成
- *
- * HTML→JSX変換を使用してセキュアなコンポーネントを生成します。
- * dangerouslySetInnerHTMLは使用しません。
- */
-function generateReactCode(pattern, options) {
-    const componentName = generateComponentName(pattern.sectionType, options.componentName);
-    const { typescript, tailwind } = options;
-    // プロップスの型定義（TypeScript用）
-    const propsType = typescript
-        ? `
-interface ${componentName}Props {
-  className?: string;
-}
-`
-        : "";
-    // プロップスの引数
-    const propsArg = typescript ? `{ className }: ${componentName}Props` : "{ className }";
-    // スタイルクラス
-    const containerClass = tailwind ? "w-full max-w-7xl mx-auto px-4 py-8" : "";
-    // 見出しテキスト
-    const heading = pattern.layoutInfo?.heading || `${pattern.sectionType} Section`;
-    const description = pattern.layoutInfo?.description || "Section content goes here.";
-    // コンテンツの生成
-    let content;
-    if (pattern.htmlSnippet) {
-        // REFTRIX-CODEGEN-02: セマンティックHTML変換
-        // sectionTypeに基づいてセマンティック要素に変換し、aria-labelを追加
-        const sectionName = pattern.sectionName || pattern.layoutInfo?.heading;
-        const semanticHtml = (0, semantic_html_converter_1.convertToSemanticHtml)(pattern.htmlSnippet, {
-            sectionType: pattern.sectionType,
-            ...(sectionName ? { sectionName } : {}),
-            addAriaLabel: true,
-        });
-        // REFTRIX-CODEGEN-01: HTML→JSX変換（Tailwindクラス変換オプション付き）
-        // REFTRIX-CODEGEN-03: 独自クラス名の除去（dwg-*, webflow-*, framer-*, wix-*, etc.）
-        const jsxContent = (0, html_to_jsx_converter_1.convertHtmlToJsx)(semanticHtml, {
-            removeEmptyAttributes: true,
-            useTailwind: tailwind, // Tailwind変換を有効化
-            removeProprietaryClasses: true, // 独自クラス名を除去
-        });
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[generateReactCode] HTML to JSX conversion completed", {
-                originalLength: pattern.htmlSnippet.length,
-                semanticLength: semanticHtml.length,
-                jsxLength: jsxContent.length,
-                useTailwind: tailwind,
-            });
-        }
-        content = `{/* Converted from original HTML structure */}
-      ${jsxContent}`;
-    }
-    else {
-        content = `<h2 ${tailwind ? 'className="text-3xl font-bold mb-4"' : ""}>${heading}</h2>
-      <p ${tailwind ? 'className="text-gray-600"' : ""}>${description}</p>`;
-    }
-    return `${typescript ? "" : "// @ts-nocheck"}
-import React from 'react';
-${propsType}
-export const ${componentName}${typescript ? `: React.FC<${componentName}Props>` : ""} = (${propsArg}) => {
-  return (
-    <section className={\`${containerClass} \${className || ''}\`}>
-      ${content}
-    </section>
-  );
-};
-
-export default ${componentName};
-`.trim();
-}
-/**
- * Vueコンポーネントを生成
- *
- * HTML→テンプレート変換を使用してセキュアなコンポーネントを生成します。
- * v-htmlは使用しません。
- */
-function generateVueCode(pattern, options) {
-    const componentName = generateComponentName(pattern.sectionType, options.componentName);
-    const { typescript, tailwind } = options;
-    // スタイルクラス
-    const containerClass = tailwind ? "w-full max-w-7xl mx-auto px-4 py-8" : "";
-    // 見出しテキスト
-    const heading = pattern.layoutInfo?.heading || `${pattern.sectionType} Section`;
-    const description = pattern.layoutInfo?.description || "Section content goes here.";
-    // スクリプトセクション
-    const scriptSection = typescript
-        ? `<script setup lang="ts">
-defineProps<{
-  class?: string;
-}>();
-</script>`
-        : `<script setup>
-defineProps({
-  class: String,
-});
-</script>`;
-    // コンテンツの生成
-    let content;
-    if (pattern.htmlSnippet) {
-        // REFTRIX-CODEGEN-02: セマンティックHTML変換
-        const vueSectionName = pattern.sectionName || pattern.layoutInfo?.heading;
-        const semanticHtml = (0, semantic_html_converter_1.convertToSemanticHtml)(pattern.htmlSnippet, {
-            sectionType: pattern.sectionType,
-            ...(vueSectionName ? { sectionName: vueSectionName } : {}),
-            addAriaLabel: true,
-        });
-        // HTML→JSX変換を使用（VueテンプレートもJSX変換結果を活用可能）
-        // REFTRIX-CODEGEN-01: Tailwind変換オプション付き
-        // REFTRIX-CODEGEN-03: 独自クラス名の除去
-        // ただしVueではclassName→class、htmlFor→forに戻す必要がある
-        const jsxContent = (0, html_to_jsx_converter_1.convertHtmlToJsx)(semanticHtml, {
-            removeEmptyAttributes: true,
-            useTailwind: tailwind, // Tailwind変換を有効化
-            removeProprietaryClasses: true, // 独自クラス名を除去
-        });
-        // JSXからVueテンプレートへの変換（className→class）
-        const vueContent = jsxContent.replace(/className=/g, "class=").replace(/htmlFor=/g, "for=");
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[generateVueCode] HTML to Vue template conversion completed", {
-                originalLength: pattern.htmlSnippet.length,
-                semanticLength: semanticHtml.length,
-                vueLength: vueContent.length,
-                useTailwind: tailwind,
-            });
-        }
-        content = `<!-- Converted from original HTML structure -->
-    ${vueContent}`;
-    }
-    else {
-        content = `<h2 ${tailwind ? 'class="text-3xl font-bold mb-4"' : ""}>${heading}</h2>
-    <p ${tailwind ? 'class="text-gray-600"' : ""}>${description}</p>`;
-    }
-    return `${scriptSection}
-
-<template>
-  <section :class="['${containerClass}', $props.class]">
-    ${content}
-  </section>
-</template>
-
-<style scoped>
-/* ${componentName} styles */
-</style>
-`.trim();
-}
-/**
- * CSSスニペットをサニタイズ
- *
- * 古いフォーマットで保存されたcssSnippetには、セレクタなしのインラインスタイル宣言が
- * 含まれている場合があり、これは無効なCSSとしてブラウザに無視される。
- * この関数は以下のパターンを除去・正規化する:
- * - "Inline Styles (X elements)" コメントの後に続くセレクタなしの宣言ブロック
- * - セレクタなしの単発CSS宣言（例: word-wrap: break-word;）
- * - 無効な@importの後の孤立した宣言
- *
- * @param css - 元のCSSスニペット
- * @returns サニタイズされたCSSスニペット
- */
-function sanitizeCssSnippet(css) {
-    if (!css)
-        return "";
-    let sanitized = css;
-    // パターン1: /* Inline Styles (X elements) */ に続くセレクタなしの宣言を除去
-    // 例: /* Inline Styles (60 elements) */\nword-wrap: break-word;\nfont-size: 14px;...
-    // このパターンは次のコメントブロックまで、または文字列末尾まで続く
-    const inlineStylesPattern = /\/\*\s*Inline Styles\s*\(\d+\s*elements?\)\s*\*\/[\s\S]*?(?=\/\*|$)/gi;
-    sanitized = sanitized.replace(inlineStylesPattern, (match) => {
-        // 新形式（Reference付き）はコメント内なので保持
-        if (match.includes("Inline Styles Reference")) {
-            return match;
-        }
-        // 古形式は除去（ログ出力）
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[sanitizeCssSnippet] Removing invalid inline styles block", {
-                removedLength: match.length,
-            });
-        }
-        return "";
-    });
-    // パターン2: セレクタなしの単発CSS宣言を除去
-    // 有効なCSS: selector { property: value; }
-    // 無効なCSS: property: value; （セレクタなし）
-    // 行頭から始まる「property: value;」形式を検出して除去
-    // ただし、{} 内の宣言は除外する
-    const lines = sanitized.split("\n");
-    const validLines = [];
-    let insideBlock = 0; // {} のネスト深度をトラック
-    for (const line of lines) {
-        const trimmedLine = line.trim();
-        // 空行やコメント行は保持
-        if (trimmedLine === "" ||
-            trimmedLine.startsWith("/*") ||
-            trimmedLine.startsWith("*") ||
-            trimmedLine.endsWith("*/")) {
-            validLines.push(line);
-            continue;
-        }
-        // @import, @media, @keyframes などの@ルールは保持
-        if (trimmedLine.startsWith("@")) {
-            validLines.push(line);
-            // @media や @keyframes は { を開く
-            if (trimmedLine.includes("{")) {
-                insideBlock++;
-            }
-            continue;
-        }
-        // ブロック開始/終了のトラッキング
-        const openBraces = (trimmedLine.match(/{/g) || []).length;
-        const closeBraces = (trimmedLine.match(/}/g) || []).length;
-        // ブロック内（{} の中）にいる場合はすべて保持
-        if (insideBlock > 0) {
-            validLines.push(line);
-            insideBlock += openBraces - closeBraces;
-            continue;
-        }
-        // セレクタ行（{ を含む）は保持
-        if (trimmedLine.includes("{")) {
-            validLines.push(line);
-            insideBlock += openBraces - closeBraces;
-            continue;
-        }
-        // ブロック終了行は保持
-        if (trimmedLine === "}") {
-            validLines.push(line);
-            continue;
-        }
-        // ブロック外でセレクタなしの宣言（property: value; 形式）を検出
-        // これらは無効なCSSなので除去
-        // パターン1: 単一宣言 (e.g., "word-wrap: break-word;")
-        // パターン2: 複数宣言 (e.g., "z-index: 1000; position: absolute; width: 100%;")
-        // パターン3: CSS変数宣言 (e.g., "--Spacer-size:114px")
-        // 有効なCSSセレクタは { を含むか、:hover などの擬似クラスを持つ
-        // ブロック外で { } を含まない行で、: を含む場合は宣言のみの行
-        const hasColon = trimmedLine.includes(":");
-        const hasBlockMarker = /[{}]/.test(trimmedLine);
-        // 擬似クラス/擬似要素を持つセレクタかどうかをチェック
-        // 例: a:hover, input:focus, ::before
-        // これらは : の後にアルファベットが続く (プロパティ値は通常スペースや数字)
-        const isPseudoSelector = /:[a-z-]+(?:\(|{|\s|$)/i.test(trimmedLine);
-        // セレクタなしの宣言行の判定:
-        // - : を含む (プロパティ: 値 の形式)
-        // - { } を含まない (ブロック開始/終了なし)
-        // - 擬似セレクタではない
-        // - @ ルールでもない (既に上でチェック済み)
-        const isDeclarationsOnly = hasColon && !hasBlockMarker && !isPseudoSelector;
-        if (isDeclarationsOnly) {
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.debug("[sanitizeCssSnippet] Removing selector-less declaration", {
-                    line: trimmedLine,
-                });
-            }
-            continue; // この行を除去
-        }
-        // その他の行は保持（セレクタ行など）
-        validLines.push(line);
-    }
-    sanitized = validLines.join("\n");
-    // 連続する空行を1行に圧縮
-    sanitized = sanitized.replace(/\n{3,}/g, "\n\n");
-    return sanitized.trim();
-}
-/**
- * CSS内のURLを絶対URL化する
- *
- * 対象:
- * - url(./path) → url(https://base/path)
- * - url(../path) → url(https://base/../path) → 正規化
- * - url(//example.com/path) → url(https://example.com/path)
- * - url(/path) → url(https://base/path)
- *
- * CSPで外部CSSがブロックされる前提のため、@importは除去
- *
- * @param css - 元のCSS
- * @param baseUrl - ベースURL（相対URL解決用）
- * @returns URL正規化されたCSS
- */
-function normalizeCssUrls(css, baseUrl) {
-    if (!css)
-        return "";
-    let result = css;
-    // @import文を除去（CSPでブロックされるため）
-    // @import url("..."); または @import "..."; の形式
-    result = result.replace(/@import\s+(?:url\s*\(\s*)?["']?[^"');\s]+["']?\s*\)?[^;]*;/gi, (match) => {
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[normalizeCssUrls] Removing @import (blocked by CSP)", {
-                import: match.trim(),
-            });
-        }
-        return "/* @import removed (CSP) */";
-    });
-    // ベースURLがない場合は相対URLをそのまま返す（変換不可）
-    if (!baseUrl) {
-        return result;
-    }
-    // ベースURLをパース
-    let parsedBaseUrl;
-    try {
-        parsedBaseUrl = new URL(baseUrl);
-    }
-    catch {
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.warn("[normalizeCssUrls] Invalid base URL", { baseUrl });
-        }
-        return result;
-    }
-    // url() 内のURLを正規化
-    // パターン: url("..."), url('...'), url(...)
-    result = result.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (match, _quote, url) => {
-        const trimmedUrl = url.trim();
-        // data: URL, blob: URL はそのまま
-        if (trimmedUrl.startsWith("data:") || trimmedUrl.startsWith("blob:")) {
-            return match;
-        }
-        // 空のURL, # のみ はそのまま
-        if (trimmedUrl === "" || trimmedUrl === "#") {
-            return match;
-        }
-        // 既に絶対URLの場合はそのまま
-        if (trimmedUrl.startsWith("http://") || trimmedUrl.startsWith("https://")) {
-            return match;
-        }
-        try {
-            let absoluteUrl;
-            // プロトコル相対URL（//example.com/path）
-            if (trimmedUrl.startsWith("//")) {
-                absoluteUrl = `${parsedBaseUrl.protocol}${trimmedUrl}`;
-            }
-            // ルート相対URL（/path）
-            else if (trimmedUrl.startsWith("/")) {
-                absoluteUrl = `${parsedBaseUrl.origin}${trimmedUrl}`;
-            }
-            // 相対URL（./path, ../path, path）
-            else {
-                absoluteUrl = new URL(trimmedUrl, baseUrl).href;
-            }
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.debug("[normalizeCssUrls] URL normalized", {
-                    original: trimmedUrl,
-                    normalized: absoluteUrl,
-                });
-            }
-            return `url("${absoluteUrl}")`;
-        }
-        catch {
-            // URL解決に失敗した場合はそのまま
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.warn("[normalizeCssUrls] Failed to resolve URL", {
-                    url: trimmedUrl,
-                    baseUrl,
-                });
-            }
-            return match;
-        }
-    });
-    return result;
-}
-/**
- * HTMLコードを生成
- * layoutInfoとcomponentsから適切なTailwind HTMLを生成
- * htmlSnippetがある場合はそれを優先使用
- *
- * CSS適用優先順位:
- * 1. pattern.cssSnippet（DBに保存されたCSS） - 最優先
- * 2. Tailwind CDN（tailwind=trueかつcssSnippetがない場合）
- * 3. 基本スタイルのみ（上記どちらもない場合）
- */
-function generateHtmlCode(pattern, options) {
-    const { tailwind } = options;
-    // cssSnippetをサニタイズ（古いフォーマットの無効なインラインスタイルブロックを除去）
-    const sanitizedCssSnippet = pattern.cssSnippet ? sanitizeCssSnippet(pattern.cssSnippet) : "";
-    // cssSnippetの有無を確認（サニタイズ後）
-    const hasCssSnippet = sanitizedCssSnippet.length > 0;
-    const externalCssContent = pattern.externalCssContent?.trim() ?? "";
-    const hasExternalCssContent = externalCssContent.length > 0;
-    // cssFrameworkの取得（null/undefined → 'unknown'として扱う）
-    const cssFramework = pattern.cssFramework || "unknown";
-    // ベースURL（CSS内URL正規化用）
-    const baseUrl = pattern.webPage?.url;
-    const externalCssComment = `External CSS${cssFramework ? ` (${cssFramework})` : ""}`;
-    const snippetCssComment = `CSS from database${cssFramework ? ` (${cssFramework})` : ""}`;
-    // CSS内のURLを絶対URL化し、@importを除去
-    const normalizedExternalCss = hasExternalCssContent
-        ? normalizeCssUrls(externalCssContent, baseUrl)
-        : "";
-    const normalizedCssSnippet = hasCssSnippet ? normalizeCssUrls(sanitizedCssSnippet, baseUrl) : "";
-    const combinedCssBlocks = [
-        normalizedExternalCss ? `/* ${externalCssComment} */\n    ${normalizedExternalCss}` : "",
-        normalizedCssSnippet ? `/* ${snippetCssComment} */\n    ${normalizedCssSnippet}` : "",
-    ]
-        .filter(Boolean)
-        .join("\n\n    ");
-    // 開発環境でのデバッグログ
-    if ((0, logger_1.isDevelopment)()) {
-        logger_1.logger.debug("[generateHtmlCode] Processing", {
-            patternId: pattern.id,
-            sectionType: pattern.sectionType,
-            hasHtmlSnippet: !!pattern.htmlSnippet,
-            htmlSnippetLength: pattern.htmlSnippet?.length || 0,
-            hasCssSnippet,
-            originalCssSnippetLength: pattern.cssSnippet?.length || 0,
-            sanitizedCssSnippetLength: sanitizedCssSnippet.length,
-            cssFramework,
-            framework: options.framework,
-            tailwindRequested: tailwind,
-        });
-    }
-    // スタイル要素の生成
-    // 優先順位:
-    // 1) cssFrameworkがtailwind → Tailwind CDN + cssSnippet（あれば）
-    // 2) cssFrameworkがbootstrap → Bootstrap CDN + cssSnippet（あれば）
-    // 3) cssFrameworkがcss_modules/styled_components/vanilla → cssSnippetをインライン
-    // 4) cssFrameworkがunknownでcssSnippetあり → cssSnippetをインライン
-    // 5) cssFrameworkがunknownでcssSnippetなし → オプションに従いTailwind CDNまたは基本スタイル
-    const generateStyleSection = () => {
-        const baseStyles = `
-    body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; margin: 0; padding: 0; }
-    img { max-width: 100%; height: auto; }`;
-        // cssFrameworkに基づく分岐
-        switch (cssFramework) {
-            case "tailwind":
-                // Tailwind CDNを使用（cssSnippetがあれば追加）
-                if ((0, logger_1.isDevelopment)()) {
-                    logger_1.logger.info("[generateHtmlCode] Using Tailwind CDN (cssFramework: tailwind)", {
-                        patternId: pattern.id,
-                        hasCssSnippet,
-                        hasExternalCssContent,
-                    });
-                }
-                return `<script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    ${baseStyles}
-    ${combinedCssBlocks ? `${combinedCssBlocks}` : ""}
-  </style>`;
-            case "bootstrap":
-                // Bootstrap CDNを使用（cssSnippetがあれば追加）
-                if ((0, logger_1.isDevelopment)()) {
-                    logger_1.logger.info("[generateHtmlCode] Using Bootstrap CDN (cssFramework: bootstrap)", {
-                        patternId: pattern.id,
-                        hasCssSnippet,
-                        hasExternalCssContent,
-                    });
-                }
-                return `<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-  <style>
-    ${baseStyles}
-    ${combinedCssBlocks ? `${combinedCssBlocks}` : ""}
-  </style>`;
-            case "css_modules":
-            case "styled_components":
-            case "vanilla": {
-                // cssSnippet + externalCssContentをインラインで使用（CDNなし）
-                if ((0, logger_1.isDevelopment)()) {
-                    logger_1.logger.info(`[generateHtmlCode] Using inline CSS (cssFramework: ${cssFramework})`, {
-                        patternId: pattern.id,
-                        hasCssSnippet,
-                        hasExternalCssContent,
-                        externalCssLength: hasExternalCssContent ? externalCssContent.length : 0,
-                    });
-                }
-                return `<style>
-    ${baseStyles}
-    ${combinedCssBlocks ? `${combinedCssBlocks}` : ""}
-  </style>`;
-            }
-            case "unknown":
-            default: {
-                // cssFrameworkがunknownの場合はレガシーロジック
-                if (hasExternalCssContent || hasCssSnippet) {
-                    // DBに保存されたCSSがある場合はそれを使用（Tailwindは追加しない）
-                    if ((0, logger_1.isDevelopment)()) {
-                        logger_1.logger.info("[generateHtmlCode] Using DB CSS (cssFramework: unknown)", {
-                            patternId: pattern.id,
-                            hasExternalCss: hasExternalCssContent,
-                            hasCssSnippet,
-                        });
-                    }
-                    return `<style>
-    ${baseStyles}
-    ${combinedCssBlocks ? `${combinedCssBlocks}` : ""}
-  </style>`;
-                }
-                else if (tailwind) {
-                    // cssSnippetがない場合のみTailwind CDNを使用（フォールバック）
-                    if ((0, logger_1.isDevelopment)()) {
-                        logger_1.logger.debug("[generateHtmlCode] No cssSnippet found, using Tailwind CDN as fallback", {
-                            patternId: pattern.id,
-                        });
-                    }
-                    return `<script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    ${baseStyles}
-  </style>`;
-                }
-                else {
-                    // Tailwindも不要の場合は基本スタイルのみ
-                    return `<style>
-    ${baseStyles}
-  </style>`;
-                }
-            }
-        }
-    };
-    // htmlSnippetがある場合はそれを使用
-    if (pattern.htmlSnippet && pattern.htmlSnippet.trim().length > 0) {
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.debug("[generateHtmlCode] Using htmlSnippet", {
-                patternId: pattern.id,
-                snippetLength: pattern.htmlSnippet.length,
-                hasCssSnippet,
-            });
-        }
-        const heading = pattern.layoutInfo?.heading || `${pattern.sectionType} Section`;
-        // REFTRIX-CODEGEN-02: セマンティックHTML変換
-        // sectionTypeに基づいてセマンティック要素に変換し、aria-labelを追加
-        const htmlSectionName = pattern.sectionName || heading;
-        const semanticHtml = (0, semantic_html_converter_1.convertToSemanticHtml)(pattern.htmlSnippet, {
-            sectionType: pattern.sectionType,
-            ...(htmlSectionName ? { sectionName: htmlSectionName } : {}),
-            addAriaLabel: true,
-        });
-        // 外部画像URLをプレースホルダーに置き換え（CSP対応）
-        const sanitizedHtmlSnippet = replaceExternalImageUrls(semanticHtml);
-        return `<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${heading}</title>
-  ${generateStyleSection()}
-</head>
-<body>
-  ${sanitizedHtmlSnippet}
-</body>
-</html>`.trim();
-    }
-    // layoutInfoとcomponentsを取得
-    const layoutInfo = pattern.layoutInfo;
-    // SectionPatternにcomponentsが定義されているので直接アクセス
-    const components = (pattern.components || []);
-    // 見出しテキスト
-    const heading = layoutInfo?.heading || `${pattern.sectionType} Section`;
-    const description = layoutInfo?.description || "";
-    // 開発環境でのデバッグログ
-    if ((0, logger_1.isDevelopment)()) {
-        logger_1.logger.debug("[generateHtmlCode] Generating from layoutInfo/components", {
-            patternId: pattern.id,
-            sectionType: pattern.sectionType,
-            hasLayoutInfo: !!layoutInfo && Object.keys(layoutInfo).length > 0,
-            layoutInfoKeys: layoutInfo ? Object.keys(layoutInfo) : [],
-            componentsCount: components.length,
-            heading,
-            hasDescription: !!description,
-        });
-    }
-    // セクションタイプに応じたコンテナクラス
-    const getContainerClass = () => {
-        if (!tailwind)
-            return "";
-        const baseClass = "w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8";
-        const paddingClass = "py-12 sm:py-16 lg:py-20";
-        switch (pattern.sectionType) {
-            case "hero":
-                return `${baseClass} ${paddingClass} min-h-screen flex items-center`;
-            case "feature":
-            case "cta":
-                return `${baseClass} ${paddingClass}`;
-            case "footer":
-                return `${baseClass} py-8 sm:py-12`;
-            default:
-                return `${baseClass} ${paddingClass}`;
-        }
-    };
-    // グリッドレイアウトクラス
-    const getGridClass = () => {
-        if (!tailwind)
-            return "";
-        const grid = layoutInfo?.grid;
-        if (!grid)
-            return "";
-        const columns = (typeof grid.columns === "number" ? grid.columns : 1);
-        const gap = (typeof grid.gap === "string" ? grid.gap : "24px");
-        // gapをTailwindクラスに変換（簡易版）
-        const gapClass = gap.includes("32")
-            ? "gap-8"
-            : gap.includes("24")
-                ? "gap-6"
-                : gap.includes("16")
-                    ? "gap-4"
-                    : "gap-6";
-        const columnClass = columns === 1
-            ? ""
-            : columns === 2
-                ? "md:grid-cols-2"
-                : columns === 3
-                    ? "md:grid-cols-3"
-                    : columns === 4
-                        ? "md:grid-cols-4"
-                        : "md:grid-cols-2";
-        return columns > 1 ? `grid ${columnClass} ${gapClass}` : "";
-    };
-    // コンポーネントからHTMLを生成
-    const generateComponentHtml = (comp) => {
-        if (!tailwind) {
-            // Tailwindなしの場合はシンプルなHTML
-            if (comp.type === "heading") {
-                return `<h${comp.level || 2}>${comp.text || ""}</h${comp.level || 2}>`;
-            }
-            if (comp.type === "text" || comp.type === "paragraph") {
-                return `<p>${comp.text || ""}</p>`;
-            }
-            if (comp.type === "button") {
-                return `<button>${comp.text || "Button"}</button>`;
-            }
-            return "";
-        }
-        // Tailwindありの場合
-        switch (comp.type) {
-            case "heading": {
-                const level = comp.level || 2;
-                const headingClasses = level === 1
-                    ? "text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight"
-                    : level === 2
-                        ? "text-3xl sm:text-4xl lg:text-5xl font-bold"
-                        : level === 3
-                            ? "text-2xl sm:text-3xl font-semibold"
-                            : "text-xl sm:text-2xl font-semibold";
-                return `<h${level} class="${headingClasses} text-gray-900 mb-4">${comp.text || ""}</h${level}>`;
-            }
-            case "text":
-            case "paragraph":
-                return `<p class="text-base sm:text-lg text-gray-600 leading-relaxed mb-4">${comp.text || ""}</p>`;
-            case "button": {
-                const variant = comp.variant || "primary";
-                const buttonClasses = variant === "primary"
-                    ? "bg-blue-600 hover:bg-blue-700 text-white"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-900";
-                return `<button class="${buttonClasses} px-6 py-3 rounded-lg font-medium transition-colors duration-200">${comp.text || "Button"}</button>`;
-            }
-            case "image":
-                return `<img src="${comp.src || "/placeholder.jpg"}" alt="${comp.alt || ""}" class="w-full h-auto rounded-lg shadow-lg" />`;
-            default:
-                return "";
-        }
-    };
-    // コンテンツの生成
-    const content = components.length > 0
-        ? components.map(generateComponentHtml).join("\n    ")
-        : tailwind
-            ? `<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">${heading}</h2>
-    ${description ? `<p class="text-lg text-gray-600 leading-relaxed">${description}</p>` : ""}`
-            : `<h2>${heading}</h2>
-    ${description ? `<p>${description}</p>` : ""}`;
-    const containerClass = getContainerClass();
-    const gridClass = getGridClass();
-    const contentWrapper = gridClass
-        ? `<div class="${gridClass}">\n    ${content}\n  </div>`
-        : content;
-    const rawHtml = `<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${heading}</title>
-  ${generateStyleSection()}
-</head>
-<body>
-  <section class="${containerClass}">
-    ${contentWrapper}
-  </section>
-</body>
-</html>
-`.trim();
-    // 外部画像URLをプレースホルダーに置き換え（CSP対応）
-    return replaceExternalImageUrls(rawHtml);
-}
-// =====================================================
-// 画像URL置換（CSP対応）
-// =====================================================
-/**
- * SVGプレースホルダー画像のdata URI
- * CSP設定 `img-src 'self' data: blob:` に準拠
- */
-function createPlaceholderSvg(width = 400, height = 300) {
-    // SVGをURIエンコード（data URIとして使用可能な形式）
-    const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}'>` +
-        `<rect width='${width}' height='${height}' fill='%23e5e7eb'/>` +
-        `<text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' ` +
-        `font-family='system-ui, -apple-system, sans-serif' font-size='14' fill='%236b7280'>` +
-        `Image Placeholder</text></svg>`;
-    return `data:image/svg+xml,${svg}`;
-}
-/**
- * URLを置き換えるべきかどうかを判定
- * data: URL と blob: URL 以外はすべて置き換え対象（相対パス、外部URLを含む）
- *
- * @param url - 判定対象のURL
- * @returns 置き換えるべき場合はtrue
- */
-function isExternalUrl(url) {
-    const trimmedUrl = url.trim().toLowerCase();
-    // data: URLとblob: URLは除外（既にCSP準拠のため置き換え不要）
-    if (trimmedUrl.startsWith("data:") || trimmedUrl.startsWith("blob:")) {
-        return false;
-    }
-    // 空のURLやハッシュのみも除外
-    if (trimmedUrl === "" || trimmedUrl === "#") {
-        return false;
-    }
-    // それ以外はすべて置き換え対象（外部URL、相対パス、ルート相対パスを含む）
-    // 理由: iframeにはベースURLが設定されていないため、相対パスは404エラーになる
-    return true;
-}
-/**
- * HTML内の画像URLをSVGプレースホルダーに置き換える
- * CSP設定 `img-src 'self' data: blob:` に準拠するため
- *
- * 置き換え対象:
- * - 外部URL（http://, https://）
- * - 相対パス（例: type-linear.svg, ./image.png, ../assets/icon.png）
- * - ルート相対パス（例: /images/logo.png）
- *
- * 置き換え対象外:
- * - data: URL（既にCSP準拠）
- * - blob: URL（既にCSP準拠）
- * - 空のURL、ハッシュのみ（#）
- *
- * 理由: iframeにはベースURLが設定されていないため、相対パスは404エラーになる
- *
- * 対応パターン:
- * 1. <img src="..."> タグ（属性順序に依存しない）
- * 2. CSS background-image: url(...)
- * 3. srcset属性内のURL
- * 4. <source src="..."> タグ（picture要素内）
- *
- * @param html - 変換対象のHTML文字列
- * @returns 画像URLが置き換えられたHTML文字列
- */
-function replaceExternalImageUrls(html) {
-    let result = html;
-    let replacedCount = 0;
-    const replacedUrls = [];
-    const placeholder = createPlaceholderSvg();
-    // 開発環境でのデバッグログ（関数呼び出し確認）
-    if ((0, logger_1.isDevelopment)()) {
-        logger_1.logger.debug("[replaceExternalImageUrls] 関数が呼び出されました", {
-            入力HTML長: html.length,
-            入力HTML先頭500文字: html.substring(0, 500),
-        });
-    }
-    // パターン1: <img> タグのsrc属性を置き換え
-    // 属性の順序に依存しない方法: まずimgタグ全体をマッチし、その中のsrc属性を置き換え
-    result = result.replace(/<img\s+([^>]*)>/gi, (imgTag, attrs) => {
-        // src属性を探す（ダブルクォート、シングルクォート、クォートなしに対応）
-        const srcPatterns = [
-            /src\s*=\s*"([^"]*)"/i, // src="..."
-            /src\s*=\s*'([^']*)'/i, // src='...'
-            /src\s*=\s*([^\s>'"]+)/i, // src=... (クォートなし)
-        ];
-        for (const pattern of srcPatterns) {
-            const srcMatch = attrs.match(pattern);
-            if (srcMatch && srcMatch[1]) {
-                const srcUrl = srcMatch[1];
-                if (isExternalUrl(srcUrl)) {
-                    replacedCount++;
-                    replacedUrls.push(srcUrl);
-                    // src属性を置き換え
-                    const newAttrs = attrs.replace(pattern, `src="${placeholder}"`);
-                    return `<img ${newAttrs}>`;
-                }
-                break; // src属性は見つかったので終了
-            }
-        }
-        return imgTag;
-    });
-    // パターン2: CSS内のbackground-image: url(...)を置き換え
-    // style属性内とstyleタグ内の両方に対応
-    result = result.replace(/background(?:-image)?\s*:\s*url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (match, _quote, url) => {
-        if (isExternalUrl(url)) {
-            replacedCount++;
-            replacedUrls.push(url);
-            return match.replace(url, placeholder);
-        }
-        return match;
-    });
-    // パターン3: srcset属性内の外部URLを置き換え
-    result = result.replace(/srcset\s*=\s*["']([^"']+)["']/gi, (match, srcsetValue) => {
-        let modified = false;
-        const newSrcset = srcsetValue.replace(/(https?:\/\/[^\s,]+)/gi, (srcUrl) => {
-            if (isExternalUrl(srcUrl)) {
-                replacedCount++;
-                replacedUrls.push(srcUrl);
-                modified = true;
-                return placeholder;
-            }
-            return srcUrl;
-        });
-        return modified ? `srcset="${newSrcset}"` : match;
-    });
-    // パターン4: <source> タグのsrc属性を置き換え（picture要素内）
-    result = result.replace(/<source\s+([^>]*)>/gi, (sourceTag, attrs) => {
-        const srcPatterns = [/src\s*=\s*"([^"]*)"/i, /src\s*=\s*'([^']*)'/i];
-        for (const pattern of srcPatterns) {
-            const srcMatch = attrs.match(pattern);
-            if (srcMatch && srcMatch[1]) {
-                const srcUrl = srcMatch[1];
-                if (isExternalUrl(srcUrl)) {
-                    replacedCount++;
-                    replacedUrls.push(srcUrl);
-                    const newAttrs = attrs.replace(pattern, `src="${placeholder}"`);
-                    return `<source ${newAttrs}>`;
-                }
-                break;
-            }
-        }
-        return sourceTag;
-    });
-    // 開発環境でのデバッグログ（結果出力）
-    if ((0, logger_1.isDevelopment)()) {
-        logger_1.logger.debug("[replaceExternalImageUrls] 処理完了", {
-            入力HTML長: html.length,
-            出力HTML長: result.length,
-            置き換え数: replacedCount,
-            置き換えURLリスト: replacedUrls,
-            出力HTML先頭500文字: result.substring(0, 500),
-        });
-    }
-    return result;
-}
-// =====================================================
-// LayoutToCodeService
-// =====================================================
-/**
- * LayoutToCodeServiceクラス
- */
-class LayoutToCodeService {
-    prismaClient = null;
-    /**
-     * PrismaClientを取得
-     */
-    getPrismaClient() {
-        if (this.prismaClient) {
-            return this.prismaClient;
-        }
-        if (prismaClientFactory) {
-            this.prismaClient = prismaClientFactory();
-            return this.prismaClient;
-        }
-        throw new Error("PrismaClient not initialized");
-    }
-    /**
-     * セクションパターンをIDで取得
-     * PrismaClientが利用できない場合はnullを返す
-     */
-    async getSectionPatternById(id) {
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.info("[LayoutToCodeService] Getting section pattern", { id });
-        }
-        // PrismaClientが利用できない場合はnullを返す
-        if (!prismaClientFactory) {
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.warn("[LayoutToCodeService] PrismaClient not available, returning null");
-            }
-            return null;
-        }
-        try {
-            const prisma = this.getPrismaClient();
-            const record = await prisma.sectionPattern.findUnique({
-                where: { id },
-                include: {
-                    webPage: true,
-                },
-            });
-            if (!record) {
-                if ((0, logger_1.isDevelopment)()) {
-                    logger_1.logger.warn("[LayoutToCodeService] Section pattern not found", { id });
-                }
-                return null;
-            }
-            // 開発環境でのデバッグログ - 取得したレコードの詳細を出力
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.debug("[LayoutToCodeService] Raw record from DB", {
-                    id: record.id,
-                    sectionType: record.sectionType,
-                    hasLayoutInfo: !!record.layoutInfo,
-                    layoutInfoType: typeof record.layoutInfo,
-                    layoutInfoSample: record.layoutInfo
-                        ? JSON.stringify(record.layoutInfo).slice(0, 200)
-                        : null,
-                    hasComponents: !!record.components,
-                    componentsType: typeof record.components,
-                    componentsIsArray: Array.isArray(record.components),
-                    componentsLength: Array.isArray(record.components) ? record.components.length : 0,
-                    componentsSample: record.components
-                        ? JSON.stringify(record.components).slice(0, 200)
-                        : null,
-                    hasHtmlSnippet: !!record.htmlSnippet,
-                    htmlSnippetLength: record.htmlSnippet?.length || 0,
-                });
-            }
-            return recordToSectionPattern(record);
-        }
-        catch (error) {
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.warn("[LayoutToCodeService] Error getting section pattern, returning null", {
-                    id,
-                    error: error instanceof Error ? error.message : "Unknown error",
-                });
-            }
-            // エラー時もnullを返す
-            return null;
-        }
-    }
-    /**
-     * コードを生成
-     */
-    async generateCode(pattern, options) {
-        const startTime = Date.now();
-        if ((0, logger_1.isDevelopment)()) {
-            logger_1.logger.info("[LayoutToCodeService] Generating code", {
-                patternId: pattern.id,
-                sectionType: pattern.sectionType,
-                framework: options.framework,
-                typescript: options.typescript,
-                tailwind: options.tailwind,
-                splitComponents: options.splitComponents,
-            });
-        }
-        try {
-            const componentName = generateComponentName(pattern.sectionType, options.componentName);
-            const filename = generateFilename(componentName, options.framework, options.typescript);
-            const dependencies = getDependencies(options.framework, options.tailwind);
-            // フレームワークに応じてコードを生成
-            let code;
-            let subComponents;
-            // splitComponents=trueかつReactフレームワークの場合のみコンポーネント分割を実行
-            if (options.splitComponents && options.framework === "react" && pattern.htmlSnippet) {
-                // REFTRIX-CODEGEN-02: セマンティックHTML変換（コンポーネント分割前）
-                const splitSectionName = pattern.sectionName || pattern.layoutInfo?.heading;
-                const semanticHtml = (0, semantic_html_converter_1.convertToSemanticHtml)(pattern.htmlSnippet, {
-                    sectionType: pattern.sectionType,
-                    ...(splitSectionName ? { sectionName: splitSectionName } : {}),
-                    addAriaLabel: true,
-                });
-                const splitResult = (0, component_splitter_1.splitIntoComponents)(semanticHtml, {
-                    mainComponentName: componentName,
-                    minElements: 3,
-                    maxNestLevel: 2,
-                });
-                if ((0, logger_1.isDevelopment)()) {
-                    logger_1.logger.debug("[LayoutToCodeService] Component split result", {
-                        patternId: pattern.id,
-                        mainComponentName: splitResult.mainComponent.name,
-                        subComponentsCount: splitResult.subComponents.length,
-                        imports: splitResult.mainComponent.imports.length,
-                    });
-                }
-                // サブコンポーネントが存在する場合
-                if (splitResult.subComponents.length > 0) {
-                    // メインコンポーネントのコード生成（import文付き）
-                    code = generateReactCodeWithSplit(componentName, splitResult.mainComponent.jsx, splitResult.mainComponent.imports, options);
-                    // サブコンポーネントの情報を生成
-                    subComponents = splitResult.subComponents.map((sub) => ({
-                        name: sub.name,
-                        code: generateReactSubComponentCode(sub.name, sub.jsx, sub.props, options),
-                        filename: generateFilename(sub.name, "react", options.typescript),
-                        props: sub.props,
-                    }));
-                }
-                else {
-                    // サブコンポーネントがない場合は通常生成
-                    code = generateReactCode(pattern, options);
-                }
-            }
-            else {
-                // 通常のコード生成
-                switch (options.framework) {
-                    case "react":
-                        code = generateReactCode(pattern, options);
-                        break;
-                    case "vue":
-                        code = generateVueCode(pattern, options);
-                        break;
-                    case "html":
-                        code = generateHtmlCode(pattern, options);
-                        break;
-                    default:
-                        code = generateReactCode(pattern, options);
-                }
-            }
-            const processingTimeMs = Date.now() - startTime;
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.info("[LayoutToCodeService] Code generation completed", {
-                    patternId: pattern.id,
-                    componentName,
-                    codeLength: code.length,
-                    subComponentsCount: subComponents?.length ?? 0,
-                    processingTimeMs,
-                });
-            }
-            const result = {
-                code,
-                componentName,
-                filename,
-                dependencies,
-            };
-            // サブコンポーネントがある場合のみ追加
-            if (subComponents && subComponents.length > 0) {
-                result.subComponents = subComponents;
-            }
-            return result;
-        }
-        catch (error) {
-            if ((0, logger_1.isDevelopment)()) {
-                logger_1.logger.error("[LayoutToCodeService] Code generation error", {
-                    patternId: pattern.id,
-                    error: error instanceof Error ? error.message : "Unknown error",
-                });
-            }
-            throw error;
-        }
-    }
-}
-exports.LayoutToCodeService = LayoutToCodeService;
-// =====================================================
-// コンポーネント分割用コード生成関数
-// =====================================================
-/**
- * コンポーネント分割されたメインコンポーネントを生成
- */
-function generateReactCodeWithSplit(componentName, mainJsx, imports, options) {
-    const { typescript, tailwind } = options;
-    // プロップスの型定義（TypeScript用）
-    const propsType = typescript
-        ? `
-interface ${componentName}Props {
-  className?: string;
-}
-`
-        : "";
-    // プロップスの引数
-    const propsArg = typescript ? `{ className }: ${componentName}Props` : "{ className }";
-    // スタイルクラス
-    const containerClass = tailwind ? "w-full max-w-7xl mx-auto px-4 py-8" : "";
-    // import文の生成
-    const importStatements = imports.length > 0 ? `\n${imports.join("\n")}\n` : "";
-    return `${typescript ? "" : "// @ts-nocheck"}
-import React from 'react';${importStatements}
-${propsType}
-export const ${componentName}${typescript ? `: React.FC<${componentName}Props>` : ""} = (${propsArg}) => {
-  return (
-    <div className={\`${containerClass} \${className || ''}\`}>
-      {/* Main component with extracted sub-components */}
-      ${mainJsx}
-    </div>
-  );
-};
-
-export default ${componentName};
-`.trim();
-}
-/**
- * サブコンポーネントのReactコードを生成
- */
-function generateReactSubComponentCode(name, jsx, props, options) {
-    const { typescript, tailwind } = options;
-    // propsの型定義を生成
-    const propsInterface = props.length > 0
-        ? props.map((p) => `  ${p.name}?: ${p.type};`).join("\n")
-        : "  className?: string;";
-    const propsType = typescript
-        ? `
-interface ${name}Props {
-${propsInterface}
-}
-`
-        : "";
-    // propsの引数（デストラクチャリング）
-    const propsNames = props.length > 0 ? props.map((p) => p.name).join(", ") : "className";
-    const propsArg = typescript ? `{ ${propsNames} }: ${name}Props` : `{ ${propsNames} }`;
-    // スタイルクラス（tailwind対応）
-    const baseClass = tailwind ? "relative" : "";
-    return `${typescript ? "" : "// @ts-nocheck"}
-import React from 'react';
-${propsType}
-export const ${name}${typescript ? `: React.FC<${name}Props>` : ""} = (${propsArg}) => {
-  return (
-    <div${baseClass ? ` className="${baseClass}"` : ""}>
-      ${jsx}
-    </div>
-  );
-};
-
-export default ${name};
-`.trim();
-}
-// =====================================================
-// シングルトンインスタンス
-// =====================================================
-let layoutToCodeServiceInstance = null;
-/**
- * LayoutToCodeServiceインスタンスを取得
- */
-function getLayoutToCodeService() {
-    if (!layoutToCodeServiceInstance) {
-        layoutToCodeServiceInstance = new LayoutToCodeService();
-    }
-    return layoutToCodeServiceInstance;
-}
-/**
- * LayoutToCodeServiceインスタンスをリセット
- */
-function resetLayoutToCodeService() {
-    layoutToCodeServiceInstance = null;
-}
-/**
- * LayoutToCodeServiceファクトリを作成
- */
-function createLayoutToCodeServiceFactory() {
-    return () => getLayoutToCodeService();
-}
-exports.default = LayoutToCodeService;
-//# sourceMappingURL=layout-to-code.service.js.map