@morya-ui/mcp 0.3.5 → 0.3.6

package/data/golden-pages/wizard-form.vue

@@ -1,182 +1,182 @@
-<script setup lang="ts">
-/**
- * 黄金样例：分步向导（wizard-form）
- * MStepper + 每步一个主任务；完成态可接 result-page。
- * @see DESIGN.md · surfaces § Flow · pattern wizard-form
- */
-import {
-  MBreadcrumb,
-  MButton,
-  MConfigProvider,
-  MForm,
-  MFormItem,
-  MInput,
-  MInputTags,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MPageContent,
-  MPageHeader,
-  MPageSection,
-  MSelect,
-  MSpace,
-  MStepper,
-  message,
-  zhCN,
-} from 'morya-ui'
-import { computed, reactive, ref } from 'vue'
-
-const activeStep = ref(0)
-const submitting = ref(false)
-
-const steps = [
-  { label: '工作空间', description: '名称与地区' },
-  { label: '邀请成员', description: '可选邮箱' },
-  { label: '确认', description: '核对后创建' },
-]
-
-const model = reactive({
-  name: '',
-  region: undefined as string | undefined,
-  invites: [] as string[],
-})
-
-const regionOptions = [
-  { label: '中国大陆', value: 'cn' },
-  { label: '亚太', value: 'apac' },
-  { label: '北美', value: 'na' },
-]
-
-const canNext = computed(() => {
-  if (activeStep.value === 0) return Boolean(model.name && model.region)
-  return true
-})
-
-function back() {
-  if (activeStep.value > 0) activeStep.value -= 1
-}
-
-function next() {
-  if (!canNext.value) return
-  if (activeStep.value < steps.length - 1) activeStep.value += 1
-}
-
-async function finish() {
-  submitting.value = true
-  try {
-    // await api.createWorkspace(model)
-    message.success('工作空间已创建')
-    // 成功页可镜像 get_golden_page('result-page')，将 status 改为 success
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout fill-viewport>
-      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
-        <MBreadcrumb
-          :model="[
-            { label: '首页', to: '/' },
-            { label: '工作空间', to: '/workspaces' },
-            { label: '创建' },
-          ]"
-        />
-      </MLayoutHeader>
-
-      <MLayoutContent>
-        <MPageContent width="narrow">
-          <MPageHeader
-            title="创建工作空间"
-            description="三步完成；每步只做一件事。Stepper 使用 steps（不是 items）。"
-          />
-
-          <MStepper v-model="activeStep" :steps="steps" linear />
-
-          <MPageSection variant="form">
-            <MForm v-if="activeStep === 0" @submit.prevent="next">
-              <MFormItem label="名称" name="name" required>
-                <MInput v-model="model.name" placeholder="例如：青禾书房" fluid />
-              </MFormItem>
-              <MFormItem label="地区" name="region" required>
-                <MSelect
-                  v-model="model.region"
-                  :options="regionOptions"
-                  placeholder="选择地区"
-                  fluid
-                />
-              </MFormItem>
-            </MForm>
-
-            <MForm v-else-if="activeStep === 1" @submit.prevent="next">
-              <MFormItem label="邀请邮箱" name="invites">
-                <MInputTags
-                  v-model="model.invites"
-                  placeholder="输入邮箱后回车"
-                />
-              </MFormItem>
-              <p class="wizard-hint">
-                可跳过；稍后也可在成员管理中邀请。
-              </p>
-            </MForm>
-
-            <div v-else class="wizard-summary">
-              <p><strong>名称</strong> {{ model.name || '—' }}</p>
-              <p><strong>地区</strong> {{ model.region || '—' }}</p>
-              <p><strong>邀请</strong> {{ model.invites.length ? model.invites.join('、') : '暂无' }}</p>
-            </div>
-
-            <MPageSection variant="actions">
-              <MSpace>
-                <MButton
-                  severity="secondary"
-                  text
-                  :disabled="activeStep === 0 || submitting"
-                  @click="back"
-                >
-                  上一步
-                </MButton>
-                <MButton
-                  v-if="activeStep < steps.length - 1"
-                  severity="primary"
-                  :disabled="!canNext"
-                  @click="next"
-                >
-                  下一步
-                </MButton>
-                <MButton
-                  v-else
-                  severity="primary"
-                  :loading="submitting"
-                  @click="finish"
-                >
-                  创建
-                </MButton>
-              </MSpace>
-            </MPageSection>
-          </MPageSection>
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MConfigProvider>
-</template>
-
-<style scoped>
-.wizard-hint,
-.wizard-summary {
-  margin: 0;
-  color: var(--m-color-text-muted);
-  font-size: var(--m-font-size-sm);
-}
-
-.wizard-summary {
-  display: grid;
-  gap: var(--m-space-2);
-}
-
-.wizard-summary p {
-  margin: 0;
-}
-</style>
+<script setup lang="ts">
+/**
+ * 黄金样例：分步向导（wizard-form）
+ * MStepper + 每步一个主任务；完成态可接 result-page。
+ * @see DESIGN.md · surfaces § Flow · pattern wizard-form
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MInputTags,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MStepper,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { computed, reactive, ref } from 'vue'
+
+const activeStep = ref(0)
+const submitting = ref(false)
+
+const steps = [
+  { label: '工作空间', description: '名称与地区' },
+  { label: '邀请成员', description: '可选邮箱' },
+  { label: '确认', description: '核对后创建' },
+]
+
+const model = reactive({
+  name: '',
+  region: undefined as string | undefined,
+  invites: [] as string[],
+})
+
+const regionOptions = [
+  { label: '中国大陆', value: 'cn' },
+  { label: '亚太', value: 'apac' },
+  { label: '北美', value: 'na' },
+]
+
+const canNext = computed(() => {
+  if (activeStep.value === 0) return Boolean(model.name && model.region)
+  return true
+})
+
+function back() {
+  if (activeStep.value > 0) activeStep.value -= 1
+}
+
+function next() {
+  if (!canNext.value) return
+  if (activeStep.value < steps.length - 1) activeStep.value += 1
+}
+
+async function finish() {
+  submitting.value = true
+  try {
+    // await api.createWorkspace(model)
+    message.success('工作空间已创建')
+    // 成功页可镜像 get_golden_page('result-page')，将 status 改为 success
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb
+          :model="[
+            { label: '首页', to: '/' },
+            { label: '工作空间', to: '/workspaces' },
+            { label: '创建' },
+          ]"
+        />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader
+            title="创建工作空间"
+            description="三步完成；每步只做一件事。Stepper 使用 steps（不是 items）。"
+          />
+
+          <MStepper v-model="activeStep" :steps="steps" linear />
+
+          <MPageSection variant="form">
+            <MForm v-if="activeStep === 0" @submit.prevent="next">
+              <MFormItem label="名称" name="name" required>
+                <MInput v-model="model.name" placeholder="例如：青禾书房" fluid />
+              </MFormItem>
+              <MFormItem label="地区" name="region" required>
+                <MSelect
+                  v-model="model.region"
+                  :options="regionOptions"
+                  placeholder="选择地区"
+                  fluid
+                />
+              </MFormItem>
+            </MForm>
+
+            <MForm v-else-if="activeStep === 1" @submit.prevent="next">
+              <MFormItem label="邀请邮箱" name="invites">
+                <MInputTags
+                  v-model="model.invites"
+                  placeholder="输入邮箱后回车"
+                />
+              </MFormItem>
+              <p class="wizard-hint">
+                可跳过；稍后也可在成员管理中邀请。
+              </p>
+            </MForm>
+
+            <div v-else class="wizard-summary">
+              <p><strong>名称</strong> {{ model.name || '—' }}</p>
+              <p><strong>地区</strong> {{ model.region || '—' }}</p>
+              <p><strong>邀请</strong> {{ model.invites.length ? model.invites.join('、') : '暂无' }}</p>
+            </div>
+
+            <MPageSection variant="actions">
+              <MSpace>
+                <MButton
+                  severity="secondary"
+                  text
+                  :disabled="activeStep === 0 || submitting"
+                  @click="back"
+                >
+                  上一步
+                </MButton>
+                <MButton
+                  v-if="activeStep < steps.length - 1"
+                  severity="primary"
+                  :disabled="!canNext"
+                  @click="next"
+                >
+                  下一步
+                </MButton>
+                <MButton
+                  v-else
+                  severity="primary"
+                  :loading="submitting"
+                  @click="finish"
+                >
+                  创建
+                </MButton>
+              </MSpace>
+            </MPageSection>
+          </MPageSection>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.wizard-hint,
+.wizard-summary {
+  margin: 0;
+  color: var(--m-color-text-muted);
+  font-size: var(--m-font-size-sm);
+}
+
+.wizard-summary {
+  display: grid;
+  gap: var(--m-space-2);
+}
+
+.wizard-summary p {
+  margin: 0;
+}
+</style>

package/dist/__tests__/fidelity.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/fidelity.test.js

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import { codeCoversBlock, mapReferenceBrief } from '../reference-brief.js';
+import { findStyleShell, listStyleShells } from '../style-shells.js';
+import { createToolHandlers } from '../tools.js';
+function read(result) {
+    return JSON.parse(result.content[0].text);
+}
+describe('reference brief mapping', () => {
+    it('maps list brief to filters/table/status snippets', () => {
+        const mapped = mapReferenceBrief({
+            intent: '油井管理列表',
+            surface: 'list',
+            density: 'compact',
+            requiredBlocks: ['filters', 'table', 'status'],
+            primaryAction: '新建油井',
+        });
+        expect(mapped.surface).toBe('ops-list');
+        expect(mapped.density).toBe('compact');
+        expect(mapped.suggestedSnippets).toContain('list-filters-dense');
+        expect(mapped.suggestedSnippets).toContain('list-table');
+        expect(mapped.suggestedShellId).toBe('ops-quiet');
+        expect(mapped.craftCuesZh.some((line) => line.includes('新建油井'))).toBe(true);
+    });
+    it('detects covered blocks in generated code', () => {
+        const code = '<MPageFilters /><MTable /><MStatus label="启用" />';
+        expect(codeCoversBlock(code, 'filters')).toBe(true);
+        expect(codeCoversBlock(code, 'table')).toBe(true);
+        expect(codeCoversBlock(code, 'status')).toBe(true);
+        expect(codeCoversBlock(code, 'kpi')).toBe(false);
+    });
+});
+describe('style shells', () => {
+    it('lists and finds account-split shell with CSS', () => {
+        expect(listStyleShells('account').some((s) => s.id === 'account-split')).toBe(true);
+        const shell = findStyleShell('account-split');
+        expect(shell?.css).toContain('--m-color-primary');
+        expect(shell?.css).not.toMatch(/#[0-9a-f]{3,8}/i);
+    });
+});
+describe('fidelity tools', () => {
+    const handlers = createToolHandlers();
+    it('map_reference returns mapping and shell', () => {
+        const result = read(handlers.mapReference({
+            description: '登录页左侧品牌栏，右侧邮箱密码表单',
+            surface: 'account',
+        }));
+        expect(result.suggestedSnippets).toContain('auth-split-shell');
+        expect(result.styleShell?.id).toBe('account-split');
+        expect(result.styleShell?.css).toContain('login-brand');
+    });
+    it('recommend_page accepts density and brief', () => {
+        const result = read(handlers.recommendPage({
+            intent: '设备台账列表',
+            pageType: 'list',
+            density: 'compact',
+            brief: {
+                description: '高密筛选 + 状态列',
+                requiredBlocks: ['filters', 'table', 'status'],
+            },
+        }));
+        expect(result.density).toBe('compact');
+        expect(result.suggestedSnippets).toContain('list-filters-dense');
+        expect(result.referenceMapping?.mapping.length).toBeGreaterThan(0);
+    });
+    it('validate_page fails contract when brief blocks are missing', () => {
+        const result = read(handlers.validatePage({
+            code: '<MPageContent><MTable :rows="[]" /></MPageContent>',
+            brief: {
+                surface: 'list',
+                requiredBlocks: ['filters', 'table', 'status'],
+            },
+        }));
+        expect(result.ok).toBe(false);
+        expect(result.contract.some((item) => item.type === 'brief-missing-block')).toBe(true);
+    });
+    it('validate_page flags placeholder copy as craft', () => {
+        const result = read(handlers.validatePage({
+            code: '<MEmpty title="暂无数据" description="示例" />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.craft.some((item) => item.type === 'placeholder-copy')).toBe(true);
+    });
+    it('get_style_shells returns pasteable css', () => {
+        const result = read(handlers.getStyleShells({ shell: 'express-hero' }));
+        expect(result.id).toBe('express-hero');
+        expect(result.css).toContain('landing-hero');
+    });
+});

package/dist/__tests__/page-snippets.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { filterPageSnippets, findPageSnippet, scorePageSnippet } from '../page-snippets.js';
+import { findPageSnippet, scorePageSnippet } from '../page-snippets.js';
 describe('page snippets catalog', () => {
     it('finds composition-first snippets by id', () => {
         for (const id of [
@@ -38,9 +38,17 @@ describe('page snippets catalog', () => {
         expect(scorePageSnippet(snippet, 'filters')).toBeGreaterThan(0);
         expect(scorePageSnippet(snippet, 'search')).toBeGreaterThan(0);
     });
-    it('filters snippets by page type', () => {
-        const result = filterPageSnippets({ pageType: 'dashboard' });
-        expect(result.items.some((item) => item.id === 'dashboard-kpi-grid')).toBe(true);
-        expect(result.items.some((item) => item.id === 'list-filters')).toBe(false);
+    it('list-table includes status, numeric align, and domain empty copy', () => {
+        const table = findPageSnippet('list-table');
+        expect(table.template).toContain('MStatus');
+        expect(table.scriptSetup).toContain("align: 'end'");
+        expect(table.template).toContain('tabular-nums');
+        expect(table.template).toContain('还没有成员');
+        expect(table.imports).toContain('MStatus');
+    });
+    it('form-body sets label-width and domain placeholders', () => {
+        const form = findPageSnippet('form-body');
+        expect(form.template).toContain('label-width');
+        expect(form.template).toContain('MSelect');
     });
 });

package/dist/__tests__/tools.test.js

@@ -315,26 +315,26 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.ok).toBe(true);
         expect(result.suggestions.some((item) => item.type === 'menu-missing-icons')).toBe(false);
     });
-    it('flags MTable data prop as contract advisory', () => {
+    it('flags MTable data prop as contract failure', () => {
         const result = read(handlers.validatePage({
             code: '<MTable :columns="columns" :data="rows" />',
         }));
-        expect(result.ok).toBe(true);
-        expect(result.suggestions.some((item) => item.type === 'table-data-prop')).toBe(true);
+        expect(result.ok).toBe(false);
+        expect(result.suggestions.some((item) => item.type === 'table-data-prop' && item.severity === 'contract')).toBe(true);
     });
     it('flags MMessage severity as inline-alert misuse', () => {
         const result = read(handlers.validatePage({
             code: '<MMessage severity="error">登录失败</MMessage>',
         }));
-        expect(result.ok).toBe(true);
-        expect(result.suggestions.some((item) => item.type === 'mmessage-as-alert')).toBe(true);
+        expect(result.ok).toBe(false);
+        expect(result.suggestions.some((item) => item.type === 'mmessage-as-alert' && item.severity === 'contract')).toBe(true);
     });
     it('flags one-line toast string as message preference', () => {
         const result = read(handlers.validatePage({
             code: `toast.success('已保存')`,
         }));
-        expect(result.ok).toBe(true);
-        expect(result.suggestions.some((item) => item.type === 'toast-one-liner')).toBe(true);
+        expect(result.ok).toBe(false);
+        expect(result.suggestions.some((item) => item.type === 'toast-one-liner' && item.severity === 'contract')).toBe(true);
     });
     it('flags MTag in cell-status when MStatus is missing', () => {
         const result = read(handlers.validatePage({
@@ -407,10 +407,12 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.counts.decisions).toBeGreaterThan(0);
         expect(result.counts.resources).toBeGreaterThan(100);
         expect(result.counts.resourceTemplates).toBe(3);
-        expect(result.tools).toHaveLength(19);
+        expect(result.tools).toHaveLength(21);
         expect(result.tools).toContain('get_golden_page');
         expect(result.tools).toContain('get_page_snippet');
         expect(result.tools).toContain('get_style_direction');
+        expect(result.tools).toContain('map_reference');
+        expect(result.tools).toContain('get_style_shells');
         expect(result.tools).not.toContain('list_style_presets');
         expect(result.tools).not.toContain('get_style_preset');
         expect(result.tools).toContain('validate_page');

package/dist/index.js

@@ -86,20 +86,49 @@ register('get_pattern', 'Read the structure, component composition, layout, and
     pattern: z.string().min(1),
     mode: z.string().optional(),
 }, async (args) => handlers.getPattern(args));
-register('recommend_page', 'Recommend a page pattern and component composition from product intent. Pass style as free-text user description when they specified a look (no preset catalog). Pass includeScaffold: true for starter Vue code.', {
+register('recommend_page', 'Recommend a page pattern and component composition from product intent. Pass style as free-text look; density=compact|default|spacious; brief for reference fidelity mapping; includeScaffold for optional golden structure.', {
     intent: z.string().min(1),
     pageType: z.string().optional(),
     features: z.array(z.string()).max(20).optional(),
     style: z.string().optional().describe('Optional free-text style description from the user (not a preset id).'),
+    density: z.string().optional().describe('compact | default | spacious'),
+    brief: z
+        .object({
+        description: z.string().optional(),
+        intent: z.string().optional(),
+        surface: z.string().optional(),
+        density: z.string().optional(),
+        requiredBlocks: z.array(z.string()).max(30).optional(),
+        requiredComponents: z.array(z.string()).max(30).optional(),
+        primaryAction: z.string().optional(),
+        style: z.string().optional(),
+    })
+        .optional(),
     mode: z.string().optional(),
     includeScaffold: z.boolean().optional(),
 }, async (args) => handlers.recommendPage(args));
-register('get_design_rules', 'Return design-token, style-direction rules, semantic-action, accessibility, and composition rules for generated pages.', { mode: z.string().optional() }, async (args) => handlers.getDesignRules(args));
+register('map_reference', 'Map a reference brief (screenshot/mock description, required blocks) to snippets, token roles, and a signature shell. Pass the same brief to validate_page.', {
+    description: z.string().optional(),
+    intent: z.string().optional(),
+    surface: z.string().optional(),
+    density: z.string().optional(),
+    requiredBlocks: z.array(z.string()).max(30).optional(),
+    requiredComponents: z.array(z.string()).max(30).optional(),
+    primaryAction: z.string().optional(),
+    style: z.string().optional(),
+    mode: z.string().optional(),
+}, async (args) => handlers.mapReference(args));
+register('get_design_rules', 'Return design-token, style-direction rules, signature shell catalog, semantic-action, accessibility, and composition rules for generated pages.', { mode: z.string().optional() }, async (args) => handlers.getDesignRules(args));
 register('get_style_direction', 'Resolve visual style direction: follow user reference/description, infer from clear cues, or ask when uncertain. No named preset catalog.', {
     intent: z.string().optional(),
     style: z.string().optional().describe('Free-text style description from the user.'),
     mode: z.string().optional(),
 }, async (args) => handlers.getStyleDirection(args));
+register('get_style_shells', 'List or read token-only signature shells (ops-quiet, account-split, express-hero, …) with pasteable CSS.', {
+    shell: z.string().optional().describe('Shell id for full CSS.'),
+    surface: z.string().optional().describe('Filter: ops | account | flow | express'),
+    mode: z.string().optional(),
+}, async (args) => handlers.getStyleShells(args));
 register('recommend_component', 'List, read, or recommend component selection guides. Omit query/decision to list; pass decision only to read; pass query to recommend.', {
     query: z.string().optional(),
     decision: z.string().optional(),
@@ -112,9 +141,23 @@ register('get_golden_page', 'Read a golden page Vue source sample (list-page, li
     page: z.string().min(1),
     mode: z.string().optional(),
 }, async (args) => handlers.getGoldenPage(args));
-register('validate_page', 'Validate a generated page for composition, spacing, and border anti-patterns.', {
+register('validate_page', 'Validate generated page code: contract issues (ok=false) vs craft suggestions. Pass brief/requiredBlocks for fidelity checks against a reference map.', {
     code: z.string().min(1),
     mode: z.string().optional(),
+    requiredBlocks: z.array(z.string()).max(30).optional(),
+    requiredComponents: z.array(z.string()).max(30).optional(),
+    brief: z
+        .object({
+        description: z.string().optional(),
+        intent: z.string().optional(),
+        surface: z.string().optional(),
+        density: z.string().optional(),
+        requiredBlocks: z.array(z.string()).max(30).optional(),
+        requiredComponents: z.array(z.string()).max(30).optional(),
+        primaryAction: z.string().optional(),
+        style: z.string().optional(),
+    })
+        .optional(),
 }, async (args) => handlers.validatePage(args));
 register('list_page_snippets', 'List reusable page section snippets for local edits (filters, toolbar, form actions, KPI grid, etc.).', {
     query: z.string().optional(),