@reftrixmcp/mcp-server 0.1.7

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

@@ -0,0 +1,1368 @@
+"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