@makitt.io/mds-mcp-server 0.1.3 → 0.2.1

package/dist/data/playbook/responsive-tokens.md

@@ -1,16 +1,17 @@
 # MDS Playbook — Responsive Tokens
 
-mds 의 "Responsive by default" 를 token 측에서 구현 — caller 의 코드 변경 없이 mobile 별 visual scale 자동 적용.
+mds 의 "Responsive by default" 를 token 측에서 구현 — caller 의 코드 변경 없이
+mobile 별 visual scale 자동 적용.
 
 ---
 
 ## 1. 결정 — 2 방식의 조합
 
-| 방식 | 적용 | 의도 |
-|---|---|---|
-| **Token responsive** (CSS @media) | 단순 visual scale (font-size / spacing) | caller 코드 변경 없이 자동 |
-| **JS breakpoint hook** (`useBreakpoint`) | layout 분기 (DataGrid → card list 같은 큰 변형) | 의도 명시 + reactive |
-| **Tailwind utility** (`text-3xl md:text-4xl`) | 페이지 별 override 또는 의도된 단계 | caller 명시 |
+| 방식                                          | 적용                                            | 의도                       |
+| --------------------------------------------- | ----------------------------------------------- | -------------------------- |
+| **Token responsive** (CSS @media)             | 단순 visual scale (font-size / spacing)         | caller 코드 변경 없이 자동 |
+| **JS breakpoint hook** (`useBreakpoint`)      | layout 분기 (DataGrid → card list 같은 큰 변형) | 의도 명시 + reactive       |
+| **Tailwind utility** (`text-3xl md:text-4xl`) | 페이지 별 override 또는 의도된 단계             | caller 명시                |
 
 > **default = token responsive** (자동). 큰 layout 변형 만 hook / utility 명시.
 
@@ -36,25 +37,28 @@ W3C DTCG 표준 의 `$extensions` field 활용 — vendor 별 metadata.
 
 ### 지원 breakpoint key
 
-| Key | CSS @media | 의도 |
-|---|---|---|
-| `max-sm` | `(max-width: 639px)` | mobile (< 640px) |
-| `max-md` | `(max-width: 767px)` | mobile + small tablet |
-| `max-lg` | `(max-width: 1023px)` | 모든 portrait device |
-| `max-xl` | `(max-width: 1279px)` | non-wide desktop |
+| Key      | CSS @media            | 의도                  |
+| -------- | --------------------- | --------------------- |
+| `max-sm` | `(max-width: 639px)`  | mobile (< 640px)      |
+| `max-md` | `(max-width: 767px)`  | mobile + small tablet |
+| `max-lg` | `(max-width: 1023px)` | 모든 portrait device  |
+| `max-xl` | `(max-width: 1279px)` | non-wide desktop      |
 
-> `min-*` 도 추후 추가 가능 (현재 mobile-first compress 만 — desktop 의 base 가 더 큰 size, mobile 이 축소). 의도 다르면 추가 cycle.
+> `min-*` 도 추후 추가 가능 (현재 mobile-first compress 만 — desktop 의 base 가
+> 더 큰 size, mobile 이 축소). 의도 다르면 추가 cycle.
 
 ---
 
 ## 3. Build pipeline
 
