@reftrixmcp/mcp-server 0.1.7 → 0.2.0

package/src/tools/motion/search.tool.ts

@@ -15,7 +15,14 @@
  * @module tools/motion/search.tool
  */
 
+import { createDIFactory } from "../../utils/di-factory";
 import { logger, isDevelopment } from "../../utils/logger";
+import { sanitizeErrorMessage } from "../../utils/sanitize-error";
+import {
+  generateCacheKey,
+  getCachedResult,
+  setCachedResult,
+} from "../../services/search-cache.service";
 
 import {
   motionSearchInputSchema,
@@ -30,16 +37,12 @@ import {
   type MotionPatternInput,
   type ImplementationFormat,
   type ImplementationOptions,
-  type ImplementationMetadata,
   type JSAnimationFilters,
   type JSAnimationInfo,
   type WebGLAnimationFilters,
   type WebGLAnimationInfo,
   type GenerationOptions,
   type DuplicateCheckResult,
-  type MotionImplementation,
-  type MotionPattern,
-  type MotionCategory,
 } from "./schemas";
 
 import {
@@ -49,11 +52,16 @@ import {
 import { applyPreferenceReranking } from "../../services/preference-rerank.helper";
 import type { IPrismaClient } from "../../services/preference-profile.service";
 
+// 分割モジュールからのインポート
+import { generateImplementation, type GenerationResult } from "./code-generators";
+import { applyDiversityFilter, enrichResultsWithImplementation } from "./search-helpers";
+
 // =====================================================
 // 型定義
 // =====================================================
 
 export type { MotionSearchInput, MotionSearchOutput };
+export type { GenerationResult };
 
 /**
  * 検索パラメータ
@@ -137,14 +145,6 @@ export interface IMotionSearchService {
   getEmbedding?: (text: string) => Promise<number[]>;
 }
 
-/**
- * コード生成結果インターフェース
- */
-export interface GenerationResult {
-  code: string;
-  metadata: ImplementationMetadata;
-}
-
 /**
  * コード生成サービスインターフェース（Phase3-3統合用）
  */
@@ -156,1687 +156,19 @@ export interface IMotionImplementationService {
   ) => GenerationResult | null;
 }
 
-/**
- * サービスファクトリ型
- */
-type MotionSearchServiceFactory = () => IMotionSearchService;
-type MotionImplementationServiceFactory = () => IMotionImplementationService | null;
-
-let serviceFactory: MotionSearchServiceFactory | null = null;
-let implementationServiceFactory: MotionImplementationServiceFactory | null = null;
-
-/**
- * サービスファクトリを設定
- */
-export function setMotionSearchServiceFactory(factory: MotionSearchServiceFactory): void {
-  serviceFactory = factory;
-}
-
-/**
- * サービスファクトリをリセット
- */
-export function resetMotionSearchServiceFactory(): void {
-  serviceFactory = null;
-}
-
-/**
- * コード生成サービスファクトリを設定（Phase3-3統合用）
- */
-export function setMotionImplementationServiceFactory(
-  factory: MotionImplementationServiceFactory
-): void {
-  implementationServiceFactory = factory;
-}
-
-/**
- * コード生成サービスファクトリをリセット
- */
-export function resetMotionImplementationServiceFactory(): void {
-  implementationServiceFactory = null;
-}
+const serviceFactoryDI = createDIFactory<IMotionSearchService>("MotionSearchService");
+export const setMotionSearchServiceFactory = serviceFactoryDI.set;
+export const resetMotionSearchServiceFactory = serviceFactoryDI.reset;
 
-/**
- * PrismaClientファクトリー（嗜好リランキング用DI）
- * PrismaClient factory (DI for preference reranking)
- */
-let prismaClientFactory: (() => IPrismaClient) | null = null;
+const implementationServiceDI = createDIFactory<IMotionImplementationService | null>(
+  "MotionImplementationService"
+);
+export const setMotionImplementationServiceFactory = implementationServiceDI.set;
+export const resetMotionImplementationServiceFactory = implementationServiceDI.reset;
 
-/**
- * PrismaClientファクトリーを設定（嗜好リランキング用）
- * Set PrismaClient factory (for preference reranking)
- */
-export function setMotionSearchPrismaClientFactory(factory: () => IPrismaClient): void {
-  prismaClientFactory = factory;
-}
-
-/**
- * PrismaClientファクトリーをリセット（テスト用）
- * Reset PrismaClient factory (for testing)
- */
-export function resetMotionSearchPrismaClientFactory(): void {
-  prismaClientFactory = null;
-}
-
-// =====================================================
-// デフォルトコード生成実装（Phase3-3統合用）
-// =====================================================
-
-/**
- * ミリ秒をCSS時間単位に変換
- */
-function formatDuration(ms: number): string {
-  if (ms >= 1000 && ms % 1000 === 0) {
-    return `${ms / 1000}s`;
-  }
-  return `${ms}ms`;
-}
-
-/**
- * キーフレームのパーセンテージを計算
- */
-function offsetToPercent(offset: number): string {
-  return `${Math.round(offset * 100)}%`;
-}
-
-/**
- * 行数をカウント
- */
-function countLines(code: string): number {
-  return code.split("\n").length;
-}
-
-/**
- * PascalCaseに変換
- */
-function toPascalCase(str: string): string {
-  return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
-}
-
-/**
- * CSS生成
- */
-function generateCSS(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const selector = options.selector || ".animated";
-  const hasKeyframes = pattern.properties.some((p) => p.keyframes && p.keyframes.length > 0);
-
-  // @keyframes 生成
-  if (pattern.type !== "transition") {
-    lines.push(`@keyframes ${pattern.name} {`);
-
-    if (hasKeyframes) {
-      const allOffsets = new Set<number>();
-      pattern.properties.forEach((prop) => {
-        prop.keyframes?.forEach((kf) => allOffsets.add(kf.offset));
-      });
-      allOffsets.add(0);
-      allOffsets.add(1);
-
-      const sortedOffsets = Array.from(allOffsets).sort((a, b) => a - b);
-
-      for (const offset of sortedOffsets) {
-        lines.push(`  ${offsetToPercent(offset)} {`);
-        for (const prop of pattern.properties) {
-          const kf = prop.keyframes?.find((k) => k.offset === offset);
-          if (kf) {
-            lines.push(`    ${prop.name}: ${kf.value};`);
-          } else if (offset === 0) {
-            lines.push(`    ${prop.name}: ${prop.from};`);
-          } else if (offset === 1) {
-            lines.push(`    ${prop.name}: ${prop.to};`);
-          }
-        }
-        lines.push("  }");
-      }
-    } else {
-      lines.push("  from {");
-      for (const prop of pattern.properties) {
-        lines.push(`    ${prop.name}: ${prop.from};`);
-      }
-      lines.push("  }");
-      lines.push("  to {");
-      for (const prop of pattern.properties) {
-        lines.push(`    ${prop.name}: ${prop.to};`);
-      }
-      lines.push("  }");
-    }
-
-    lines.push("}");
-    lines.push("");
-
-    // ベンダープレフィックス
-    if (options.includeVendorPrefixes) {
-      lines.push(`@-webkit-keyframes ${pattern.name} {`);
-      if (hasKeyframes) {
-        const allOffsets = new Set<number>();
-        pattern.properties.forEach((prop) => {
-          prop.keyframes?.forEach((kf) => allOffsets.add(kf.offset));
-        });
-        allOffsets.add(0);
-        allOffsets.add(1);
-
-        const sortedOffsets = Array.from(allOffsets).sort((a, b) => a - b);
-
-        for (const offset of sortedOffsets) {
-          lines.push(`  ${offsetToPercent(offset)} {`);
-          for (const prop of pattern.properties) {
-            const kf = prop.keyframes?.find((k) => k.offset === offset);
-            if (kf) {
-              lines.push(`    ${prop.name}: ${kf.value};`);
-            } else if (offset === 0) {
-              lines.push(`    ${prop.name}: ${prop.from};`);
-            } else if (offset === 1) {
-              lines.push(`    ${prop.name}: ${prop.to};`);
-            }
-          }
-          lines.push("  }");
-        }
-      } else {
-        lines.push("  from {");
-        for (const prop of pattern.properties) {
-          lines.push(`    ${prop.name}: ${prop.from};`);
-        }
-        lines.push("  }");
-        lines.push("  to {");
-        for (const prop of pattern.properties) {
-          lines.push(`    ${prop.name}: ${prop.to};`);
-        }
-        lines.push("  }");
-      }
-      lines.push("}");
-      lines.push("");
-    }
-  }
-
-  // セレクタルール
-  lines.push(`${selector} {`);
-
-  if (pattern.type === "transition") {
-    const props = pattern.properties.map((p) => p.name).join(", ");
-    lines.push(`  transition: ${props} ${formatDuration(pattern.duration)} ${pattern.easing};`);
-    if (options.includeVendorPrefixes) {
-      lines.push(
-        `  -webkit-transition: ${props} ${formatDuration(pattern.duration)} ${pattern.easing};`
-      );
-    }
-  } else {
-    const iterations = pattern.iterations === "infinite" ? "infinite" : pattern.iterations;
-    const animationValue = [
-      pattern.name,
-      formatDuration(pattern.duration),
-      pattern.easing,
-      pattern.delay > 0 ? formatDuration(pattern.delay) : null,
-      iterations !== 1 ? iterations : null,
-      pattern.direction !== "normal" ? pattern.direction : null,
-      pattern.fillMode !== "none" ? pattern.fillMode : null,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    lines.push(`  animation: ${animationValue};`);
-    if (options.includeVendorPrefixes) {
-      lines.push(`  -webkit-animation: ${animationValue};`);
-    }
-  }
-
-  lines.push("}");
-
-  // hover/scroll タイプの追加ルール
-  if (pattern.type === "hover") {
-    lines.push("");
-    lines.push(`${selector}:hover {`);
-    for (const prop of pattern.properties) {
-      lines.push(`  ${prop.name}: ${prop.to};`);
-    }
-    lines.push("}");
-  }
-
-  // prefers-reduced-motion
-  if (options.includeReducedMotion) {
-    lines.push("");
-    lines.push("@media (prefers-reduced-motion: reduce) {");
-    lines.push(`  ${selector} {`);
-    if (pattern.type === "transition") {
-      lines.push("    transition: none;");
-    } else {
-      lines.push("    animation: none;");
-    }
-    lines.push("  }");
-    lines.push("}");
-  }
-
-  const code = lines.join("\n");
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: pattern.type !== "transition",
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies: [],
-    },
-  };
-}
-
-/**
- * CSS Module生成
- */
-function generateCSSModule(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const result = generateCSS(pattern, {
-    ...options,
-    selector: `.${pattern.name}`,
-  });
-
-  return {
-    ...result,
-    metadata: {
-      ...result.metadata,
-      dependencies: [],
-    },
-  };
-}
-
-/**
- * Tailwind生成
- */
-function generateTailwind(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-
-  lines.push("/* Add to tailwind.config.js */");
-  lines.push("module.exports = {");
-  lines.push("  theme: {");
-  lines.push("    extend: {");
-
-  lines.push("      animation: {");
-  const iterations = pattern.iterations === "infinite" ? "infinite" : "";
-  const direction = pattern.direction !== "normal" ? pattern.direction : "";
-  lines.push(
-    `        '${pattern.name}': '${pattern.name} ${formatDuration(pattern.duration)} ${pattern.easing} ${iterations} ${direction}'.trim(),`
-  );
-  lines.push("      },");
-
-  lines.push("      keyframes: {");
-  lines.push(`        '${pattern.name}': {`);
-
-  if (pattern.properties.some((p) => p.keyframes && p.keyframes.length > 0)) {
-    const allOffsets = new Set<number>();
-    pattern.properties.forEach((prop) => {
-      prop.keyframes?.forEach((kf) => allOffsets.add(kf.offset));
-    });
-    allOffsets.add(0);
-    allOffsets.add(1);
-
-    const sortedOffsets = Array.from(allOffsets).sort((a, b) => a - b);
-
-    for (const offset of sortedOffsets) {
-      lines.push(`          '${offsetToPercent(offset)}': {`);
-      for (const prop of pattern.properties) {
-        const kf = prop.keyframes?.find((k) => k.offset === offset);
-        if (kf) {
-          lines.push(`            ${prop.name}: '${kf.value}',`);
-        } else if (offset === 0) {
-          lines.push(`            ${prop.name}: '${prop.from}',`);
-        } else if (offset === 1) {
-          lines.push(`            ${prop.name}: '${prop.to}',`);
-        }
-      }
-      lines.push("          },");
-    }
-  } else {
-    lines.push("          '0%': {");
-    for (const prop of pattern.properties) {
-      lines.push(`            ${prop.name}: '${prop.from}',`);
-    }
-    lines.push("          },");
-    lines.push("          '100%': {");
-    for (const prop of pattern.properties) {
-      lines.push(`            ${prop.name}: '${prop.to}',`);
-    }
-    lines.push("          },");
-  }
-
-  lines.push("        },");
-  lines.push("      },");
-  lines.push("    },");
-  lines.push("  },");
-  lines.push("};");
-  lines.push("");
-  lines.push("/* Usage in JSX */");
-  lines.push(`<div className="animate-${pattern.name}">Content</div>`);
-
-  if (options.includeReducedMotion) {
-    lines.push("");
-    lines.push("/* For reduced motion support */");
-    lines.push(`<div className="animate-${pattern.name} motion-reduce:animate-none">Content</div>`);
-  }
-
-  const code = lines.join("\n");
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: true,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies: ["tailwindcss"],
-    },
-  };
-}
-
-/**
- * styled-components生成
- */
-function generateStyledComponents(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const componentName = options.componentName || toPascalCase(pattern.name) + "Animation";
-  const ts = options.typescript ?? true;
-
-  lines.push("import styled, { keyframes } from 'styled-components';");
-  if (ts) {
-    lines.push("import type { FC, ReactNode } from 'react';");
-  }
-  lines.push("");
-
-  lines.push(`const ${pattern.name}Keyframes = keyframes\``);
-
-  if (pattern.properties.some((p) => p.keyframes && p.keyframes.length > 0)) {
-    const allOffsets = new Set<number>();
-    pattern.properties.forEach((prop) => {
-      prop.keyframes?.forEach((kf) => allOffsets.add(kf.offset));
-    });
-    allOffsets.add(0);
-    allOffsets.add(1);
-
-    const sortedOffsets = Array.from(allOffsets).sort((a, b) => a - b);
-
-    for (const offset of sortedOffsets) {
-      lines.push(`  ${offsetToPercent(offset)} {`);
-      for (const prop of pattern.properties) {
-        const kf = prop.keyframes?.find((k) => k.offset === offset);
-        if (kf) {
-          lines.push(`    ${prop.name}: ${kf.value};`);
-        } else if (offset === 0) {
-          lines.push(`    ${prop.name}: ${prop.from};`);
-        } else if (offset === 1) {
-          lines.push(`    ${prop.name}: ${prop.to};`);
-        }
-      }
-      lines.push("  }");
-    }
-  } else {
-    lines.push("  from {");
-    for (const prop of pattern.properties) {
-      lines.push(`    ${prop.name}: ${prop.from};`);
-    }
-    lines.push("  }");
-    lines.push("  to {");
-    for (const prop of pattern.properties) {
-      lines.push(`    ${prop.name}: ${prop.to};`);
-    }
-    lines.push("  }");
-  }
-
-  lines.push("`;");
-  lines.push("");
-
-  const iterationsVal = pattern.iterations === "infinite" ? "infinite" : pattern.iterations;
-  const directionVal = pattern.direction !== "normal" ? pattern.direction : "";
-  const fillModeVal = pattern.fillMode !== "none" ? pattern.fillMode : "";
-
-  lines.push(`const ${componentName}Container = styled.div\``);
-  lines.push(
-    `  animation: \${${pattern.name}Keyframes} ${formatDuration(pattern.duration)} ${pattern.easing}${pattern.delay > 0 ? ` ${formatDuration(pattern.delay)}` : ""}${iterationsVal !== 1 ? ` ${iterationsVal}` : ""}${directionVal ? ` ${directionVal}` : ""}${fillModeVal ? ` ${fillModeVal}` : ""};`
-  );
-
-  if (options.includeReducedMotion) {
-    lines.push("");
-    lines.push("  @media (prefers-reduced-motion: reduce) {");
-    lines.push("    animation: none;");
-    lines.push("  }");
-  }
-
-  lines.push("`;");
-  lines.push("");
-
-  if (ts) {
-    lines.push(`interface ${componentName}Props {`);
-    lines.push("  children: ReactNode;");
-    lines.push("  className?: string;");
-    lines.push("}");
-    lines.push("");
-    lines.push(
-      `export const ${componentName}: FC<${componentName}Props> = ({ children, className }) => {`
-    );
-  } else {
-    lines.push(`export const ${componentName} = ({ children, className }) => {`);
-  }
-  lines.push(
-    `  return <${componentName}Container className={className}>{children}</${componentName}Container>;`
-  );
-  lines.push("};");
-
-  const code = lines.join("\n");
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: true,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies: ["styled-components"],
-    },
-  };
-}
-
-/**
- * Emotion生成
- */
-function generateEmotion(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const componentName = options.componentName || toPascalCase(pattern.name) + "Animation";
-  const ts = options.typescript ?? true;
-
-  lines.push("/** @jsxImportSource @emotion/react */");
-  lines.push("import { css, keyframes } from '@emotion/react';");
-  if (ts) {
-    lines.push("import type { FC, ReactNode } from 'react';");
-  }
-  lines.push("");
-
-  lines.push(`const ${pattern.name}Keyframes = keyframes\``);
-
-  if (pattern.properties.some((p) => p.keyframes && p.keyframes.length > 0)) {
-    const allOffsets = new Set<number>();
-    pattern.properties.forEach((prop) => {
-      prop.keyframes?.forEach((kf) => allOffsets.add(kf.offset));
-    });
-    allOffsets.add(0);
-    allOffsets.add(1);
-
-    const sortedOffsets = Array.from(allOffsets).sort((a, b) => a - b);
-
-    for (const offset of sortedOffsets) {
-      lines.push(`  ${offsetToPercent(offset)} {`);
-      for (const prop of pattern.properties) {
-        const kf = prop.keyframes?.find((k) => k.offset === offset);
-        if (kf) {
-          lines.push(`    ${prop.name}: ${kf.value};`);
-        } else if (offset === 0) {
-          lines.push(`    ${prop.name}: ${prop.from};`);
-        } else if (offset === 1) {
-          lines.push(`    ${prop.name}: ${prop.to};`);
-        }
-      }
-      lines.push("  }");
-    }
-  } else {
-    lines.push("  from {");
-    for (const prop of pattern.properties) {
-      lines.push(`    ${prop.name}: ${prop.from};`);
-    }
-    lines.push("  }");
-    lines.push("  to {");
-    for (const prop of pattern.properties) {
-      lines.push(`    ${prop.name}: ${prop.to};`);
-    }
-    lines.push("  }");
-  }
-
-  lines.push("`;");
-  lines.push("");
-
-  const iterationsVal = pattern.iterations === "infinite" ? "infinite" : pattern.iterations;
-  const directionVal = pattern.direction !== "normal" ? pattern.direction : "";
-  const fillModeVal = pattern.fillMode !== "none" ? pattern.fillMode : "";
-
-  lines.push(`const ${pattern.name}Style = css\``);
-  lines.push(
-    `  animation: \${${pattern.name}Keyframes} ${formatDuration(pattern.duration)} ${pattern.easing}${pattern.delay > 0 ? ` ${formatDuration(pattern.delay)}` : ""}${iterationsVal !== 1 ? ` ${iterationsVal}` : ""}${directionVal ? ` ${directionVal}` : ""}${fillModeVal ? ` ${fillModeVal}` : ""};`
-  );
-
-  if (options.includeReducedMotion) {
-    lines.push("");
-    lines.push("  @media (prefers-reduced-motion: reduce) {");
-    lines.push("    animation: none;");
-    lines.push("  }");
-  }
-
-  lines.push("`;");
-  lines.push("");
-
-  if (ts) {
-    lines.push(`interface ${componentName}Props {`);
-    lines.push("  children: ReactNode;");
-    lines.push("  className?: string;");
-    lines.push("}");
-    lines.push("");
-    lines.push(
-      `export const ${componentName}: FC<${componentName}Props> = ({ children, className }) => {`
-    );
-  } else {
-    lines.push(`export const ${componentName} = ({ children, className }) => {`);
-  }
-  lines.push(`  return <div css={${pattern.name}Style} className={className}>{children}</div>;`);
-  lines.push("};");
-
-  const code = lines.join("\n");
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: true,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies: ["@emotion/react"],
-    },
-  };
-}
-
-/**
- * Framer Motion生成
- */
-function generateFramerMotion(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const componentName = options.componentName || toPascalCase(pattern.name) + "Motion";
-  const ts = options.typescript ?? true;
-  const isScroll = pattern.type === "scroll";
-
-  lines.push("import { motion } from 'framer-motion';");
-  if (ts) {
-    lines.push("import type { FC, ReactNode } from 'react';");
-  }
-  lines.push("");
-
-  lines.push(`const ${pattern.name}Variants = {`);
-  lines.push("  initial: {");
-  for (const prop of pattern.properties) {
-    const cssName = prop.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    lines.push(`    ${cssName}: ${JSON.stringify(prop.from)},`);
-  }
-  lines.push("  },");
-  lines.push("  animate: {");
-  for (const prop of pattern.properties) {
-    const cssName = prop.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    lines.push(`    ${cssName}: ${JSON.stringify(prop.to)},`);
-  }
-  lines.push("  },");
-  lines.push("};");
-  lines.push("");
-
-  lines.push(`const ${pattern.name}Transition = {`);
-  lines.push(`  duration: ${pattern.duration / 1000},`);
-  lines.push(`  ease: ${JSON.stringify(pattern.easing)},`);
-  if (pattern.delay > 0) {
-    lines.push(`  delay: ${pattern.delay / 1000},`);
-  }
-  if (pattern.iterations === "infinite") {
-    lines.push("  repeat: Infinity,");
-  } else if (pattern.iterations > 1) {
-    lines.push(`  repeat: ${pattern.iterations - 1},`);
-  }
-  if (pattern.direction === "alternate" || pattern.direction === "alternate-reverse") {
-    lines.push("  repeatType: 'reverse',");
-  }
-  lines.push("};");
-  lines.push("");
-
-  if (ts) {
-    lines.push(`interface ${componentName}Props {`);
-    lines.push("  children: ReactNode;");
-    lines.push("  className?: string;");
-    lines.push("}");
-    lines.push("");
-    lines.push(
-      `export const ${componentName}: FC<${componentName}Props> = ({ children, className }) => {`
-    );
-  } else {
-    lines.push(`export const ${componentName} = ({ children, className }) => {`);
-  }
-  lines.push("  return (");
-  lines.push("    <motion.div");
-  lines.push(`      variants={${pattern.name}Variants}`);
-  lines.push('      initial="initial"');
-
-  if (isScroll) {
-    lines.push('      whileInView="animate"');
-    lines.push("      viewport={{ once: true }}");
-  } else {
-    lines.push('      animate="animate"');
-  }
-
-  lines.push(`      transition={${pattern.name}Transition}`);
-  lines.push("      className={className}");
-  lines.push("    >");
-  lines.push("      {children}");
-  lines.push("    </motion.div>");
-  lines.push("  );");
-  lines.push("};");
-
-  if (options.includeReducedMotion) {
-    lines.push("");
-    lines.push("/* Note: Framer Motion automatically respects prefers-reduced-motion */");
-    lines.push(
-      '/* Set reducedMotion="user" in AnimatePresence or MotionConfig for custom handling */'
-    );
-  }
-
-  const code = lines.join("\n");
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: false,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies: ["framer-motion"],
-    },
-  };
-}
-
-/**
- * GSAP生成
- */
-function generateGSAP(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const componentName = options.componentName || toPascalCase(pattern.name) + "GSAP";
-  const ts = options.typescript ?? true;
-  const isScroll = pattern.type === "scroll";
-
-  lines.push("import { gsap } from 'gsap';");
-  if (isScroll) {
-    lines.push("import { ScrollTrigger } from 'gsap/ScrollTrigger';");
-    lines.push("");
-    lines.push("gsap.registerPlugin(ScrollTrigger);");
-  }
-  if (ts) {
-    lines.push("import { useRef, useEffect } from 'react';");
-    lines.push("import type { FC, ReactNode } from 'react';");
-  } else {
-    lines.push("import { useRef, useEffect } from 'react';");
-  }
-  lines.push("");
-
-  lines.push(
-    `const use${toPascalCase(pattern.name)}Animation = (ref${ts ? ": React.RefObject<HTMLDivElement>" : ""}) => {`
-  );
-  lines.push("  useEffect(() => {");
-  lines.push("    if (!ref.current) return;");
-  lines.push("");
-
-  const toProps: string[] = [];
-  for (const prop of pattern.properties) {
-    const propName = prop.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    toProps.push(`      ${propName}: ${JSON.stringify(prop.to)}`);
-  }
-
-  const fromProps: string[] = [];
-  for (const prop of pattern.properties) {
-    const propName = prop.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    fromProps.push(`      ${propName}: ${JSON.stringify(prop.from)}`);
-  }
-
-  lines.push("    const animation = gsap.fromTo(");
-  lines.push("      ref.current,");
-  lines.push("      {");
-  lines.push(fromProps.join(",\n"));
-  lines.push("      },");
-  lines.push("      {");
-  lines.push(toProps.join(",\n") + ",");
-  lines.push(`        duration: ${pattern.duration / 1000},`);
-  lines.push(`        ease: ${JSON.stringify(pattern.easing)},`);
-  if (pattern.delay > 0) {
-    lines.push(`        delay: ${pattern.delay / 1000},`);
-  }
-  if (pattern.iterations === "infinite") {
-    lines.push("        repeat: -1,");
-  } else if (pattern.iterations > 1) {
-    lines.push(`        repeat: ${pattern.iterations - 1},`);
-  }
-  if (pattern.direction === "alternate" || pattern.direction === "alternate-reverse") {
-    lines.push("        yoyo: true,");
-  }
-
-  if (isScroll) {
-    lines.push("        scrollTrigger: {");
-    lines.push("          trigger: ref.current,");
-    lines.push("          start: 'top 80%',");
-    lines.push("          end: 'bottom 20%',");
-    lines.push("          toggleActions: 'play none none reverse',");
-    lines.push("        },");
-  }
-
-  lines.push("      }");
-  lines.push("    );");
-  lines.push("");
-  lines.push("    return () => {");
-  lines.push("      animation.kill();");
-  lines.push("    };");
-  lines.push("  }, [ref]);");
-  lines.push("};");
-  lines.push("");
-
-  if (ts) {
-    lines.push(`interface ${componentName}Props {`);
-    lines.push("  children: ReactNode;");
-    lines.push("  className?: string;");
-    lines.push("}");
-    lines.push("");
-    lines.push(
-      `export const ${componentName}: FC<${componentName}Props> = ({ children, className }) => {`
-    );
-  } else {
-    lines.push(`export const ${componentName} = ({ children, className }) => {`);
-  }
-  lines.push(`  const ref = useRef${ts ? "<HTMLDivElement>" : ""}(null);`);
-  lines.push(`  use${toPascalCase(pattern.name)}Animation(ref);`);
-  lines.push("");
-  lines.push("  return (");
-  lines.push("    <div ref={ref} className={className}>");
-  lines.push("      {children}");
-  lines.push("    </div>");
-  lines.push("  );");
-  lines.push("};");
-
-  if (options.includeReducedMotion) {
-    lines.push("");
-    lines.push("/* Add reduced motion check */");
-    lines.push(
-      '// const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;'
-    );
-    lines.push("// if (prefersReducedMotion) return;");
-  }
-
-  const code = lines.join("\n");
-  const dependencies = isScroll ? ["gsap", "gsap/ScrollTrigger"] : ["gsap"];
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: false,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies,
-    },
-  };
-}
-
-/**
- * Three.js (React Three Fiber) 生成
- *
- * @react-three/fiber を使用した3Dアニメーションコードを生成
- * - useFrame によるアニメーションループ
- * - scroll-driven アニメーション対応
- * - TypeScript 型定義付き
- */
-function generateThreeJS(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const componentName = options.componentName || toPascalCase(pattern.name) + "Scene";
-  const ts = options.typescript ?? true;
-  const isScroll = pattern.type === "scroll";
-
-  // Imports
-  lines.push("import { useRef } from 'react';");
-  lines.push("import { Canvas, useFrame } from '@react-three/fiber';");
-  if (isScroll) {
-    lines.push("import { useScroll } from '@react-three/drei';");
-  }
-  if (ts) {
-    lines.push("import type { FC } from 'react';");
-    lines.push("import type { Mesh, Group } from 'three';");
-  }
-  lines.push("");
-
-  // Extract animation properties and convert to Three.js-compatible values
-  const positionProps = pattern.properties.filter((p) =>
-    ["translateX", "translateY", "translateZ", "x", "y", "z"].includes(p.name)
-  );
-  const rotationProps = pattern.properties.filter((p) =>
-    ["rotateX", "rotateY", "rotateZ", "rotate"].includes(p.name)
-  );
-  const scaleProps = pattern.properties.filter((p) =>
-    ["scale", "scaleX", "scaleY", "scaleZ"].includes(p.name)
-  );
-  const opacityProps = pattern.properties.filter((p) => ["opacity"].includes(p.name));
-
-  // Helper function name
-  const animatedObjectName = toPascalCase(pattern.name) + "Object";
-
-  // Animated Object Component
-  if (ts) {
-    lines.push(`interface ${animatedObjectName}Props {`);
-    lines.push("  children?: React.ReactNode;");
-    lines.push("}");
-    lines.push("");
-  }
-
-  lines.push(
-    `const ${animatedObjectName}${ts ? `: FC<${animatedObjectName}Props>` : ""} = ({ children }) => {`
-  );
-  lines.push(`  const meshRef = useRef${ts ? "<Mesh>" : ""}(null);`);
-
-  if (isScroll) {
-    lines.push("  const scroll = useScroll();");
-    lines.push("");
-    lines.push("  useFrame(() => {");
-    lines.push("    if (!meshRef.current) return;");
-    lines.push("    const progress = scroll.offset;");
-  } else {
-    lines.push(`  const duration = ${pattern.duration / 1000}; // seconds`);
-    lines.push(`  const startTime = useRef${ts ? "<number>" : ""}(0);`);
-    lines.push("");
-    lines.push("  useFrame((state) => {");
-    lines.push("    if (!meshRef.current) return;");
-    lines.push("    if (startTime.current === 0) startTime.current = state.clock.elapsedTime;");
-    lines.push("");
-    lines.push("    const elapsed = state.clock.elapsedTime - startTime.current;");
-    if (pattern.iterations === "infinite") {
-      lines.push("    const progress = (elapsed % duration) / duration;");
-    } else {
-      lines.push("    const progress = Math.min(elapsed / duration, 1);");
-    }
-  }
-
-  lines.push("");
-
-  // Apply easing
-  lines.push("    // Apply easing function");
-  lines.push(
-    `    const eased = ease${toPascalCase(pattern.easing.replace(/[^a-zA-Z]/g, ""))}(progress);`
-  );
-  lines.push("");
-
-  // Position animations
-  if (positionProps.length > 0) {
-    lines.push("    // Position animation");
-    for (const prop of positionProps) {
-      const axis =
-        prop.name.replace(/translate|[XYZ]/gi, "").toLowerCase() ||
-        prop.name.charAt(prop.name.length - 1).toLowerCase();
-      const fromVal = parseFloat(prop.from) || 0;
-      const toVal = parseFloat(prop.to) || 0;
-      lines.push(
-        `    meshRef.current.position.${axis} = ${fromVal} + (${toVal} - ${fromVal}) * eased;`
-      );
-    }
-  }
-
-  // Rotation animations
-  if (rotationProps.length > 0) {
-    lines.push("    // Rotation animation");
-    for (const prop of rotationProps) {
-      const axis = prop.name.replace("rotate", "").toLowerCase() || "y";
-      const fromVal = parseFloat(prop.from) || 0;
-      const toVal = parseFloat(prop.to) || Math.PI * 2;
-      lines.push(
-        `    meshRef.current.rotation.${axis} = ${fromVal} + (${toVal} - ${fromVal}) * eased;`
-      );
-    }
-  }
-
-  // Scale animations
-  const scaleProp = scaleProps[0];
-  if (scaleProp) {
-    lines.push("    // Scale animation");
-    const fromVal = parseFloat(scaleProp.from) || 1;
-    const toVal = parseFloat(scaleProp.to) || 1;
-    lines.push(`    const scaleValue = ${fromVal} + (${toVal} - ${fromVal}) * eased;`);
-    lines.push("    meshRef.current.scale.setScalar(scaleValue);");
-  }
-
-  // Opacity animations (material)
-  const opacityProp = opacityProps[0];
-  if (opacityProp) {
-    lines.push("    // Opacity animation");
-    const fromVal = parseFloat(opacityProp.from) || 1;
-    const toVal = parseFloat(opacityProp.to) || 0;
-    lines.push(`    if (meshRef.current.material && 'opacity' in meshRef.current.material) {`);
-    lines.push(
-      `      (meshRef.current.material as any).opacity = ${fromVal} + (${toVal} - ${fromVal}) * eased;`
-    );
-    lines.push("    }");
-  }
-
-  lines.push("  });");
-  lines.push("");
-  lines.push("  return (");
-  lines.push("    <mesh ref={meshRef}>");
-  lines.push("      {children || (");
-  lines.push("        <>");
-  lines.push("          <boxGeometry args={[1, 1, 1]} />");
-  lines.push('          <meshStandardMaterial color="#4f46e5" transparent />');
-  lines.push("        </>");
-  lines.push("      )}");
-  lines.push("    </mesh>");
-  lines.push("  );");
-  lines.push("};");
-  lines.push("");
-
-  // Easing function
-  lines.push("// Easing function");
-  const easingName = `ease${toPascalCase(pattern.easing.replace(/[^a-zA-Z]/g, ""))}`;
-  lines.push(`function ${easingName}(t${ts ? ": number" : ""})${ts ? ": number" : ""} {`);
-  switch (pattern.easing) {
-    case "ease-in":
-      lines.push("  return t * t;");
-      break;
-    case "ease-out":
-      lines.push("  return t * (2 - t);");
-      break;
-    case "ease-in-out":
-      lines.push("  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;");
-      break;
-    case "linear":
-      lines.push("  return t;");
-      break;
-    default:
-      // Default to ease-out for unknown easing
-      lines.push("  return t * (2 - t);");
-  }
-  lines.push("}");
-  lines.push("");
-
-  // Main Scene Component
-  if (ts) {
-    lines.push(`interface ${componentName}Props {`);
-    lines.push("  className?: string;");
-    lines.push("}");
-    lines.push("");
-  }
-
-  lines.push(
-    `export const ${componentName}${ts ? `: FC<${componentName}Props>` : ""} = ({ className }) => {`
-  );
-
-  if (options.includeReducedMotion) {
-    lines.push("  // Check for reduced motion preference");
-    lines.push('  const prefersReducedMotion = typeof window !== "undefined"');
-    lines.push('    && window.matchMedia("(prefers-reduced-motion: reduce)").matches;');
-    lines.push("");
-    lines.push("  if (prefersReducedMotion) {");
-    lines.push("    return (");
-    lines.push(
-      '      <div className={className} style={{ width: "100%", height: "400px", background: "#1a1a2e" }}>'
-    );
-    lines.push("        {/* Static fallback for reduced motion */}");
-    lines.push("      </div>");
-    lines.push("    );");
-    lines.push("  }");
-    lines.push("");
-  }
-
-  lines.push("  return (");
-  lines.push('    <div className={className} style={{ width: "100%", height: "400px" }}>');
-  lines.push("      <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>");
-  lines.push("        <ambientLight intensity={0.5} />");
-  lines.push("        <pointLight position={[10, 10, 10]} />");
-  lines.push(`        <${animatedObjectName} />`);
-  lines.push("      </Canvas>");
-  lines.push("    </div>");
-  lines.push("  );");
-  lines.push("};");
-
-  const code = lines.join("\n");
-  const dependencies = isScroll
-    ? ["@react-three/fiber", "@react-three/drei", "three"]
-    : ["@react-three/fiber", "three"];
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: false,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies,
-    },
-  };
-}
-
-/**
- * Lottie (lottie-react) 生成
- *
- * lottie-react を使用したアニメーションコンポーネントを生成
- * - アニメーションデータ構造生成（Lottie JSON形式）
- * - React コンポーネントラッパー
- * - TypeScript 型定義付き
- */
-function generateLottie(
-  pattern: MotionPatternInput,
-  options: ImplementationOptions
-): GenerationResult {
-  const lines: string[] = [];
-  const componentName = options.componentName || toPascalCase(pattern.name) + "Animation";
-  const ts = options.typescript ?? true;
-
-  // Imports
-  lines.push("import Lottie from 'lottie-react';");
-  if (ts) {
-    lines.push("import type { FC } from 'react';");
-    lines.push("import type { LottieComponentProps } from 'lottie-react';");
-  }
-  lines.push("");
-
-  // Convert CSS animation properties to Lottie keyframes format
-  // Note: This generates a simplified Lottie JSON structure
-  lines.push("/**");
-  lines.push(" * Lottie Animation Data");
-  lines.push(" * Generated from CSS animation pattern.");
-  lines.push(
-    " * For complex animations, replace with actual Lottie JSON export from After Effects/Figma."
-  );
-  lines.push(" */");
-
-  // Generate Lottie-like animation data structure
-  const durationInFrames = Math.round((pattern.duration / 1000) * 60); // 60fps
-  const startFrame = Math.round((pattern.delay / 1000) * 60);
-
-  lines.push(`const ${pattern.name}AnimationData = {`);
-  lines.push('  v: "5.7.8",');
-  lines.push(`  fr: 60,`); // Frame rate
-  lines.push(`  ip: ${startFrame},`); // In point
-  lines.push(`  op: ${startFrame + durationInFrames},`); // Out point
-  lines.push("  w: 200,"); // Width
-  lines.push("  h: 200,"); // Height
-  lines.push('  nm: "' + pattern.name + '",');
-  lines.push("  ddd: 0,");
-  lines.push("  assets: [],");
-  lines.push("  layers: [");
-  lines.push("    {");
-  lines.push("      ddd: 0,");
-  lines.push("      ind: 1,");
-  lines.push("      ty: 4,"); // Shape layer
-  lines.push(`      nm: "${pattern.name}",`);
-  lines.push(`      sr: 1,`);
-  lines.push("      ks: {"); // Transform
-
-  // Opacity animation
-  const opacityProp = pattern.properties.find((p) => p.name === "opacity");
-  if (opacityProp) {
-    const fromOpacity = parseFloat(opacityProp.from) * 100 || 0;
-    const toOpacity = parseFloat(opacityProp.to) * 100 || 100;
-    lines.push("        o: {"); // Opacity
-    lines.push("          a: 1,"); // Animated
-    lines.push("          k: [");
-    lines.push(
-      `            { i: { x: [0.4], y: [1] }, o: { x: [0.6], y: [0] }, t: ${startFrame}, s: [${fromOpacity}] },`
-    );
-    lines.push(`            { t: ${startFrame + durationInFrames}, s: [${toOpacity}] }`);
-    lines.push("          ]");
-    lines.push("        },");
-  } else {
-    lines.push("        o: { a: 0, k: 100 },");
-  }
-
-  // Position animation (transform: translate)
-  const translateXProp = pattern.properties.find((p) => p.name === "translateX");
-  const translateYProp = pattern.properties.find((p) => p.name === "translateY");
-  if (translateXProp || translateYProp) {
-    const fromX = translateXProp ? parseFloat(translateXProp.from) || 0 : 0;
-    const toX = translateXProp ? parseFloat(translateXProp.to) || 0 : 0;
-    const fromY = translateYProp ? parseFloat(translateYProp.from) || 0 : 0;
-    const toY = translateYProp ? parseFloat(translateYProp.to) || 0 : 0;
-    lines.push("        p: {"); // Position
-    lines.push("          a: 1,");
-    lines.push("          k: [");
-    lines.push(
-      `            { i: { x: 0.4, y: 1 }, o: { x: 0.6, y: 0 }, t: ${startFrame}, s: [${100 + fromX}, ${100 + fromY}, 0] },`
-    );
-    lines.push(
-      `            { t: ${startFrame + durationInFrames}, s: [${100 + toX}, ${100 + toY}, 0] }`
-    );
-    lines.push("          ]");
-    lines.push("        },");
-  } else {
-    lines.push("        p: { a: 0, k: [100, 100, 0] },");
-  }
-
-  // Scale animation
-  const scaleProp = pattern.properties.find((p) => p.name === "scale");
-  if (scaleProp) {
-    const fromScale = parseFloat(scaleProp.from) * 100 || 100;
-    const toScale = parseFloat(scaleProp.to) * 100 || 100;
-    lines.push("        s: {"); // Scale
-    lines.push("          a: 1,");
-    lines.push("          k: [");
-    lines.push(
-      `            { i: { x: [0.4], y: [1] }, o: { x: [0.6], y: [0] }, t: ${startFrame}, s: [${fromScale}, ${fromScale}, 100] },`
-    );
-    lines.push(
-      `            { t: ${startFrame + durationInFrames}, s: [${toScale}, ${toScale}, 100] }`
-    );
-    lines.push("          ]");
-    lines.push("        },");
-  } else {
-    lines.push("        s: { a: 0, k: [100, 100, 100] },");
-  }
-
-  // Rotation animation
-  const rotateProp = pattern.properties.find((p) => p.name === "rotate");
-  if (rotateProp) {
-    const fromRotate = parseFloat(rotateProp.from) || 0;
-    const toRotate = parseFloat(rotateProp.to) || 0;
-    lines.push("        r: {"); // Rotation
-    lines.push("          a: 1,");
-    lines.push("          k: [");
-    lines.push(
-      `            { i: { x: [0.4], y: [1] }, o: { x: [0.6], y: [0] }, t: ${startFrame}, s: [${fromRotate}] },`
-    );
-    lines.push(`            { t: ${startFrame + durationInFrames}, s: [${toRotate}] }`);
-    lines.push("          ]");
-    lines.push("        },");
-  } else {
-    lines.push("        r: { a: 0, k: 0 },");
-  }
-
-  lines.push("        a: { a: 0, k: [100, 100, 0] }"); // Anchor point
-  lines.push("      },");
-
-  // Shape contents (simple rectangle)
-  lines.push("      shapes: [");
-  lines.push("        {");
-  lines.push('          ty: "rc",'); // Rectangle
-  lines.push("          d: 1,");
-  lines.push("          s: { a: 0, k: [100, 100] },"); // Size
-  lines.push("          p: { a: 0, k: [0, 0] },"); // Position
-  lines.push("          r: { a: 0, k: 8 },"); // Corner radius
-  lines.push('          nm: "Rectangle"');
-  lines.push("        },");
-  lines.push("        {");
-  lines.push('          ty: "fl",'); // Fill
-  lines.push("          c: { a: 0, k: [0.31, 0.275, 0.898, 1] },"); // Color (#4f46e5)
-  lines.push("          o: { a: 0, k: 100 },");
-  lines.push('          nm: "Fill"');
-  lines.push("        }");
-  lines.push("      ],");
-  lines.push(`      ip: ${startFrame},`);
-  lines.push(`      op: ${startFrame + durationInFrames},`);
-  lines.push("      st: 0");
-  lines.push("    }");
-  lines.push("  ]");
-  lines.push("};");
-  lines.push("");
-
-  // React component
-  if (ts) {
-    lines.push(`interface ${componentName}Props {`);
-    lines.push("  className?: string;");
-    lines.push("  loop?: boolean;");
-    lines.push("  autoplay?: boolean;");
-    lines.push("}");
-    lines.push("");
-  }
-
-  lines.push(`export const ${componentName}${ts ? `: FC<${componentName}Props>` : ""} = ({`);
-  lines.push("  className,");
-  lines.push(`  loop = ${pattern.iterations === "infinite"},`);
-  lines.push("  autoplay = true,");
-  lines.push("}) => {");
-
-  if (options.includeReducedMotion) {
-    lines.push("  // Check for reduced motion preference");
-    lines.push('  const prefersReducedMotion = typeof window !== "undefined"');
-    lines.push('    && window.matchMedia("(prefers-reduced-motion: reduce)").matches;');
-    lines.push("");
-    lines.push("  if (prefersReducedMotion) {");
-    lines.push("    return (");
-    lines.push("      <div className={className} style={{ width: 200, height: 200 }}>");
-    lines.push("        {/* Static fallback for reduced motion */}");
-    lines.push(
-      '        <div style={{ width: 100, height: 100, background: "#4f46e5", borderRadius: 8, margin: "auto" }} />'
-    );
-    lines.push("      </div>");
-    lines.push("    );");
-    lines.push("  }");
-    lines.push("");
-  }
-
-  lines.push("  return (");
-  lines.push("    <Lottie");
-  lines.push(`      animationData={${pattern.name}AnimationData}`);
-  lines.push("      loop={loop}");
-  lines.push("      autoplay={autoplay}");
-  lines.push("      className={className}");
-  lines.push("      style={{ width: 200, height: 200 }}");
-  lines.push("    />");
-  lines.push("  );");
-  lines.push("};");
-  lines.push("");
-
-  // Usage instructions
-  lines.push("/**");
-  lines.push(" * Usage:");
-  lines.push(` * import { ${componentName} } from './path-to-component';`);
-  lines.push(" *");
-  lines.push(` * <${componentName} />`);
-  lines.push(` * <${componentName} loop={false} autoplay={true} />`);
-  lines.push(" *");
-  lines.push(" * Note: For production use, export your animation from After Effects with");
-  lines.push(" * Bodymovin plugin or from Figma, and replace the animationData above.");
-  lines.push(" */");
-
-  const code = lines.join("\n");
-
-  return {
-    code,
-    metadata: {
-      linesOfCode: countLines(code),
-      hasKeyframes: false,
-      hasReducedMotion: options.includeReducedMotion ?? true,
-      dependencies: ["lottie-react"],
-    },
-  };
-}
-
-/**
- * メイン生成関数
- */
-function generateImplementation(
-  pattern: MotionPatternInput,
-  format: ImplementationFormat,
-  options: ImplementationOptions
-): GenerationResult {
-  switch (format) {
-    case "css":
-      return generateCSS(pattern, options);
-    case "css-module":
-      return generateCSSModule(pattern, options);
-    case "tailwind":
-      return generateTailwind(pattern, options);
-    case "styled-components":
-      return generateStyledComponents(pattern, options);
-    case "emotion":
-      return generateEmotion(pattern, options);
-    case "framer-motion":
-      return generateFramerMotion(pattern, options);
-    case "gsap":
-      return generateGSAP(pattern, options);
-    case "three-js":
-      return generateThreeJS(pattern, options);
-    case "lottie":
-      return generateLottie(pattern, options);
-    default:
-      return generateCSS(pattern, options);
-  }
-}
-
-// =====================================================
-// 実装コード生成ヘルパー（v0.1.0: include_implementation用）
-// =====================================================
-
-/**
- * MotionTypeをMotionPatternInput用のtypeに変換
- * @param type MotionType
- * @returns MotionPatternInputType
- */
-function mapMotionType(type: MotionPattern["type"]): MotionPatternInput["type"] {
-  switch (type) {
-    case "css_animation":
-    case "library_animation":
-    case "video_motion":
-      return "animation";
-    case "css_transition":
-      return "transition";
-    case "keyframes":
-      return "keyframe";
-    default:
-      return "animation";
-  }
-}
-
-/**
- * MotionPatternからMotionPatternInputに変換
- * @param pattern 検索結果のパターン
- * @returns コード生成用のパターン入力
- */
-function patternToPatternInput(pattern: MotionPattern): MotionPatternInput {
-  // animationオブジェクトから値を抽出、easingはオブジェクトの可能性あり
-  const duration = pattern.animation?.duration ?? 300;
-  const easingConfig = pattern.animation?.easing;
-  // easingConfigがオブジェクトの場合はtypeまたはcubicBezierを使用
-  let easing = "ease";
-  if (easingConfig) {
-    if (easingConfig.cubicBezier) {
-      easing = `cubic-bezier(${easingConfig.cubicBezier.join(", ")})`;
-    } else if (easingConfig.type && easingConfig.type !== "cubic-bezier") {
-      easing = easingConfig.type;
-    }
-  }
-  const delay = pattern.animation?.delay ?? 0;
-  const iterations = pattern.animation?.iterations ?? 1;
-  const direction = pattern.animation?.direction ?? "normal";
-  const fillMode = pattern.animation?.fillMode ?? "none";
-
-  return {
-    type: mapMotionType(pattern.type),
-    name: pattern.name ?? "unnamed",
-    duration,
-    delay,
-    easing,
-    iterations,
-    direction,
-    fillMode,
-    // propertiesのpropertyをnameに変換
-    properties: pattern.properties?.map((p) => ({
-      name: p.property ?? "opacity",
-      from: String(p.from ?? "0"),
-      to: String(p.to ?? "1"),
-    })) ?? [{ name: "opacity", from: "0", to: "1" }],
-  };
-}
-
-/**
- * 検索結果のパターンから実装コード情報を生成
- * @param pattern 検索結果のパターン
- * @returns 実装コード情報
- */
-function generateImplementationForPattern(pattern: MotionPattern): MotionImplementation {
-  const patternInput = patternToPatternInput(pattern);
-  const implementation: MotionImplementation = {};
-
-  // transitionタイプの場合（css_transition）
-  if (pattern.type === "css_transition") {
-    const props = patternInput.properties.map((p) => p.name).join(", ");
-    implementation.transition = `transition: ${props} ${formatDuration(patternInput.duration)} ${patternInput.easing};`;
-    return implementation;
-  }
-
-  // animation/@keyframesタイプの場合
-  // @keyframes生成
-  const keyframeLines: string[] = [];
-  keyframeLines.push(`@keyframes ${pattern.name} {`);
-  keyframeLines.push("  from {");
-  for (const prop of patternInput.properties) {
-    keyframeLines.push(`    ${prop.name}: ${prop.from};`);
-  }
-  keyframeLines.push("  }");
-  keyframeLines.push("  to {");
-  for (const prop of patternInput.properties) {
-    keyframeLines.push(`    ${prop.name}: ${prop.to};`);
-  }
-  keyframeLines.push("  }");
-  keyframeLines.push("}");
-  implementation.keyframes = keyframeLines.join("\n");
-
-  // animationプロパティ生成
-  implementation.animation = `animation: ${pattern.name} ${formatDuration(patternInput.duration)} ${patternInput.easing};`;
-
-  // Tailwindクラス生成
-  implementation.tailwind = `animate-${pattern.name}`;
-
-  return implementation;
-}
-
-// =====================================================
-// 多様性フィルタリング (MMR強化)
-// =====================================================
-
-/**
- * 2つの文字列の類似度を計算（Levenshtein距離ベース）
- * @param a 比較元文字列
- * @param b 比較先文字列
- * @returns 類似度 (0.0-1.0)
- */
-function calculateNameSimilarity(a: string | undefined, b: string | undefined): number {
-  if (!a || !b) {
-    return 0;
-  }
-  const normalizedA = a.toLowerCase().replace(/[-_\s]/g, "");
-  const normalizedB = b.toLowerCase().replace(/[-_\s]/g, "");
-
-  if (normalizedA === normalizedB) {
-    return 1.0;
-  }
-
-  // 共通のプレフィックスをチェック（例: fadeIn, fadeInUp → 高い類似度）
-  let commonPrefixLen = 0;
-  const minLen = Math.min(normalizedA.length, normalizedB.length);
-  for (let i = 0; i < minLen; i++) {
-    if (normalizedA[i] === normalizedB[i]) {
-      commonPrefixLen++;
-    } else {
-      break;
-    }
-  }
-
-  // プレフィックス類似度（4文字以上の共通プレフィックスで高い類似度）
-  if (commonPrefixLen >= 4) {
-    return 0.6 + 0.4 * (commonPrefixLen / Math.max(normalizedA.length, normalizedB.length));
-  }
-
-  // 部分文字列チェック
-  if (normalizedA.includes(normalizedB) || normalizedB.includes(normalizedA)) {
-    return 0.7;
-  }
-
-  return 0;
-}
-
-/**
- * 2つのモーションパターン間の類似度を計算
- * 名前、カテゴリ、トリガー、アニメーション設定を比較
- * @param a 比較元パターン
- * @param b 比較先パターン
- * @returns 類似度 (0.0-1.0)
- */
-function calculatePatternSimilarity(a: MotionSearchResultItem, b: MotionSearchResultItem): number {
-  let similarityScore = 0;
-  let weightTotal = 0;
-
-  // 名前の類似度 (重み: 0.25) - v0.1.0追加
-  const nameWeight = 0.25;
-  const nameSimilarity = calculateNameSimilarity(a.pattern.name, b.pattern.name);
-  similarityScore += nameWeight * nameSimilarity;
-  weightTotal += nameWeight;
-
-  // カテゴリの一致 (重み: 0.25)
-  const categoryWeight = 0.25;
-  if (a.pattern.category === b.pattern.category) {
-    similarityScore += categoryWeight;
-  }
-  weightTotal += categoryWeight;
-
-  // トリガーの一致 (重み: 0.15)
-  const triggerWeight = 0.15;
-  if (a.pattern.trigger === b.pattern.trigger) {
-    similarityScore += triggerWeight;
-  }
-  weightTotal += triggerWeight;
-
-  // タイプの一致 (重み: 0.1)
-  const typeWeight = 0.1;
-  if (a.pattern.type === b.pattern.type) {
-    similarityScore += typeWeight;
-  }
-  weightTotal += typeWeight;
-
-  // duration類似度 (重み: 0.1)
-  const durationWeight = 0.1;
-  const durationA = a.pattern.animation?.duration ?? 0;
-  const durationB = b.pattern.animation?.duration ?? 0;
-  if (durationA > 0 && durationB > 0) {
-    const durationRatio = Math.min(durationA, durationB) / Math.max(durationA, durationB);
-    similarityScore += durationWeight * durationRatio;
-  } else if (durationA === 0 && durationB === 0) {
-    similarityScore += durationWeight;
-  }
-  weightTotal += durationWeight;
-
-  // easing類似度 (重み: 0.075)
-  const easingWeight = 0.075;
-  const easingA = a.pattern.animation?.easing?.type ?? "unknown";
-  const easingB = b.pattern.animation?.easing?.type ?? "unknown";
-  if (easingA === easingB) {
-    similarityScore += easingWeight;
-  }
-  weightTotal += easingWeight;
-
-  // プロパティ類似度 (重み: 0.075)
-  const propertiesWeight = 0.075;
-  const propsA = new Set(a.pattern.properties?.map((p) => p.property) ?? []);
-  const propsB = new Set(b.pattern.properties?.map((p) => p.property) ?? []);
-  if (propsA.size > 0 && propsB.size > 0) {
-    const intersection = [...propsA].filter((p) => propsB.has(p)).length;
-    const union = new Set([...propsA, ...propsB]).size;
-    similarityScore += propertiesWeight * (intersection / union);
-  } else if (propsA.size === 0 && propsB.size === 0) {
-    similarityScore += propertiesWeight;
-  }
-  weightTotal += propertiesWeight;
-
-  return weightTotal > 0 ? similarityScore / weightTotal : 0;
-}
-
-/**
- * MMR (Maximal Marginal Relevance) アルゴリズムで多様性フィルタリングを適用
- *
- * MMRスコア = λ * relevance - (1-λ) * max_similarity_to_selected
- *
- * @param results 検索結果配列（類似度順）
- * @param lambda λ値（0.0-1.0）- 0.0で最大多様性、1.0で関連度のみ
- * @param ensureCategoryDiversity カテゴリ分散を強制するか
- * @param limit 最大結果数
- * @returns フィルタリング後の検索結果
- */
-function applyDiversityFilter(
-  results: MotionSearchResultItem[],
-  lambda: number,
-  ensureCategoryDiversity: boolean,
-  limit: number
-): MotionSearchResultItem[] {
-  if (results.length === 0) {
-    return results;
-  }
-
-  // λ=1.0 の場合、多様性フィルタなし（関連度順のまま）
-  if (lambda >= 1.0) {
-    return results.slice(0, limit);
-  }
-
-  // λ=0.0 かつ ensureCategoryDiversity=false の場合、類似度順でフィルタリングのみ
-  // ただし、同一名パターンは除外
-  if (lambda <= 0.0 && !ensureCategoryDiversity) {
-    const selected: MotionSearchResultItem[] = [];
-    const usedNames = new Set<string>();
-
-    for (const result of results) {
-      if (selected.length >= limit) break;
-
-      const name = result.pattern.name?.toLowerCase() ?? "";
-      if (!usedNames.has(name)) {
-        selected.push(result);
-        if (name) usedNames.add(name);
-      }
-    }
-    return selected;
-  }
-
-  // MMRアルゴリズムによる選択
-  const selected: MotionSearchResultItem[] = [];
-  const remaining = [...results];
-  const usedCategories = new Map<MotionCategory, number>();
-
-  while (remaining.length > 0 && selected.length < limit) {
-    let bestIdx = 0;
-    let bestScore = -Infinity;
-
-    for (let i = 0; i < remaining.length; i++) {
-      const candidate = remaining[i];
-      if (!candidate) continue;
-
-      // 関連度スコア（検索結果の類似度）
-      const relevance = candidate.similarity;
-
-      // 選択済み結果との最大類似度を計算
-      let maxSimilarityToSelected = 0;
-      for (const sel of selected) {
-        const sim = calculatePatternSimilarity(sel, candidate);
-        if (sim > maxSimilarityToSelected) {
-          maxSimilarityToSelected = sim;
-        }
-      }
-
-      // MMRスコア計算: λ * relevance - (1-λ) * max_similarity_to_selected
-      let mmrScore = lambda * relevance - (1 - lambda) * maxSimilarityToSelected;
-
-      // カテゴリ分散ボーナス（ensureCategoryDiversity=true の場合）
-      if (ensureCategoryDiversity) {
-        const category = candidate.pattern.category;
-        const categoryCount = usedCategories.get(category) ?? 0;
-
-        // 未使用カテゴリにはボーナス
-        if (categoryCount === 0) {
-          mmrScore += 0.1;
-        } else if (categoryCount >= 2) {
-          // 同一カテゴリ3件以上は大きくペナルティ
-          mmrScore -= 0.2 * categoryCount;
-        }
-      }
-
-      if (mmrScore > bestScore) {
-        bestScore = mmrScore;
-        bestIdx = i;
-      }
-    }
-
-    // 最良候補を選択
-    const chosenItem = remaining.splice(bestIdx, 1)[0];
-    if (!chosenItem) break;
-    selected.push(chosenItem);
-
-    // カテゴリカウントを更新
-    const category = chosenItem.pattern.category;
-    usedCategories.set(category, (usedCategories.get(category) ?? 0) + 1);
-  }
-
-  if (isDevelopment()) {
-    logger.info("[MCP Tool] motion.search MMR diversity filter applied", {
-      originalCount: results.length,
-      filteredCount: selected.length,
-      lambda,
-      ensureCategoryDiversity,
-      categoryDistribution: Object.fromEntries(usedCategories),
-    });
-  }
-
-  return selected;
-}
-
-/**
- * 検索結果に実装コードを付与
- * @param results 検索結果配列
- * @returns 実装コードが付与された検索結果
- */
-function enrichResultsWithImplementation(
-  results: MotionSearchResultItem[]
-): MotionSearchResultItem[] {
-  return results.map((result) => ({
-    ...result,
-    implementation: generateImplementationForPattern(result.pattern),
-  }));
-}
+const prismaClientDI = createDIFactory<IPrismaClient>("MotionSearchPrismaClient");
+export const setMotionSearchPrismaClientFactory = prismaClientDI.set;
+export const resetMotionSearchPrismaClientFactory = prismaClientDI.reset;
 
 // =====================================================
 // ハンドラー
