@monoharada/wcf-mcp 0.11.0 → 0.12.0

package/data/llms-full.txt

@@ -945,8 +945,8 @@ None
 
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
-| `color` | string | - | カラー (gray | blue | light-blue | cyan | green | lime | yellow | orange | red | magenta | purple) |
-| `variant` | string | - | バリアント (text | outline | filled-outline | fill) |
+| `color` | 'gray' \| 'blue' \| 'light-blue' \| 'cyan' \| 'green' \| 'lime' \| 'yellow' \| 'orange' \| 'red' \| 'magenta' \| 'purple' | - | カラー |
+| `variant` | 'text' \| 'outline' \| 'filled-outline' \| 'fill' | - | バリアント |
 
 
 #### Slots
@@ -2420,12 +2420,13 @@ None
 #### Usage
 
 ```html
-<dads-heading
-  size=""
->
-  <div slot="icon"><!-- 先頭アイコン 挙動メモ: - `slot="shoulder"` と `slot="icon"` は同時に指定できます（shoulderは上、iconは見出し行の先頭）。 - slot が無い場合は該当パーツは表示されません（内部で `data-has-*` を付与して制御）。 - `chip` / `rule` は装飾（意匠）です。情報の唯一の手掛かりにしないでください。 --></div>
-  <div slot="shoulder"><!-- ショルダーテキスト --></div>
-</dads-heading>
+<!-- ページ見出し -->
+<dads-heading level="1" size="36">申請一覧</dads-heading>
+
+<!-- typeset コンテナ内の節見出し -->
+<main data-dads-typeset>
+  <dads-heading level="2" size="24" margin="top">基本情報</dads-heading>
+</main>
 ```
 
 ---
@@ -2499,6 +2500,7 @@ None
 | `error` | boolean | - | エラー状態 |
 | `error-text` | string | - | エラーメッセージ（スロット未使用時のフォールバック） |
 | `input-width` | string | - | 幅バリアント (short | medium | full | カスタム値) |
+| `inputmode` | 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' | - | モバイル向け入力モードヒント |
 | `label` | string | - | ラベルテキスト（スロット未使用時のフォールバック） |
 | `name` | string | - | フォーム名 |
 | `readonly` | boolean | - | 読み取り専用 |
@@ -3897,14 +3899,14 @@ None
 #### Usage
 
 ```html
-<dads-resource-list>
-  <div slot="action"><!-- 右端アクション --></div>
-  <div slot="control"><!-- チェックボックス/ラジオ等の選択コントロール --></div>
-  <div slot="icon"><!-- 先頭アイコン --></div>
-  <div slot="label"><!-- ラベル --></div>
-  <div slot="sub"><!-- サブラベル --></div>
-  <div slot="support"><!-- サポートテキスト --></div>
-  <div slot="title"><!-- タイトル --></div>
+<dads-resource-list
+  href="/files/guide.pdf"
+  download
+  data-interaction="whole"
+  data-style="frame"
+>
+  <span slot="title">申請ガイド（PDF）</span>
+  <span slot="support">PDF 1.2MB</span>
 </dads-resource-list>
 ```
 
@@ -4671,9 +4673,43 @@ None
 #### Usage
 
 ```html
-<dads-table
-  size=""
->...</dads-table>
+<!-- 基本テーブル -->
+<dads-table>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">項目</th>
+        <th scope="col">値</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>サンプル</td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</dads-table>
+
+<!-- ソート + 行選択 -->
+<dads-table selectable hover sort-behavior="dom">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col"><input type="checkbox" data-select-all aria-label="表示中の行をすべて選択" /></th>
+        <th scope="col" data-sort-type="string"><button type="button" data-sort>氏名</button></th>
+        <th scope="col" data-sort-type="number"><button type="button" data-sort>金額</button></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><input type="checkbox" data-select-row aria-label="行を選択: A001" /></td>
+        <td>山田 太郎</td>
+        <td data-sort-value="1200">1,200</td>
+      </tr>
+    </tbody>
+  </table>
+</dads-table>
 ```
 
 ---