-`packages/mds/scripts/lib/formats.ts` 의 `cssThemeFormat` 가 `$extensions.mds.responsive` 인식.
+`packages/mds/scripts/lib/formats.ts` 의 `cssThemeFormat` 가
+`$extensions.mds.responsive` 인식.
 
 ### Output 예 (dist/css/global.css)
 
 ```css
-:root, [data-theme="light"] {
+:root,
+[data-theme='light'] {
   --text-3xl: 24px;
   --text-4xl: 30px;
   --space-8: 32px;
@@ -63,7 +67,8 @@ W3C DTCG 표준 의 `$extensions` field 활용 — vendor 별 metadata.
 }
 
 @media (max-width: 639px) {
-  :root, [data-theme="light"] {
+  :root,
+  [data-theme='light'] {
     --space-8: 16px;
     --space-10: 20px;
     --space-12: 24px;
@@ -83,23 +88,23 @@ W3C DTCG 표준 의 `$extensions` field 활용 — vendor 별 metadata.
 
 ### Typography (`typography.json`)
 
-| Token | desktop | max-sm (mobile) | 의도 |
-|---|---|---|---|
-| `text-3xl` | 24px | 20px (0.83x) | h1 heading |
-| `text-4xl` | 30px | 24px (0.8x) | display heading |
-| `text-2xl` 이하 | 그대로 | (override 없음) | small 이미 mobile-OK |
-| `display-1/2/3` | `clamp(...)` | (clamp 자체 vw 기반 자동) | marketing hero |
+| Token           | desktop      | max-sm (mobile)           | 의도                 |
+| --------------- | ------------ | ------------------------- | -------------------- |
+| `text-3xl`      | 24px         | 20px (0.83x)              | h1 heading           |
+| `text-4xl`      | 30px         | 24px (0.8x)               | display heading      |
+| `text-2xl` 이하 | 그대로       | (override 없음)           | small 이미 mobile-OK |
+| `display-1/2/3` | `clamp(...)` | (clamp 자체 vw 기반 자동) | marketing hero       |
 
 ### Space (`space.json`)
 
-| Token | desktop | max-sm (mobile) | 의도 |
-|---|---|---|---|
-| `space-8` | 32px | 16px (0.5x) | page padding x |
-| `space-10` | 40px | 20px (0.5x) | (특수) |
-| `space-12` | 48px | 24px (0.5x) | section gap (default) |
-| `space-16` | 64px | 32px (0.5x) | large section gap |
-| `space-20` | 80px | 40px (0.5x) | bottom page padding |
-| `space-6` 이하 | 그대로 | (override 없음) | small 이미 mobile-OK |
+| Token          | desktop | max-sm (mobile) | 의도                  |
+| -------------- | ------- | --------------- | --------------------- |
+| `space-8`      | 32px    | 16px (0.5x)     | page padding x        |
+| `space-10`     | 40px    | 20px (0.5x)     | (특수)                |
+| `space-12`     | 48px    | 24px (0.5x)     | section gap (default) |
+| `space-16`     | 64px    | 32px (0.5x)     | large section gap     |
+| `space-20`     | 80px    | 40px (0.5x)     | bottom page padding   |
+| `space-6` 이하 | 그대로  | (override 없음) | small 이미 mobile-OK  |
 
 ---
 
@@ -130,62 +135,76 @@ import { useBreakpoint, useIsBreakpointUp } from '@makitt/mds';
 const bp = useBreakpoint();
 const isDesktop = useIsBreakpointUp('lg');
 
-if (bp === null) return <MobileList />;     // < sm
-if (!isDesktop) return <TabletGrid />;      // sm 이상 lg 미만
+if (bp === null) return <MobileList />; // < sm
+if (!isDesktop) return <TabletGrid />; // sm 이상 lg 미만
 return <DesktopDataGrid />;
 ```
 
-> 단순 visual scale (font-size / spacing) 에 hook 사용 = anti-pattern. token responsive 활용.
+> 단순 visual scale (font-size / spacing) 에 hook 사용 = anti-pattern. token
+> responsive 활용.
 
 ---
 
 ## 6. 결정 표 (lookup)
 
-| 케이스 | 답 |
-|---|---|
-| "h1 의 mobile 의 size 축소" | token responsive — `$extensions.mds.responsive.max-sm` |
-| "DataGrid → mobile 의 card list" | `useBreakpoint() === null` 의 분기 (큰 변형) |
+| 케이스                            | 답                                                                 |
+| --------------------------------- | ------------------------------------------------------------------ |
+| "h1 의 mobile 의 size 축소"       | token responsive — `$extensions.mds.responsive.max-sm`             |
+| "DataGrid → mobile 의 card list"  | `useBreakpoint() === null` 의 분기 (큰 변형)                       |
 | "Sidebar → mobile 의 drawer 모드" | `useIsBreakpointUp('md')` 의 분기 (또는 mds 의 AppShell 자체 처리) |
