@monoharada/wcf-mcp 0.2.0 → 0.5.0

package/README.md

@@ -100,7 +100,24 @@ claude mcp add wcf -- npx @monoharada/wcf-mcp
 
 | ツール | 説明 |
 |--------|------|
-| `validate_markup` | HTML スニペットを検証し、未知要素・不正enum値・不正スロット名・必須属性欠落（error）、未知属性・トークン誤用・`aria-live`/`role="alert"` 誤用・親子関係違反・空インタラクティブ要素（warning）を検出し、`suggestion` を返す |
+| `validate_markup` | HTML スニペットを検証し、セマンティック検証（下表）で `suggestion` 付き診断を返す |
+
+#### validate_markup 検出コード一覧
+
+| Code | Severity | 説明 | 例 |
+|------|----------|------|----|
+| `unknownElement` | error | CEM に未登録のカスタム要素。prefix 補完提案あり | `<input-text>` → `dads-input-text` |
+| `unknownAttribute` | warning | CEM に未登録の属性 | `<dads-button foo="x">` |
+| `invalidEnumValue` | error | enum 属性に不正な値 | `type="banana"` |
+| `invalidSlotName` | error | CEM に未登録のスロット名 | `slot="nonexistent"` |
+| `missingRequiredAttribute` | error | フォーム要素の必須属性欠落 | `<dads-input-text>` without `label` |
+| `orphanedChildComponent` | warning | 親要素なしの子コンポーネント | `<dads-breadcrumb-item>` without `<dads-breadcrumb>` |
+| `emptyInteractiveElement` | warning | accessible name が空の操作要素 | `<dads-button></dads-button>` |
+| `canonicalLowercaseRecommendation` | warning | 大文字を含む属性名（lowercase が canonical） | `Variant="solid"` → `variant` |
+| `tokenMisuse` | warning | inline style でのトークン誤用 | `color: #000` → `var(--color-*)` |
+| `ariaLiveNotRecommended` | warning | `aria-live` の使用（DADS 非推奨） | `aria-live="polite"` |
+| `roleAlertNotRecommended` | warning | `role="alert"` の使用（DADS 非推奨） | `role="alert"` |
+| `forbiddenAttribute` | warning | 禁止属性 | `placeholder` |
 
 ### UI パターン
 
@@ -355,6 +372,39 @@ Claude Desktop 設定例:
 prefix: "myui" → dads-button → myui-button
 ```
 
+## v0.3.0 新機能 — ランタイムセットアップ情報
+
+v0.3.0 では、AI エージェントが CDN 非対応の vendor-local 配信モデルを正しく理解できるよう、3つのツールにランタイムセットアップ情報を追加しました。
+
+### `get_design_system_overview` — setupInfo 新フィールド
+
+| フィールド | 型 | 説明 |
+|-----------|-----|------|
+| `noCDN` | `true` | CDN 配信が利用不可であることを示すフラグ |
+| `deliveryModel` | `"vendor-local"` | 配信モデルの種別（将来拡張可能） |
+| `importMapHint` | `string` | import map のパターン説明 |
+| `bootScript` | `string` | boot.js の役割説明 |
+| `vendorSetup` | `object` | `init`/`add`/`workflow` の2段階セットアップガイド |
+| `htmlSetup` | `string` | import map + boot.js を含む完全な HTML head テンプレート |
+
+> 既存の `htmlBoilerplate` は変更なし（後方互換性）
+
+### `get_install_recipe` — 新フィールド
+
+| フィールド | 型 | 説明 |
+|-----------|-----|------|
+| `usageContext` | `"body-only"` | `usageSnippet` が body 用 HTML であることを明示 |
+| `vendorHint` | `object` | `install`（CLI コマンド）、`importMap`（テンプレート）、`boot`（ブートスクリプト説明）。`importmap`（小文字 m）は非推奨エイリアス — v1.0 で削除予定 |
+
+### `get_pattern_recipe` — 新フィールド
+
+| フィールド | 型 | 説明 |
+|-----------|-----|------|
+| `entryHints` | `string[]` | パターンのエントリポイント（`["boot"]` など） |
+| `scaffoldHint` | `object` | `doctype`、`importMap`、`bootScript`、`noscript`、`serveOverHttp` を含むページ雛形情報 |
+
+> `scaffoldHint.serveOverHttp` は `file://` プロトコルでの実行を防止するガイダンスです。
+
 ## v0.2.0 マイグレーション
 
 ### `list_components` のデフォルトページネーション変更