@@ -1861,14 +193,12 @@ export async function motionSearchHandler(input: unknown): Promise<MotionSearchO
   try {
     validated = motionSearchInputSchema.parse(input);
   } catch (error) {
-    if (isDevelopment()) {
-      logger.error("[MCP Tool] motion.search validation error", { error });
-    }
+    logger.warn("[MCP Tool] motion.search validation error", { error: (error as Error).message });
     return {
       success: false,
       error: {
         code: MOTION_SEARCH_ERROR_CODES.VALIDATION_ERROR,
-        message: error instanceof Error ? error.message : "Invalid input",
+        message: sanitizeErrorMessage(error),
       },
     };
   }
@@ -1889,8 +219,18 @@ export async function motionSearchHandler(input: unknown): Promise<MotionSearchO
  * action: 'search' の処理
  */
 async function handleSearchAction(validated: MotionSearchInput): Promise<MotionSearchOutput> {
+  // Search result cache check / 検索キャッシュチェック
+  const cacheKey = generateCacheKey(
+    "motion.search",
+    validated as unknown as Record<string, unknown>
+  );
+  const cached = getCachedResult<MotionSearchOutput>(cacheKey);
+  if (cached) {
+    return cached;
+  }
+
   // サービスファクトリのチェック
-  if (!serviceFactory) {
+  if (!serviceFactoryDI.get()) {
     if (isDevelopment()) {
       logger.error("[MCP Tool] motion.search service factory not set");
     }
@@ -1904,7 +244,7 @@ async function handleSearchAction(validated: MotionSearchInput): Promise<MotionS
   }
 
   try {
-    const service = serviceFactory();
+    const service = serviceFactoryDI.get()!();
 
     // 検索パラメータを構築（v0.1.0: JSアニメーション検索パラメータ追加、v0.1.0: WebGLアニメーション検索パラメータ追加、v0.1.0: include_implementation追加）
     const searchParams: MotionSearchParams = {
@@ -1964,7 +304,7 @@ async function handleSearchAction(validated: MotionSearchInput): Promise<MotionS
     results = (await applyPreferenceReranking(
       resultsWithId,
       validated.profile_id,
-      prismaClientFactory,
+      prismaClientDI.get(),
       "motion",
       "motion.search"
     )) as typeof results;
@@ -1980,7 +320,7 @@ async function handleSearchAction(validated: MotionSearchInput): Promise<MotionS
       });
     }
 
-    return {
+    const result: MotionSearchOutput = {
       success: true,
       data: {
         results,
@@ -1988,10 +328,11 @@ async function handleSearchAction(validated: MotionSearchInput): Promise<MotionS
         query: searchResult.query,
       },
     };
+    // Cache successful results / 成功結果をキャッシュ
+    setCachedResult(cacheKey, result);
+    return result;
   } catch (error) {
-    if (isDevelopment()) {
-      logger.error("[MCP Tool] motion.search error", { error });
-    }
+    logger.warn("[MCP Tool] motion.search error", { error: (error as Error).message });
 
     // エラータイプに基づいてエラーコードを決定
     const errorCode =
@@ -2003,7 +344,7 @@ async function handleSearchAction(validated: MotionSearchInput): Promise<MotionS
       success: false,
       error: {
         code: errorCode,
-        message: error instanceof Error ? error.message : "Search failed",
+        message: sanitizeErrorMessage(error),
       },
     };
   }