-| "특정 페이지 의 큰 hero size" | Tailwind `text-4xl md:text-6xl` 또는 token clamp (display-*) |
-| "section gap 의 mobile 축소" | token responsive — `space-12` 의 `max-sm` |
-| "특정 페이지 의 unique padding" | inline / Tailwind utility (token override 보다 caller 직접) |
+| "특정 페이지 의 큰 hero size"     | Tailwind `text-4xl md:text-6xl` 또는 token clamp (display-\*)      |
+| "section gap 의 mobile 축소"      | token responsive — `space-12` 의 `max-sm`                          |
+| "특정 페이지 의 unique padding"   | inline / Tailwind utility (token override 보다 caller 직접)        |
 
 ---
 
 ## 7. 안티 패턴
 
-- ❌ **inline JS 분기 의 padding / font-size** (`style={{ padding: bp === null ? 16 : 32 }}`) — token responsive 활용
-- ❌ **DataGrid → card list 전환 의 token 만 의지** — layout 큰 변형 = JS 분기 필요
-- ❌ **token 의 한 size 만 mobile 안 적용** (다른 size 는 mobile 자동 인데) — 일관성. token responsive 의 metadata 통일
-- ❌ **`@media` block 의 직접 inline** (component SCSS 의 `@media (max-width: 640px) { ... }`) — token responsive 가 자동
-- ❌ **breakpoint 의 hardcoded px** (`@media (max-width: 700px)`) — token sm/md/lg/xl 통해
-- ❌ **mobile 의 "고정" size** (clamp 대신 max-sm = 12px 같은 너무 작은) — 사용자 가 읽을 size 보장 (≥ 14px body)
+- ❌ **inline JS 분기 의 padding / font-size**
+  (`style={{ padding: bp === null ? 16 : 32 }}`) — token responsive 활용
+- ❌ **DataGrid → card list 전환 의 token 만 의지** — layout 큰 변형 = JS 분기
+  필요
+- ❌ **token 의 한 size 만 mobile 안 적용** (다른 size 는 mobile 자동 인데) —
+  일관성. token responsive 의 metadata 통일
+- ❌ **`@media` block 의 직접 inline** (component SCSS 의
+  `@media (max-width: 640px) { ... }`) — token responsive 가 자동
+- ❌ **breakpoint 의 hardcoded px** (`@media (max-width: 700px)`) — token
+  sm/md/lg/xl 통해
+- ❌ **mobile 의 "고정" size** (clamp 대신 max-sm = 12px 같은 너무 작은) —
+  사용자 가 읽을 size 보장 (≥ 14px body)
 
 ---
 
 ## 8. TBD (별도 cycle)
 
-1. **min-* breakpoint** — desktop 에서 더 큰 size 를 적용하려는 의도 (mobile-first 와 흐름이 다름). 현재 max-* 만
-2. **breakpoint 의 dynamic mapping** — `formats.ts` 의 `RESPONSIVE_BREAKPOINT_QUERIES` 가 hardcoded. `breakpoint.json` read 후 dynamic 가능
-3. **추가 token 의 mobile fallback** — line-height / radius / shadow / icon-size 의 mobile 의도. 추가 token JSON 의 `$extensions` metadata
-4. **Tailwind preset 의 responsive** — Tailwind 의 `text-3xl md:text-4xl` 같은 utility 의 자동 generation (token 의 mobile / desktop 양쪽 활용)
-5. **Storybook viewport addon** — Storybook 의 viewport addon 의 standard viewport 추가 (mobile 375 / tablet 768 / desktop 1280)
+1. **min-\* breakpoint** — desktop 에서 더 큰 size 를 적용하려는 의도
+   (mobile-first 와 흐름이 다름). 현재 max-\* 만
+2. **breakpoint 의 dynamic mapping** — `formats.ts` 의
+   `RESPONSIVE_BREAKPOINT_QUERIES` 가 hardcoded. `breakpoint.json` read 후
+   dynamic 가능
+3. **추가 token 의 mobile fallback** — line-height / radius / shadow / icon-size
+   의 mobile 의도. 추가 token JSON 의 `$extensions` metadata
+4. **Tailwind preset 의 responsive** — Tailwind 의 `text-3xl md:text-4xl` 같은
+   utility 의 자동 generation (token 의 mobile / desktop 양쪽 활용)
+5. **Storybook viewport addon** — Storybook 의 viewport addon 의 standard
+   viewport 추가 (mobile 375 / tablet 768 / desktop 1280)
 
 ---
 
 ## 9. Cross-cutting
 