package/core.mjs

@@ -145,8 +145,97 @@ const SYNONYM_TABLE = new Map([
   ['skip-navigation', ['skip-link', 'landmark', 'skip nav']],
   ['heading', ['heading hierarchy', 'h1', 'heading level']],
   ['form', ['input', 'validation', 'required', 'label']],
+  ['layout', ['grid', 'flexbox', 'layout-shell', 'responsive', 'breakpoint']],
+  ['responsive', ['media query', 'breakpoint', 'viewport', 'mobile']],
+  ['error', ['validation', 'aria-invalid', 'aria-describedby', 'error text']],
+  ['focus', ['focus-visible', 'focus ring', 'outline', 'tabindex', 'keyboard']],
+  ['token', ['design token', 'css variable', 'custom property', 'spacing token']],
 ]);
 
+// Interaction examples for form components (P-04 / #206)
+const INTERACTION_EXAMPLES_MAP = Object.freeze({
+  'dads-input-text': [
+    { scenario: 'Set value programmatically', trigger: 'property', code: 'el.value = "hello";' },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "この項目は入力が必須です";' },
+    { scenario: 'Clear validation error', trigger: 'attribute', code: 'el.error = false; el.errorText = "";' },
+    { scenario: 'Listen to value change', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.value); });" },
+  ],
+  'dads-textarea': [
+    { scenario: 'Set value programmatically', trigger: 'property', code: 'el.value = "long text...";' },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "入力できる文字数を超えています";' },
+    { scenario: 'Listen to input event', trigger: 'event', code: "el.addEventListener('input', (e) => { console.log(e.target.value); });" },
+  ],
+  'dads-select': [
+    { scenario: 'Set selected value', trigger: 'property', code: 'el.value = "option1";' },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "この項目は入力が必須です";' },
+    { scenario: 'Listen to change event', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.value); });" },
+  ],
+  'dads-checkbox': [
+    { scenario: 'Set checked state', trigger: 'property', code: 'el.checked = true;' },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "この項目は入力が必須です";' },
+    { scenario: 'Listen to change event', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.checked); });" },
+  ],
+  'dads-radio': [
+    { scenario: 'Set checked state', trigger: 'property', code: 'el.checked = true;' },
+    { scenario: 'Listen to change event', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.value); });" },
+  ],
+  'dads-combobox': [
+    { scenario: 'Set value programmatically', trigger: 'property', code: 'el.value = "selected-option";' },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "この項目は入力が必須です";' },
+    { scenario: 'Listen to change event', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.value); });" },
+  ],
+  'dads-date-picker': [
+    { scenario: 'Set date value', trigger: 'property', code: 'el.value = "2024-01-15";' },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "この項目は入力が必須です";' },
+    { scenario: 'Listen to change event', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.value); });" },
+  ],
+  'dads-file-upload': [
+    { scenario: 'Listen to file selection', trigger: 'event', code: "el.addEventListener('change', (e) => { console.log(e.target.files); });" },
+    { scenario: 'Show validation error', trigger: 'attribute', code: 'el.error = true; el.errorText = "この項目は入力が必須です";' },
+  ],
+});
+
+// Layout behavior metadata for layout/display components (P-05 / #207)
+const LAYOUT_BEHAVIOR_MAP = Object.freeze({
+  'dads-layout-shell': {
+    responsive: {
+      breakpoints: { desktop: '80rem', tablet: '48rem' },
+      modes: ['auto', 'desktop', 'tablet', 'mobile'],
+      defaultMode: 'auto',
+      description: 'Automatically switches between desktop/tablet/mobile layouts based on viewport width when mode="auto".',
+    },
+    overflow: {
+      strategy: 'slot-driven',
+      description: 'Slots (header, sidebar, aside, footer) are auto-hidden when empty. Sidebar collapses to rail on tablet.',
+    },
+    constraints: {
+      patterns: ['website', 'app-shell', 'master-detail', 'left-header-pane', 'three-pane', 'three-pane-shell'],
+      defaultPattern: 'app-shell',
+      mobileSidebarOptions: ['hidden', 'top', 'bottom'],
+      description: 'Choose a pattern attribute to control layout structure. Pair with mode and mobile-sidebar for full control.',
+    },
+  },
+  'dads-layout-sidebar': {
+    responsive: {
+      description: 'Designed to be placed inside dads-layout-shell sidebar slot. Width is controlled by the parent shell.',
+    },
+    constraints: {
+      description: 'Simple container for sidebar content. Use inside dads-layout-shell for responsive behavior.',
+    },
+  },
+  'dads-device-mock': {
+    responsive: {
+      devices: ['desktop', 'tablet', 'mobile'],
+      defaultDevice: 'mobile',
+      description: 'Renders a device frame (desktop/tablet/mobile) around slotted content. Set device attribute to switch.',
+    },
+    constraints: {
+      visibleHeight: 'Use visible-height attribute to clip the mock to a specific height (e.g. "220px").',
+      description: 'Display-only component for previewing content in device frames. Not a layout container.',
+    },
+  },
+});
+
 export function expandQueryWithSynonyms(query) {
   const q = String(query ?? '').toLowerCase().trim();
   if (!q) return [q];
@@ -752,10 +841,16 @@ export function levenshteinDistance(left, right) {
   return prev[b.length];
 }
 
-export function suggestUnknownElementTagName(tagName, cemIndex) {
+export function suggestUnknownElementTagName(tagName, cemIndex, prefix) {
   const target = String(tagName ?? '').trim().toLowerCase();
   if (!target || !target.includes('-')) return undefined;
 
+  // Try prefix-prepend before Levenshtein (e.g. input-text → dads-input-text)
+  if (prefix && cemIndex instanceof Map) {
+    const prefixed = `${String(prefix).toLowerCase()}-${target}`;
+    if (cemIndex.has(prefixed)) return prefixed;
+  }
+
   let bestTag;
   let bestDistance = Number.POSITIVE_INFINITY;
   const candidateSource = cemIndex instanceof Map ? cemIndex.keys() : [];
@@ -775,15 +870,19 @@ export function suggestUnknownElementTagName(tagName, cemIndex) {
   return bestTag;
 }
 
-export function buildDiagnosticSuggestion({ diagnostic, cemIndex }) {
+export function buildDiagnosticSuggestion({ diagnostic, cemIndex, prefix }) {
   const code = String(diagnostic?.code ?? '');
   if (!code) return undefined;
 
   if (code === 'unknownElement') {
-    const tagName = suggestUnknownElementTagName(diagnostic?.tagName, cemIndex);
+    const tagName = suggestUnknownElementTagName(diagnostic?.tagName, cemIndex, prefix);
     return tagName ? `Did you mean "${tagName}"?` : undefined;
   }
 
+  if (code === 'canonicalLowercaseRecommendation') {
+    return diagnostic?.hint ?? undefined;
+  }
+
   if (code === 'forbiddenAttribute' && String(diagnostic?.attrName ?? '').toLowerCase() === 'placeholder') {
     return 'Use aria-label or aria-describedby support text instead of placeholder.';
   }
@@ -1621,6 +1720,9 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
     detectMissingRequiredAttributes = () => [],
     detectOrphanedChildComponents = () => [],
     detectEmptyInteractiveElement = () => [],
+    detectNonLowercaseAttributes = () => [],
+    detectCdnReferences = () => [],
+    detectMissingRuntimeScaffold = () => [],
   } = await loadValidator();
   const canonicalCemIndex = collectCemCustomElements(manifest);
   const canonicalEnumMap = buildEnumAttributeMap(manifest);
@@ -1653,9 +1755,12 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
 
   const tokenSuggestionMap = buildTokenSuggestionMap(designTokensData);
 
+  const VENDOR_DIR = 'vendor-runtime';
+  const PREFIX_STRIP_RE = /^[^-]+-/;
+
   const server = new McpServer({
     name: 'web-components-factory-design-system',
-    version: '0.2.0',
+    version: '0.5.0',
   });
 
   server.registerPrompt(
@@ -1805,7 +1910,7 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
 
       const overview = {
         name: 'DADS Web Components (wcf)',
-        version: '0.2.0',
+        version: '0.5.0',
         prefix: CANONICAL_PREFIX,
         totalComponents: indexes.decls.length,
         componentsByCategory: categoryCount,
@@ -1814,9 +1919,37 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
         setupInfo: {
           npmPackage: 'web-components-factory',
           installCommand: 'npm install web-components-factory',
-          vendorRuntimePath: 'vendor-runtime/',
+          vendorRuntimePath: `${VENDOR_DIR}/`,
           htmlBoilerplate: '<script type="module" src="vendor-runtime/src/autoload.js"></script>',
           noscriptGuidance: 'WCF components require JavaScript. Provide <noscript> fallback with static HTML equivalents for critical content.',
+          noCDN: true,
+          deliveryModel: 'vendor-local',
+          distribution: {
+            selfHosted: true,
+            cdn: false,
+            strategy: 'vendor-importmap',
+            quickStart: 'npx web-components-factory init --prefix <prefix> --dir <dir>',
+            description:
+              'Components are installed locally via the wcf CLI. No CDN is available. All assets are served from the project directory using import maps and a boot script.',
+          },
+          importMapHint: 'WCF uses <script type="importmap"> for module resolution. Each component tag name maps to a local JS file: { "<prefix>-<component>": "./<dir>/components/<component>.js" }. The wcf CLI generates importmap.snippet.json automatically via `wcf init`.',
+          bootScript: '<dir>/boot.js — sets the component prefix via setConfig(), then loads wc-autoloader.js which scans the DOM for custom element tags and dynamically imports them via the import map.',
+          vendorSetup: {
+            init: 'wcf init --prefix <prefix> --dir <dir>',
+            add: 'wcf add <componentId> --prefix <prefix> --out <dir>',
+            workflow: '1. wcf init で初期化（boot.js, importmap.snippet.json, autoloader を生成） → 2. wcf add で各コンポーネントを追加 → import map と boot.js が自動生成される',
+          },
+          htmlSetup: [
+            '<script type="importmap">',
+            '{',
+            '  "imports": {',
+            '    "<prefix>-button": "./<dir>/components/button.js",',
+            '    "<prefix>-card": "./<dir>/components/card.js"',
+            '  }',
+            '}',
+            '</script>',
+            '<script type="module" src="./<dir>/boot.js"></script>',
+          ].join('\n'),
         },
         ideSetupTemplates: IDE_SETUP_TEMPLATES,
         availablePrompts: [
@@ -2015,6 +2148,14 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
       if (accessibilityChecklist) {
         api.accessibilityChecklist = accessibilityChecklist;
       }
+      const interactionExamples = canonicalTag ? INTERACTION_EXAMPLES_MAP[canonicalTag] : undefined;
+      if (interactionExamples) {
+        api.interactionExamples = interactionExamples;
+      }
+      const layoutBehavior = canonicalTag ? LAYOUT_BEHAVIOR_MAP[canonicalTag] : undefined;
+      if (layoutBehavior) {
+        api.layoutBehavior = layoutBehavior;
+      }
 
       return buildJsonToolResponse(api);
     },
@@ -2133,7 +2274,19 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
                 defineHint,
                 source: install.source,
                 usageSnippet,
+                usageContext: 'body-only',
                 installHint: componentId ? `wcf add ${componentId}` : undefined,
+                vendorHint: (() => {
+                  const im = tagNames.length > 0
+                    ? JSON.stringify({ imports: Object.fromEntries(tagNames.map((t) => [t, `./<dir>/components/${t.replace(/^[^-]+-/, '')}.js`])) })
+                    : undefined;
+                  return {
+                    install: componentId ? `wcf add ${componentId} --prefix <prefix> --out <dir>` : undefined,
+                    importMap: im,
+                    importmap: im, // @deprecated — use importMap; will be removed in v1.0
+                    boot: '<dir>/boot.js -- loads autoloader that registers components via import map',
+                  };
+                })(),
               },
               null,
               2,
@@ -2226,8 +2379,40 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
         severity: 'warning',
       });
 
-      const diagnostics = [...cemDiagnostics, ...enumDiagnostics, ...slotDiagnostics, ...requiredAttrDiagnostics, ...orphanDiagnostics, ...emptyInteractiveDiagnostics, ...tokenMisuseDiagnostics, ...accessibilityDiagnostics].map((d) => {
-        const suggestion = buildDiagnosticSuggestion({ diagnostic: d, cemIndex });
+      const lowercaseDiagnostics = detectNonLowercaseAttributes({
+        filePath: '<markup>',
+        text: html,
+        cem: cemIndex,
+        severity: 'warning',
+      });
+
+      const cdnDiagnostics = detectCdnReferences({
+        filePath: '<markup>',
+        text: html,
+        severity: 'warning',
+      });
+
+      const scaffoldDiagnostics = detectMissingRuntimeScaffold({
+        filePath: '<markup>',
+        text: html,
+        severity: 'warning',
+      });
+
+      const allRawDiagnostics = [
+        ...cemDiagnostics,
+        ...enumDiagnostics,
+        ...slotDiagnostics,
+        ...requiredAttrDiagnostics,
+        ...orphanDiagnostics,
+        ...emptyInteractiveDiagnostics,
+        ...lowercaseDiagnostics,
+        ...tokenMisuseDiagnostics,
+        ...accessibilityDiagnostics,
+        ...cdnDiagnostics,
+        ...scaffoldDiagnostics,
+      ];
+      const diagnostics = allRawDiagnostics.map((d) => {
+        const suggestion = buildDiagnosticSuggestion({ diagnostic: d, cemIndex, prefix: p });
         return {
           file: d.file,
           range: d.range,
@@ -2271,6 +2456,70 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
     },
   );
 
+  // -----------------------------------------------------------------------
+  // Helper: buildFullPageHtml
+  // -----------------------------------------------------------------------
+  function escapeHtmlTitle(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  /**
+   * Build import map entries from a component closure.
+   * @param {string[]} closure - Component IDs
+   * @param {Object} components - Component metadata (from install registry)
+   * @param {string} prefix - Tag name prefix
+   * @param {string} dir - Directory placeholder or concrete path
+   * @returns {Object} Import map entries { prefixedTag: path }
+   */
+  function buildImportMapEntries(closure, components, prefix, dir) {
+    return Object.fromEntries(
+      closure.flatMap((cid) => {
+        const meta = components[cid];
+        const tags = Array.isArray(meta?.tags) ? meta.tags : [cid];
+        return tags.map((t) => {
+          const lower = String(t).toLowerCase();
+          const suffix = lower.replace(PREFIX_STRIP_RE, '');
+          return [withPrefix(lower, prefix), `./${dir}/components/${suffix}.js`];
+        });
+      }),
+    );
+  }
+
+  /**
+   * Build a complete HTML5 page from pattern data, resolving scaffoldHint
+   * placeholders into concrete paths.
+   * @param {Object} opts
+   * @param {string} opts.html - Pattern HTML body
+   * @param {string} opts.title - Page title
+   * @param {Object} opts.importMapEntries - Import map entries { tag: path }
+   * @param {string} [opts.dir] - Directory for JS assets
+   * @param {string} [opts.lang='ja'] - HTML lang attribute
+   * @returns {string} Complete HTML5 document
+   */
+  function buildFullPageHtml({ html, title, importMapEntries, dir = VENDOR_DIR, lang = 'ja' }) {
+    const importMapJson = JSON.stringify({ imports: importMapEntries }, null, 2);
+    return [
+      '<!DOCTYPE html>',
+      `<html lang="${lang}">`,
+      '<head>',
+      '  <meta charset="UTF-8">',
+      '  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
+      `  <title>${escapeHtmlTitle(title)}</title>`,
+      `  <!-- distribution: selfHosted=true, strategy=vendor-importmap -->`,
+      `  <!-- Do NOT replace these local paths with CDN URLs. This design system is self-hosted. -->`,
+      `  <script type="importmap">`,
+      `${importMapJson}`,
+      `  </script>`,
+      `  <script type="module" src="./${dir}/boot.js"></script>`,
+      '</head>',
+      '<body>',
+      `  <noscript>このページの機能にはJavaScriptが必要です。</noscript>`,
+      `  ${html}`,
+      '</body>',
+      '</html>',
+    ].join('\n');
+  }
+
   // -----------------------------------------------------------------------
   // Tool: get_pattern_recipe
   // -----------------------------------------------------------------------
@@ -2278,13 +2527,14 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
     'get_pattern_recipe',
     {
       description:
-        'Get a complete pattern recipe with component dependencies and HTML. When: building a page layout from a pattern. Returns: dependency tree, install commands, and resolved HTML. After: use validate_markup to verify the generated HTML.',
+        'Get a complete pattern recipe with component dependencies and HTML. When: building a page layout from a pattern. Returns: dependency tree, install commands, and resolved HTML. After: use validate_markup to verify the generated HTML. Use include: ["fullPage"] to get a complete HTML5 page ready for browser rendering.',
       inputSchema: {
         patternId: z.string(),
         prefix: z.string().optional(),
+        include: z.array(z.enum(['fullPage'])).optional(),
       },
     },
-    async ({ patternId, prefix }) => {
+    async ({ patternId, prefix, include }) => {
       const id = String(patternId ?? '').trim();
       const p = normalizePrefix(prefix);
       const pat = patterns[id];
@@ -2315,28 +2565,59 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
       const canonicalHtml = String(pat.html ?? '');
       const html = applyPrefixToHtml(canonicalHtml, p);
 
+      const entryHints = Array.isArray(pat.entryHints) ? [...pat.entryHints] : ['boot'];
+
+      const importMapEntries = buildImportMapEntries(closure, components, p, '<dir>');
+
+      const scaffoldHint = {
+        doctype: '<!DOCTYPE html>',
+        importMap: `<script type="importmap">\n${JSON.stringify({ imports: importMapEntries }, null, 2)}\n</script>`,
+        bootScript: '<script type="module" src="./<dir>/boot.js"></script>',
+        noscript: '<noscript>このページの機能にはJavaScriptが必要です。</noscript>',
+        serveOverHttp: 'Import maps require HTTP/HTTPS. Use a local dev server (e.g. npx serve .) instead of opening the HTML file directly via file:// protocol.',
+      };
+
+      // Build fullPageHtml when requested via include: ['fullPage']
+      const includeArr = Array.isArray(include) ? include : [];
+      let fullPageHtml;
+      if (includeArr.includes('fullPage')) {
+        const resolvedImportMap = buildImportMapEntries(closure, components, p, VENDOR_DIR);
+        fullPageHtml = buildFullPageHtml({
+          html,
+          title: pat.title ?? pat.id,
+          importMapEntries: resolvedImportMap,
+        });
+      }
+
+      const result = {
+        pattern: {
+          id: pat.id,
+          title: pat.title,
+          description: pat.description,
+        },
+        prefix: p,
+        requires,
+        components: closure,
+        install,
+        html,
+        canonicalHtml,
+        installHint: closure.length > 0 ? `wcf add ${closure.join(' ')}` : undefined,
+        entryHints,
+        scaffoldHint,
+      };
+
+      if (fullPageHtml !== undefined) {
+        result.fullPageHtml = fullPageHtml;
+        result.vendorSetup = {
+          command: `npx web-components-factory init --prefix ${p} --dir ${VENDOR_DIR} && npx web-components-factory add ${closure.join(' ')} --prefix ${p} --out ${VENDOR_DIR}`,
+        };
+      }
+
       return {
         content: [
           {
             type: 'text',
-            text: JSON.stringify(
-              {
-                pattern: {
-                  id: pat.id,
-                  title: pat.title,
-                  description: pat.description,
-                },
-                prefix: p,
-                requires,
-                components: closure,
-                install,
-                html,
-                canonicalHtml,
-                installHint: closure.length > 0 ? `wcf add ${closure.join(' ')}` : undefined,
-              },
-              null,
-              2,
-            ),
+            text: JSON.stringify(result, null, 2),
           },
         ],
       };
@@ -2562,25 +2843,35 @@ export async function createMcpServer(loadJsonData, loadValidator, options = {})
           // Snippet match: weight 1
           if (snippet.includes(q)) score += 1;
 
-          // Body text match: weight 1
-          if (body && body.includes(q)) score += 1;
+          // Body text match: weight 1, plus boost for multiple occurrences
+          if (body && body.includes(q)) {
+            score += 1;
+            // Count additional occurrences in body for boost (cap at +2)
+            let idx = body.indexOf(q);
+            let occurrences = 0;
+            while (idx !== -1 && occurrences < 3) {
+              occurrences++;
+              idx = body.indexOf(q, idx + q.length);
+            }
+            if (occurrences > 1) score += Math.min(occurrences - 1, 2);
+          }
 
-          // Synonym expansion match: weight 1 (only for expanded terms, not the original)
-          if (score === 0 && expandedTerms.length > 1) {
-            for (let i = 1; i < expandedTerms.length; i++) {
+          // Synonym expansion match: check all expanded terms, cap total synonym contribution at +2
+          if (expandedTerms.length > 1) {
+            let synScore = 0;
+            const lowerKeywords = keywords.map((kw) => String(kw).toLowerCase());
+            for (let i = 1; i < expandedTerms.length && synScore < 2; i++) {
               const syn = expandedTerms[i];
-              if (heading.includes(syn) || snippet.includes(syn) || body.includes(syn)) {
-                score += 1;
-                break;
-              }
-              for (const kw of keywords) {
-                if (String(kw).toLowerCase().includes(syn)) {
-                  score += 1;
+              if (heading.includes(syn)) { synScore += 1; continue; }
+              if (snippet.includes(syn) || body.includes(syn)) { synScore += 1; continue; }
+              for (const kw of lowerKeywords) {
+                if (kw.includes(syn)) {
+                  synScore += 1;
                   break;
                 }
               }
-              if (score > 0) break;
             }
+            score += synScore;
           }
 
           if (score > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoharada/wcf-mcp",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "MCP server for the web-components-factory design system. Provides component discovery, validation, and pattern-based UI composition without cloning the repository.",
   "type": "module",
   "bin": {

package/validator.mjs

@@ -797,15 +797,17 @@ export function detectEmptyInteractiveElement({
 }
 
 /**
- * Hardcoded map of required attributes per form component (DIG-08).
- * Only `label` for form inputs.
+ * Required attributes per form component (DIG-08).
+ * Both `label` and `name` are required for components that declare them in CEM.
+ * Note: dads-date-picker and dads-file-upload use slots for labels, not attributes.
  */
 const REQUIRED_ATTRIBUTES = new Map([
-  ['dads-input-text', ['label']],
-  ['dads-textarea', ['label']],
-  ['dads-select', ['label']],
-  ['dads-checkbox', ['label']],
-  ['dads-radio', ['label']],
+  ['dads-input-text', ['label', 'name']],
+  ['dads-textarea', ['label', 'name']],
+  ['dads-select', ['label', 'name']],
+  ['dads-checkbox', ['label', 'name']],
+  ['dads-radio', ['label', 'name']],
+  ['dads-combobox', ['label', 'name']],
 ]);
 
 /**
@@ -866,3 +868,143 @@ export function detectMissingRequiredAttributes({
 
   return diagnostics;
 }
+
+/**
+ * Detect attributes written in non-lowercase on known custom elements.
+ * HTML attributes are case-insensitive, but WCF uses lowercase canonically.
+ * @param {{
+ *   filePath?: string;
+ *   text: string;
+ *   cem: Map<string, { attributes: Set<string> }>;
+ *   severity?: string;
+ * }} params
+ */
+export function detectNonLowercaseAttributes({
+  filePath = '<input>',
+  text,
+  cem,
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+  if (!(cem instanceof Map) || cem.size === 0) return diagnostics;
+
+  const lineStarts = computeLineIndex(text);
+  const tagRe = /<([a-z][a-z0-9-]*)\b([^<>]*?)>/gi;
+  let m;
+
+  while ((m = tagRe.exec(text))) {
+    const tag = String(m[1] ?? '').toLowerCase();
+    if (!tag.includes('-')) continue;
+
+    const meta = cem.get(tag);
+    if (!meta) continue;
+
+    const attrChunk = String(m[2] ?? '');
+    const rawAttrsStart = m.index + 1 + tag.length;
+    const attrs = parseAttributes(attrChunk);
+
+    for (const { name, offset } of attrs) {
+      // Check if attribute has non-lowercase characters BEFORE normalizing
+      if (name === name.toLowerCase()) continue;
+
+      const lower = name.toLowerCase();
+
+      // Skip global attributes and event handlers
+      if (shouldSkipAttr(lower)) continue;
+
+      // Only flag if the lowercase form is a known CEM attribute
+      if (!meta.attributes.has(lower)) continue;
+
+      const startIndex = rawAttrsStart + offset;
+      const endIndex = startIndex + name.length;
+      const range = makeRange(lineStarts, startIndex, endIndex);
+      diagnostics.push({
+        file: filePath,
+        range,
+        severity,
+        code: 'canonicalLowercaseRecommendation',
+        message: `Attribute "${name}" should be lowercase: "${lower}".`,
+        tagName: tag,
+        attrName: name,
+        hint: `Use "${lower}" instead of "${name}".`,
+      });
+    }
+  }
+
+  return diagnostics;
+}
+
+/**
+ * Detect CDN URLs in markup that should use local vendor paths instead.
+ */
+export function detectCdnReferences({
+  filePath = '<input>',
+  text,
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+  const lineStarts = computeLineIndex(text);
+  const cdnRe = /https?:\/\/(?:cdn\.jsdelivr\.net|unpkg\.com|cdnjs\.cloudflare\.com|esm\.sh)/g;
+  let m;
+  while ((m = cdnRe.exec(text))) {
+    const range = makeRange(lineStarts, m.index, m.index + m[0].length);
+    diagnostics.push({
+      file: filePath,
+      range,
+      severity,
+      code: 'cdnReference',
+      message: `CDN URL detected: "${m[0]}". This design system is self-hosted. Use local vendor paths instead.`,
+      tagName: '',
+      hint: 'Replace CDN URLs with local paths (e.g., ./vendor-runtime/components/...). Run `wcf init` to set up local assets.',
+    });
+  }
+
+  return diagnostics;
+}
+
+/**
+ * Detect missing importmap or boot.js in a full HTML page.
+ * Only triggers when the markup contains a full page structure (<!DOCTYPE html>).
+ */
+export function detectMissingRuntimeScaffold({
+  filePath = '<input>',
+  text,
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+
+  // Only check full HTML pages
+  if (!text.includes('<!DOCTYPE html>') && !text.includes('<!doctype html>')) {
+    return diagnostics;
+  }
+
+  const lineStarts = computeLineIndex(text);
+
+  if (!/<script\b[^>]*\btype\s*=\s*['"]importmap['"][^>]*>/i.test(text)) {
+    const range = makeRange(lineStarts, 0, Math.min(text.length, 15));
+    diagnostics.push({
+      file: filePath,
+      range,
+      severity,
+      code: 'missingImportmap',
+      message: 'Full HTML page is missing <script type="importmap">. WCF components require an import map for module resolution.',
+      tagName: '',
+      hint: 'Add <script type="importmap">{"imports":{...}}</script> in <head>. Run `wcf init` to generate one.',
+    });
+  }
+
+  if (!text.includes('boot.js')) {
+    const range = makeRange(lineStarts, 0, Math.min(text.length, 15));
+    diagnostics.push({
+      file: filePath,
+      range,
+      severity,
+      code: 'missingBootScript',
+      message: 'Full HTML page is missing boot.js script. WCF components require the boot script to initialize.',
+      tagName: '',
+      hint: 'Add <script type="module" src="./vendor-runtime/boot.js"></script> in <head>.',
+    });
+  }
+
+  return diagnostics;
+}