@@ -4970,6 +5006,36 @@ Requires: `heading`, `table`, `page-navigation`
 </main>
 ```
 
+### table-with-sort
+
+**テーブル（ソート付き）**: 列ヘッダーのクリックでソートできるデータテーブル
+
+Requires: `heading`, `table`
+
+```html
+<main data-dads-typeset>
+  <dads-heading level="1" size="36">一覧</dads-heading>
+  <dads-table hover sort-behavior="dom">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col" data-sort-type="string"><button type="button" data-sort>氏名</button></th>
+          <th scope="col" data-sort-type="date"><button type="button" data-sort>更新日</button></th>
+          <th scope="col">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>山田 太郎</td>
+          <td data-sort-value="2026-03-17">2026/03/17</td>
+          <td>詳細</td>
+        </tr>
+      </tbody>
+    </table>
+  </dads-table>
+</main>
+```
+
 ### card-grid
 
 **カードグリッド**: カードで一覧表示する基本レイアウト

package/data/pattern-registry.json

@@ -60,6 +60,24 @@
       "html": "<main data-dads-typeset>\n  <dads-heading level=\"1\">一覧</dads-heading>\n  <dads-table>\n    <table>\n      <thead>\n        <tr><th>項目</th><th>値</th></tr>\n      </thead>\n      <tbody>\n        <tr><td>サンプル</td><td>1</td></tr>\n      </tbody>\n    </table>\n  </dads-table>\n  <dads-page-navigation current=\"1\" total=\"3\"></dads-page-navigation>\n</main>\n",
       "behavior": "document.querySelector(\"dads-page-navigation\").addEventListener(\"page-change\", (e) => {\n  console.log(\"Page:\", e.detail.page);\n  // Fetch and render table rows for the new page\n});"
     },
+    "table-with-sort": {
+      "id": "table-with-sort",
+      "title": "テーブル（ソート付き）",
+      "description": "列ヘッダーのクリックでソートできるデータテーブル",
+      "requires": [
+        "heading",
+        "table"
+      ],
+      "stability": "stable",
+      "contractVersion": "1.0",
+      "entryHints": [
+        "boot",
+        "@wcf",
+        "index"
+      ],
+      "html": "<main data-dads-typeset>\n  <dads-heading level=\"1\" size=\"36\">一覧</dads-heading>\n  <dads-table hover sort-behavior=\"dom\">\n    <table>\n      <thead>\n        <tr>\n          <th scope=\"col\" data-sort-type=\"string\"><button type=\"button\" data-sort>氏名</button></th>\n          <th scope=\"col\" data-sort-type=\"date\"><button type=\"button\" data-sort>更新日</button></th>\n          <th scope=\"col\">操作</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>山田 太郎</td>\n          <td data-sort-value=\"2026-03-17\">2026/03/17</td>\n          <td>詳細</td>\n        </tr>\n      </tbody>\n    </table>\n  </dads-table>\n</main>\n",
+      "behavior": "document.querySelector(\"dads-table\").addEventListener(\"dads-sort-change\", (e) => {\n  console.log(\"Sort:\", e.detail.columnIndex, e.detail.direction);\n});"
+    },
     "card-grid": {
       "id": "card-grid",
       "title": "カードグリッド",

package/data/skills-registry.json

@@ -256,6 +256,47 @@
         "lastUpdated": "2026-03-04"
       }
     },
+    {
+      "name": "wcf-mcp-release",
+      "path": ".claude/skills/wcf-mcp-release",
+      "entry": "SKILL.md",
+      "clients": [
+        "codex",
+        "claude_code",
+        "cursor"
+      ],
+      "status": "active",
+      "description": "Bump and verify the publishable @monoharada/wcf-mcp package.",
+      "tags": [
+        "workflow"
+      ],
+      "version": "1.0.0",
+      "dependencies": [],
+      "compat": {
+        "minVersion": {
+          "claude_code": "1.0",
+          "cursor": "0.50",
+          "codex": "0.1"
+        },
+        "capabilities": [
+          "read_repo",
+          "run_commands",
+          "write_repo"
+        ]
+      },
+      "manifest": {
+        "author": "wcf-team",
+        "license": "MIT",
+        "entryFormat": "markdown",
+        "sections": [
+          "overview",
+          "workflow",
+          "do_dont"
+        ],
+        "sizeBytes": 2031,
+        "lastUpdated": "2026-03-18"
+      }
+    },
     {
       "name": "wcf-ui-builder",
       "path": ".claude/skills/wcf-ui-builder",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoharada/wcf-mcp",
-  "version": "0.11.0",
+  "version": "0.12.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

@@ -1248,3 +1248,317 @@ export function detectMissingRuntimeScaffold({
 
   return diagnostics;
 }
+
+function getAttributeRecord(attrs, ...names) {
+  const lowered = names.map((name) => name.toLowerCase());
+  return attrs.find((attr) => lowered.includes(String(attr?.name ?? '').toLowerCase()));
+}
+
+export function detectTableAuthoringMisuse({
+  filePath = '<input>',
+  text,
+  prefix = 'dads',
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+  const sourceText = sanitizeMarkupForValidation(text);
+  const lineStarts = computeLineIndex(sourceText);
+  const tableTag = `${String(prefix).toLowerCase()}-table`;
+  const tagRe = /<\/?([a-z][a-z0-9-]*)\b([^<>]*?)\/?>/gi;
+  const stack = [];
+  let m;
+
+  while ((m = tagRe.exec(sourceText))) {
+    const fullMatch = m[0];
+    const tag = String(m[1] ?? '').toLowerCase();
+    const isClosing = fullMatch.startsWith('</');
+    const isSelfClosing = fullMatch.endsWith('/>');
+    const attrChunk = String(m[2] ?? '');
+    const rawAttrsStart = m.index + 1 + tag.length;
+
+    if (isClosing) {
+      for (let index = stack.length - 1; index >= 0; index -= 1) {
+        if (stack[index] === tag) {
+          stack.splice(index, 1);
+          break;
+        }
+      }
+      continue;
+    }
+
+    const insideTable = stack.includes(tableTag) || tag === tableTag;
+    const attrs = parseAttributes(attrChunk);
+    const sortAttr = getAttributeRecord(attrs, 'data-sort', 'data-js-sort');
+    const sortTypeAttr = getAttributeRecord(attrs, 'data-sort-type');
+    const rowSelectAttr = getAttributeRecord(attrs, 'data-select-row', 'data-js-check');
+    const selectAllAttr = getAttributeRecord(attrs, 'data-select-all', 'data-js-check-all');
+    const typeAttr = getAttributeRecord(attrs, 'type');
+    const typeValue = String(typeAttr?.value ?? '').toLowerCase();
+
+    if (insideTable && sortAttr && tag === 'th') {
+      const startIndex = rawAttrsStart + sortAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + sortAttr.name.length),
+        severity,
+        code: 'sortOnTh',
+        message: 'data-sort must be placed on a <button> inside the <th>, not on the <th> itself.',
+        tagName: tag,
+        attrName: sortAttr.name,
+        hint: 'Wrap the header text in <button type="button" data-sort>...</button> and keep data-sort-type on the <th>.',
+      });
+    } else if (insideTable && sortAttr && tag !== 'button') {
+      const startIndex = rawAttrsStart + sortAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + sortAttr.name.length),
+        severity,
+        code: 'sortWrongTarget',
+        message: 'data-sort controls must be native <button> elements.',
+        tagName: tag,
+        attrName: sortAttr.name,
+        hint: 'Use <button type="button" data-sort>...</button> inside the sortable <th>.',
+      });
+    }
+
+    if (insideTable && sortTypeAttr && tag === 'button') {
+      const startIndex = rawAttrsStart + sortTypeAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + sortTypeAttr.name.length),
+        severity,
+        code: 'sortTypeOnWrongElement',
+        message: 'data-sort-type is read from the enclosing <th>, not from the sort button.',
+        tagName: tag,
+        attrName: sortTypeAttr.name,
+        hint: 'Move data-sort-type to the parent <th scope="col" data-sort-type="...">.',
+      });
+    }
+
+    const selectionAttr = rowSelectAttr ?? selectAllAttr;
+    if (insideTable && selectionAttr && !(tag === 'input' && typeValue === 'checkbox')) {
+      const startIndex = rawAttrsStart + selectionAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + selectionAttr.name.length),
+        severity,
+        code: 'selectionControlWrongElement',
+        message: `${selectionAttr.name} must be placed on input[type="checkbox"].`,
+        tagName: tag,
+        attrName: selectionAttr.name,
+        hint: `Use <input type="checkbox" ${selectionAttr.name} aria-label="...">.`,
+      });
+    }
+
+    if (!isSelfClosing && !HTML_VOID_ELEMENTS.has(tag)) {
+      stack.push(tag);
+    }
+  }
+
+  return diagnostics;
+}
+
+export function detectResourceListAuthoringMisuse({
+  filePath = '<input>',
+  text,
+  prefix = 'dads',
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+  const sourceText = sanitizeMarkupForValidation(text);
+  const lineStarts = computeLineIndex(sourceText);
+  const tagName = `${String(prefix).toLowerCase()}-resource-list`;
+  const tagRe = new RegExp(`<(${tagName})\\b([^<>]*?)>([\\s\\S]*?)</${tagName}>`, 'gi');
+  let m;
+
+  while ((m = tagRe.exec(sourceText))) {
+    const attrChunk = String(m[2] ?? '');
+    const bodyChunk = String(m[3] ?? '');
+    const rawAttrsStart = m.index + 1 + tagName.length;
+    const attrs = parseAttributes(attrChunk);
+    const hrefAttr = getAttributeRecord(attrs, 'href');
+    const interactionAttr = getAttributeRecord(attrs, 'data-interaction');
+    if (!hrefAttr) continue;
+    const interactionValue = String(interactionAttr?.value ?? '').toLowerCase();
+    if (interactionValue === 'whole') continue;
+    const hasDelegatedTitleLink = /slot\s*=\s*["']title["'][^>]*>[\s\S]*?<a\b[^>]*href=/i.test(bodyChunk);
+    if (hasDelegatedTitleLink) continue;
+
+    const startIndex = rawAttrsStart + hrefAttr.offset;
+    diagnostics.push({
+      file: filePath,
+      range: makeRange(lineStarts, startIndex, startIndex + hrefAttr.name.length),
+      severity,
+      code: 'resourceListWholeLinkMissingInteraction',
+      message: '<dads-resource-list href="..."> requires data-interaction="whole" for host-level whole-link mode.',
+      tagName,
+      attrName: 'href',
+      hint: 'Add data-interaction="whole", or move the main link into slot="title" as a delegated title link.',
+    });
+  }
+
+  return diagnostics;
+}
+
+export function detectReplaceableNativePatterns({
+  filePath = '<input>',
+  text,
+  prefix = 'dads',
+}) {
+  const diagnostics = [];
+  const sourceText = sanitizeMarkupForValidation(text);
+  const lineStarts = computeLineIndex(sourceText);
+  const p = String(prefix).toLowerCase();
+  const customStack = [];
+  const tagRe = /<\/?([a-z][a-z0-9-]*)\b([^<>]*?)\/?>/gi;
+  let m;
+
+  while ((m = tagRe.exec(sourceText))) {
+    const fullMatch = m[0];
+    const tag = String(m[1] ?? '').toLowerCase();
+    const isClosing = fullMatch.startsWith('</');
+    const isSelfClosing = fullMatch.endsWith('/>');
+    const attrChunk = String(m[2] ?? '');
+    const rawAttrsStart = m.index + 1 + tag.length;
+
+    if (isClosing) {
+      if (tag.startsWith(`${p}-`)) {
+        for (let index = customStack.length - 1; index >= 0; index -= 1) {
+          if (customStack[index] === tag) {
+            customStack.splice(index, 1);
+            break;
+          }
+        }
+      }
+      continue;
+    }
+
+    const insideWcfCustomElement = customStack.some((entry) => entry.startsWith(`${p}-`));
+    const attrs = parseAttributes(attrChunk);
+    const roleAttr = getAttributeRecord(attrs, 'role');
+    const roleValue = String(roleAttr?.value ?? '').toLowerCase();
+    const typeAttr = getAttributeRecord(attrs, 'type');
+    const typeValue = String(typeAttr?.value ?? '').toLowerCase();
+
+    if (!insideWcfCustomElement && roleAttr && roleValue === 'tablist') {
+      const startIndex = rawAttrsStart + roleAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + roleAttr.name.length),
+        severity: 'warning',
+        code: 'nativePatternReplaceable',
+        message: 'Custom tablist markup detected outside dads-tab.',
+        tagName: tag,
+        attrName: 'role',
+        hint: 'Consider using <dads-tab> instead of a custom role="tablist" implementation.',
+      });
+    }
+
+    if (!insideWcfCustomElement && (tag === 'dialog' || (roleAttr && roleValue === 'dialog'))) {
+      const startIndex = tag === 'dialog' ? m.index + 1 : rawAttrsStart + roleAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + (tag === 'dialog' ? tag.length : roleAttr.name.length)),
+        severity: 'info',
+        code: 'nativePatternReplaceable',
+        message: 'Dialog-like markup detected outside dads-dialog or dads-drawer.',
+        tagName: tag,
+        attrName: roleAttr ? 'role' : undefined,
+        hint: 'Consider using <dads-dialog> for modal dialogs or <dads-drawer> for slide-out panels.',
+      });
+    }
+
+    if (!insideWcfCustomElement && roleAttr && roleValue === 'progressbar') {
+      const startIndex = rawAttrsStart + roleAttr.offset;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + roleAttr.name.length),
+        severity: 'warning',
+        code: 'nativePatternReplaceable',
+        message: 'Progress/loading markup detected outside dads-spinner or dads-progress-bar.',
+        tagName: tag,
+        attrName: 'role',
+        hint: 'Consider using <dads-spinner> for indeterminate loading or <dads-progress-bar> for determinate progress.',
+      });
+    }
+
+    if (!insideWcfCustomElement && tag === 'input' && typeValue === 'file') {
+      const startIndex = rawAttrsStart + (typeAttr?.offset ?? 0);
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + (typeAttr?.name.length ?? 4)),
+        severity: 'info',
+        code: 'nativePatternReplaceable',
+        message: 'Native file input detected outside dads-file-upload.',
+        tagName: tag,
+        attrName: 'type',
+        hint: 'Consider using <dads-file-upload> when you need upload UI, drag-and-drop, or file list feedback.',
+      });
+    }
+
+    if (!insideWcfCustomElement && tag === 'dl') {
+      const startIndex = m.index + 1;
+      diagnostics.push({
+        file: filePath,
+        range: makeRange(lineStarts, startIndex, startIndex + tag.length),
+        severity: 'info',
+        code: 'nativePatternReplaceable',
+        message: 'Description-list style markup detected outside dads-description-list.',
+        tagName: tag,
+        hint: 'Consider using <dads-description-list> when you need the DADS key-value presentation pattern.',
+      });
+    }
+
+    if (!insideWcfCustomElement && tag === 'nav') {
+      const windowText = sourceText.slice(m.index, Math.min(sourceText.length, m.index + 2000)).toLowerCase();
+      if (windowText.includes('<ol') && (windowText.includes('aria-current="step"') || windowText.includes("aria-current='step'") || /\b(step|wizard)\b/.test(windowText))) {
+        const startIndex = m.index + 1;
+        diagnostics.push({
+          file: filePath,
+          range: makeRange(lineStarts, startIndex, startIndex + tag.length),
+          severity: 'info',
+          code: 'nativePatternReplaceable',
+          message: 'Step-navigation like markup detected outside dads-step-navigation.',
+          tagName: tag,
+          hint: 'Consider using <dads-step-navigation> and <dads-step-navigation-item> for wizard progress UI.',
+        });
+      }
+    }
+
+    if (!isSelfClosing && !HTML_VOID_ELEMENTS.has(tag) && tag.startsWith(`${p}-`)) {
+      customStack.push(tag);
+    }
+  }
+
+  return diagnostics;
+}
+
+export function detectReplaceableAnimationPatterns({
+  filePath = '<input>',
+  text,
+}) {
+  const diagnostics = [];
+  const lineStarts = computeLineIndex(text);
+  const styleBlockRe = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+  let m;
+
+  while ((m = styleBlockRe.exec(text))) {
+    const cssText = String(m[1] ?? '');
+    if (!/@keyframes\s+[^{\s]*(spin|spinner|rotate)/i.test(cssText)) continue;
+    if (!/animation\s*:/i.test(cssText)) continue;
+    const nearbyMarkup = text.slice(Math.max(0, m.index - 500), Math.min(text.length, m.index + m[0].length + 1500));
+    if (!/(loading|spinner|processing|sending|処理中|送信中|読み込み中|ローディング|スピナー)/i.test(nearbyMarkup)) continue;
+
+    const styleIndex = m.index + m[0].toLowerCase().indexOf('@keyframes');
+    diagnostics.push({
+      file: filePath,
+      range: makeRange(lineStarts, styleIndex, styleIndex + 10),
+      severity: 'warning',
+      code: 'customAnimationReplaceable',
+      message: 'Custom spinner/loading animation detected in CSS.',
+      hint: 'Consider using <dads-spinner> or <dads-progress-bar> instead of hand-written loading animation CSS.',
+    });
+  }
+
+  return diagnostics;
+}