-| Axis | 적용 |
-|---|---|
-| **A11y** | mobile 의 최소 font-size (14px body 기준) + tap target (44x44px 권장) 따로 |
-| **i18n** | 한국어 의 폰 size 별 가독성 (CJK 가 라틴 보다 작은 px 에 어려움) — mobile 의 base 가 너무 작지 않게 |
-| **AI fill** | token 명 의 catalog 가 mds_components_get 통해 (Step 5) — AI 가 `var(--text-3xl)` 자동 권장 |
-| **Catalog** | token / 페이지 별 사용 의 inventory (TBD — 추가 catalog) |
+| Axis        | 적용                                                                                                |
+| ----------- | --------------------------------------------------------------------------------------------------- |
+| **A11y**    | mobile 의 최소 font-size (14px body 기준) + tap target (44x44px 권장) 따로                          |
+| **i18n**    | 한국어 의 폰 size 별 가독성 (CJK 가 라틴 보다 작은 px 에 어려움) — mobile 의 base 가 너무 작지 않게 |
+| **AI fill** | token 명 의 catalog 가 mds_components_get 통해 (Step 5) — AI 가 `var(--text-3xl)` 자동 권장         |
+| **Catalog** | token / 페이지 별 사용 의 inventory (TBD — 추가 catalog)                                            |
 
 ---
 
 ## Related Playbooks
 
-- [page-layout.md](./page-layout.md) — Page / Section / Sidebar 의 responsive 변형
+- [page-layout.md](./page-layout.md) — Page / Section / Sidebar 의 responsive
+  변형
 - [data-grid.md](./data-grid.md) — DataGrid → mobile card list 변형 (큰 변형)
 - [form.md](./form.md) — Form 의 mobile 변형 표 (각 § 의 Mobile 컬럼)

package/dist/data/recipes/admin-list-page.md

@@ -0,0 +1,86 @@
+---
+id: admin-list-page
+title: Admin List Page
+status: implemented
+components:
+  - Page
+  - PageHeader
+  - Section.Root
+  - Section.Header
+  - Section.Body
+  - DataGrid
+  - Table.Root
+  - Pagination.Root
+  - Button
+  - IconButton
+  - Menu.Root
+  - Pill
+  - Banner
+  - EmptyState
+  - LoadingState
+  - SkeletonRows
+  - ErrorState
+playbooks:
+  - page-layout
+  - data-grid
+  - async-states
+---
+
+# Admin List Page
+
+Use this recipe for a dense admin page that lists many resources and supports
+scan, filter, sort, row action, empty, loading, and error states.
+
+## Contract
+
+- Use `Page` as the outer surface and `PageHeader` for title, description, and
+  primary action.
+- Put the list inside `Section.Root`; use `Section.Header` for list title,
+  count, filters, and secondary actions.
+- Prefer `DataGrid` when sorting, column visibility, sticky columns, density, or
+  resize is needed.
+- Use `Table.Root` only for simple static tabular content where grid behavior is
+  not needed.
+- Use `Pill` for status values and compact categorical state.
+- Use `Menu.Root` or `IconButton` for row actions instead of visible action text
+  in every row.
+- Use `Pagination.Root` when result count can exceed one page.
+
+## Required States
+
+- Loading: show `LoadingState` for first load, or `SkeletonRows` inside the
+  section body when preserving table geometry matters.
+- Empty: show `EmptyState` with one clear CTA if the user can create the first
+  item.
+- Error: show `ErrorState` with retry action.
+- Partial/error inline: use `Banner` at the top of `Section.Body`, then keep the
+  last usable data visible.
+
+## Composition
+
+1. `Page`
+2. `PageHeader` with title, short description, and primary `Button`
+3. `Section.Root`
+4. `Section.Header` with result count, compact filters, and view actions
+5. `Section.Body`
+6. `DataGrid` or `Table.Root`
+7. `Pagination.Root` in the section footer or after the grid
+
+## Do Not
+
+- Do not make custom cards for each row when the content is naturally tabular.
+- Do not put app routing, query keys, permission checks, or persistence rules in
+  this recipe.
+- Do not inline visual values to align columns; use existing table/grid props or
+  add missing MDS tokens/components.
+
+## MCP Usage
+
+Before coding, query:
+
+- `mds_recipes_get("admin-list-page")`
+- `mds_playbook_get("data-grid")`
+- `mds_playbook_get("async-states")`
+- `mds_components_get("DataGrid")`
+- `mds_components_get("Page")`
+- `mds_components_get("PageHeader")`