@@ -2059,31 +400,29 @@ async function handleGenerateAction(validated: MotionSearchInput): Promise<Motio
           });
         }
       } catch (error) {
-        if (isDevelopment()) {
-          logger.warn("[MCP Tool] motion.search duplicate check failed, continuing generation", {
-            error: error instanceof Error ? error.message : "Unknown error",
-          });
-        }
+        logger.warn("[MCP Tool] motion.search duplicate check failed, continuing generation", {
+          error: (error as Error).message,
+        });
         // 重複チェック失敗時は警告のみでコード生成は続行
       }
     }
 
     // サービス経由で生成（DIパターン）
     let result: GenerationResult | null = null;
-    const service = implementationServiceFactory?.();
+    const service = implementationServiceDI.get()?.();
 
     if (service?.generate) {
       try {
         result = service.generate(pattern, format, options);
       } catch (error) {
-        if (isDevelopment()) {
-          logger.error("[MCP Tool] motion.search generate service error", { error });
-        }
+        logger.warn("[MCP Tool] motion.search generate service error", {
+          error: (error as Error).message,
+        });
         return {
           success: false,
           error: {
             code: MOTION_MCP_ERROR_CODES.INTERNAL_ERROR,
-            message: error instanceof Error ? error.message : "Generation failed",
+            message: sanitizeErrorMessage(error),
           },
         };
       }
@@ -2120,14 +459,12 @@ async function handleGenerateAction(validated: MotionSearchInput): Promise<Motio
       },
     };
   } catch (error) {
-    if (isDevelopment()) {
-      logger.error("[MCP Tool] motion.search generate error", { error });
-    }
+    logger.warn("[MCP Tool] motion.search generate error", { error: (error as Error).message });
     return {
       success: false,
       error: {
         code: MOTION_MCP_ERROR_CODES.INTERNAL_ERROR,
-        message: error instanceof Error ? error.message : "Generation failed",
+        message: sanitizeErrorMessage(error),
       },
     };
   }
@@ -2274,6 +611,33 @@ export const motionSearchToolDefinition = {
             enum: ["load", "hover", "scroll", "click", "focus", "custom"],
             description: "トリガーでフィルタリング",
           },
+          webPageId: {
+            type: "string",
+            format: "uuid",
+            description: "WebページIDでフィルター / Filter by web page ID",
+          },
+          webPageUrl: {
+            type: "string",
+            format: "uri",
+            description: "WebページURLでフィルター / Filter by web page URL",
+          },
+          industry: {
+            type: "string",
+            description: "業種フィルター（例: tech, finance, healthcare） / Industry filter",
+            maxLength: 100,
+          },
+          audience: {
+            type: "string",
+            description:
+              "ターゲットオーディエンス（例: b2b, b2c, enterprise） / Target audience filter",
+            maxLength: 100,
+          },
+          tags: {
+            type: "array",
+            items: { type: "string", maxLength: 50 },
+            maxItems: 10,
+            description: "タグフィルター / Tag filter",
+          },
         },
       },
       limit: {