package/dist/data/recipes/async-state-section.md

@@ -0,0 +1,60 @@
+---
+id: async-state-section
+title: Async State Section
+status: implemented
+components:
+  - Section.Root
+  - Section.Header
+  - Section.Body
+  - LoadingState
+  - SkeletonRows
+  - EmptyState
+  - ErrorState
+  - Banner
+  - Button
+playbooks:
+  - async-states
+  - feedback
+---
+
+# Async State Section
+
+Use this recipe for any section whose content depends on asynchronous data or an
+operation that can load, fail, return empty, or partially succeed.
+
+## Contract
+
+- Keep the `Section.Root` and `Section.Header` stable across states whenever the
+  section identity is known.
+- Use `LoadingState` for first-load full replacement.
+- Use `SkeletonRows` when preserving list/table rhythm is more useful than a
+  generic loading message.
+- Use `EmptyState` when the request succeeds with no useful items.
+- Use `ErrorState` when no useful content can be shown.
+- Use `Banner` when content remains visible but a warning/error needs attention.
+
+## Required States
+
+- First load
+- Refreshing with stale content still visible
+- Empty result
+- Blocking error
+- Partial error
+- Mutating or saving
+
+## Do Not
+
+- Do not remove page or section chrome just because content is loading.
+- Do not invent one-off loading/empty/error visuals.
+- Do not encode app-specific retry or cache semantics in this recipe.
+
+## MCP Usage
+
+Before coding, query:
+
+- `mds_recipes_get("async-state-section")`
+- `mds_playbook_get("async-states")`
+- `mds_playbook_get("feedback")`
+- `mds_components_get("LoadingState")`
+- `mds_components_get("EmptyState")`
+- `mds_components_get("ErrorState")`

package/dist/data/recipes/dashboard-overview.md

@@ -0,0 +1,65 @@
+---
+id: dashboard-overview
+title: Dashboard Overview
+status: implemented
+components:
+  - Page
+  - PageHeader
+  - StatCard
+  - Delta
+  - Chart.Line
+  - Chart.Bar
+  - DataList.Root
+  - Table.Root
+  - Section.Root
+  - SkeletonRows
+  - ErrorState
+playbooks:
+  - page-layout
+  - data-grid
+  - async-states
+---
+
+# Dashboard Overview
+
+Use this recipe for an operational overview page with KPIs, trends, recent
+activity, and short actionable lists.
+
+## Contract
+
+- Use `Page` and `PageHeader` for page identity and high-level actions.
+- Put KPI cards in a consistent grid using `StatCard` and `Delta`.
+- Use `Chart.Line` or `Chart.Bar` for trend visualization.
+- Use `Section.Root` around each chart or list group.
+- Use `DataList.Root` for compact recent activity or mixed row content.
+- Use `Table.Root` when recent data is naturally tabular.
+
+## Layout Guidance
+
+- First row: primary metrics with `StatCard`.
+- Middle row: trend chart plus supporting list or secondary chart.
+- Lower rows: recent activity, tasks, or operational exceptions.
+- Keep each section scannable; avoid marketing-style hero composition.
+
+## Required States
+
+- Loading: use `SkeletonRows` for lists and chart-level loading placeholders.
+- Error: use `ErrorState` inside the failed section; do not blank the whole page
+  if other sections have usable data.
+- Empty: use `EmptyState` in the affected section only.
+
+## Do Not
+
+- Do not place domain-specific KPI names or metric formulas in this recipe.
+- Do not create decorative cards around entire page sections.
+- Do not hand-roll chart chrome if MDS chart components cover the case.
+
+## MCP Usage
+
+Before coding, query:
+
+- `mds_recipes_get("dashboard-overview")`
+- `mds_playbook_get("page-layout")`
+- `mds_components_get("StatCard")`
+- `mds_components_get("Chart.Line")`
+- `mds_components_get("DataList.Root")`

package/dist/data/recipes/detail-drawer.md

@@ -0,0 +1,69 @@
+---
+id: detail-drawer
+title: Detail Drawer
+status: implemented
+components:
+  - Drawer.Root
+  - Drawer.Content
+  - Drawer.Header
+  - Drawer.Body
+  - Drawer.Footer
+  - Drawer.Title
+  - Drawer.Description
+  - DescriptionList.Root
+  - Timeline.Root
+  - Section.Root
+  - Button
+  - Pill
+playbooks:
+  - overlay
+  - page-layout
+  - data-grid
+---
+
+# Detail Drawer
+
+Use this recipe when the user selects an item from a list and needs to inspect
+or act on details without losing list context.
+
+## Contract
+
+- Use `Drawer.Root` and `Drawer.Content`.
+- Use `Drawer.Header` for title, status, and short description.
+- Use `Drawer.Body` for grouped information.
+- Use `DescriptionList.Root` for key-value facts.
+- Use `Timeline.Root` for chronological events.
+- Use `Section.Root` inside the drawer when detail content has multiple groups.
+- Use `Drawer.Footer` for persistent actions that apply to the selected item.
+
+## Fit Criteria
+
+- Good fit: read-heavy detail, secondary edit action, audit trail, status
+  explanation, preview next to a list.
+- Bad fit: global settings, long forms, full-screen workflow, or content that
+  needs multiple route-level tabs.
+
+## Required States
+
+- Loading selected item, not found, permission-limited content, action pending,
+  action error.
+- If the list row remains selected while the drawer is open, selected visual
+  state must use MDS selected tokens/components, not custom color.
+
+## Do Not
+
+- Do not make the drawer the only place where critical page state exists.
+- Do not put app-specific routing, fetch, permission, or mutation rules in this
+  recipe.
+- Do not overflow action buttons into arbitrary inline styles; use
+  `Drawer.Footer` composition.
+
+## MCP Usage
+
+Before coding, query:
+
+- `mds_recipes_get("detail-drawer")`
+- `mds_playbook_get("overlay")`
+- `mds_components_get("Drawer.Content")`
+- `mds_components_get("DescriptionList.Root")`
+- `mds_components_get("Timeline.Root")`

package/dist/data/recipes/modal-form.md

@@ -0,0 +1,67 @@
+---
+id: modal-form
+title: Modal Form
+status: implemented
+components:
+  - Modal.Root
+  - Modal.Content
+  - Modal.Header
+  - Modal.Body
+  - Modal.Footer
+  - Modal.Title
+  - Modal.Description
+  - Field.Root
+  - TextField
+  - Select
+  - Button
+  - Banner
+playbooks:
+  - overlay
+  - form
+  - feedback
+---
+
+# Modal Form
+
+Use this recipe when a short, focused form is an interruption to the current
+page and the user should return to the same context after submitting or
+cancelling.
+
+## Contract
+
+- Use `Modal.Root` and `Modal.Content`.
+- Use `Modal.Header` with `Modal.Title` and optional `Modal.Description`.
+- Put controls inside `Modal.Body`; each control still uses `Field.Root`.
+- Put commit/cancel actions inside `Modal.Footer`.
+- Primary action belongs on the trailing side; destructive action must use a
+  destructive tone/variant.
+- Use `Banner` inside the body for submit errors that are not tied to one field.
+
+## Fit Criteria
+
+- Good fit: 1-5 fields, quick confirmation, small create/edit flow.
+- Bad fit: long settings forms, multi-step flows, dense table editing, or flows
+  needing deep review. Use `Page`, `Drawer`, or a dedicated pattern instead.
+
+## Required States
+
+- Opening, focused first field or safe heading, invalid fields, submitting,
+  submit error, close/cancel.
+- If closing can lose edits, caller owns the confirmation policy; MDS only
+  provides modal/dialog primitives.
+
+## Do Not
+
+- Do not put platform routing or persistence behavior in this recipe.
+- Do not nest another modal as the default solution.
+- Do not use modal for content users need to compare against a table behind it.
+
+## MCP Usage
+
+Before coding, query:
+
+- `mds_recipes_get("modal-form")`
+- `mds_playbook_get("overlay")`
+- `mds_playbook_get("form")`
+- `mds_components_get("Modal.Content")`
+- `mds_components_get("Field.Root")`

package/dist/data/recipes/settings-form-page.md

@@ -0,0 +1,79 @@
+---
+id: settings-form-page
+title: Settings Form Page
+status: implemented
+components:
+  - Page
+  - PageHeader
+  - Section.Root
+  - Field.Root
+  - Field.Label
+  - Field.Hint
+  - Field.Error
+  - TextField
+  - Textarea
+  - Select
+  - Checkbox
+  - Switch
+  - Button
+  - Toolbar.Root
+  - Banner
+playbooks:
+  - page-layout
+  - form
+  - feedback
+---
+
+# Settings Form Page
+
+Use this recipe for a full-page form that edits configuration, profile,
+notifications, account, store, or integration settings.
+
+## Contract
+
+- Use `Page` and `PageHeader` for page identity.
+- Group related settings with `Section.Root`; each section should own one clear
+  theme of fields.
+- Every control must sit inside `Field.Root` with `Field.Label`.
+- Use `Field.Hint` for persistent guidance and `Field.Error` for validation
+  feedback.
+- Use `Toolbar.Root` for save/cancel or secondary actions when actions are
+  visually tied to the form.
+- Use `Banner` for page-level status such as unsaved remote conflict, save
+  failure, or missing prerequisite.
+
+## Field Choice
+
+- Short text: `TextField`
+- Long text: `Textarea`
+- One option from known set: `Select`
+- Boolean setting with immediate on/off meaning: `Switch`
+- Boolean agreement or batch item selection: `Checkbox`
+- Numeric setting: `NumberInput`
+- Date or time setting: `DatePicker` / `TimePicker`
+
+## Required States
+
+- Default, dirty, saving, saved, invalid, disabled/read-only.
+- Validation must be represented through `Field.Error`; do not rely on color
+  only.
+- Long forms should keep actions discoverable with section or bottom toolbar
+  placement chosen by the caller.
+
+## Do Not
+
+- Do not encode app-specific form library, mutation, query, or persistence rules
+  in MDS recipe content.
+- Do not place every setting in one visual group.
+- Do not use placeholder text as the only label.
+
+## MCP Usage
+
+Before coding, query:
+
+- `mds_recipes_get("settings-form-page")`
+- `mds_playbook_get("form")`
+- `mds_components_get("Field.Root")`
+- `mds_components_get("TextField")`
+- `mds_components_get("Select")`
+- `mds_components_get("Toolbar.Root")`

package/dist/index.d.ts

@@ -1,28 +1,9 @@
 #!/usr/bin/env node
 /**
- * @makitt/mds-mcp-server — MCP server for mds.
+ * @makitt/mds-mcp-server — MCP server for MDS.
  *
- * AI (Claude Code / Cursor) 가 mds catalog + playbook 을 자동 query 가능.
- * Fabrication 0 의 최종 layer — 사용자가 mds 의 props / 안티패턴 / 사용 약속을 정확히 lookup.
- *
- * Tools:
- *   - mds_components_list — 모든 컴포넌트 list (layer 필터)
- *   - mds_components_get — 특정 컴포넌트의 full spec (props/types/description)
- *   - mds_components_search — text search (name / description / prop)
- *   - mds_playbook_list — 모든 Playbook area list
- *   - mds_playbook_get — 특정 Playbook 의 content (form / feedback / data-grid 등)
- *   - mds_playbook_search — Playbook 의 decision matrix / 안티패턴 검색
- *
- * Transport: stdio (Claude Code / Cursor 호환)
- *
- * Setup:
- *   1. Build: `pnpm build`
- *   2. Claude Code MCP config: ~/.claude/claude_desktop_config.json
- *      {
- *        "mcpServers": {
- *          "mds": { "command": "node", "args": ["/path/to/mds-mcp-server/dist/index.js"] }
- *        }
- *      }
+ * Transport: stdio (Claude Code / Cursor compatible)
  */
-export {};
+export { callMdsTool, listMdsTools } from './tools.js';
+export declare function startMdsMcpServer(): Promise<void>;
 //# sourceMappingURL=index.d.ts.map