@webspire/mcp 0.12.0 → 0.13.1

package/dist/search.test.js

@@ -0,0 +1,351 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { searchPatterns, searchSnippets } from './search.js';
+// --- Minimal fixture builders ---
+function makeSnippet(overrides) {
+    const { meta: metaOverrides, ...rest } = overrides;
+    return {
+        title: overrides.title ?? 'Untitled',
+        description: overrides.description ?? '',
+        category: overrides.category ?? 'glass',
+        tags: overrides.tags ?? [],
+        responsive: overrides.responsive ?? false,
+        darkMode: overrides.darkMode ?? false,
+        updatedAt: '2025-01-01',
+        css: '',
+        ...rest,
+        meta: {
+            lines: 10,
+            bytes: 200,
+            tailwind: '',
+            browser: 'baseline-2024',
+            accessibility: {
+                prefersReducedMotion: false,
+                prefersColorScheme: false,
+                supportsCheck: false,
+            },
+            customProperties: [],
+            classes: [],
+            useCases: [],
+            solves: [],
+            usageExample: '',
+            ...metaOverrides,
+        },
+    };
+}
+function makePattern(overrides) {
+    return {
+        title: overrides.title ?? 'Untitled',
+        summary: overrides.summary ?? '',
+        description: overrides.description,
+        kind: overrides.kind ?? 'section',
+        tier: overrides.tier ?? 'base',
+        extends: null,
+        tags: overrides.tags ?? [],
+        semantics: overrides.semantics ?? {
+            domains: [],
+            tones: [],
+            uxGoals: [],
+            avoidForTones: [],
+            avoidForScenarios: [],
+            neighbors: { before: [], after: [], neverWith: [] },
+        },
+        search: overrides.search ?? { intent: [], keywords: [], useCases: [] },
+        frameworks: { html: true, astro: false, webComponent: false },
+        tokens: { color: '', radius: '', shadow: '', spacing: '', typography: '' },
+        capabilities: {
+            responsive: true,
+            darkMode: false,
+            animated: false,
+            interactive: false,
+            dependencies: [],
+            animationPreset: 'none',
+        },
+        slots: [],
+        props: [],
+        files: { html: '', css: null, js: null },
+        install: { copyPasteReady: true, ssrSafe: true, tailwindOnly: true, notes: [] },
+        governance: {
+            status: 'published',
+            quality: 'stable',
+            owner: 'test',
+            updatedAt: '2025-01-01',
+        },
+        ai: overrides.ai,
+        qualityTier: overrides.qualityTier,
+        html: '',
+        css: null,
+        js: null,
+        ...overrides,
+    };
+}
+// --- Snippet search tests ---
+test('searchSnippets: exact ID match ranks first', () => {
+    const snippets = [
+        makeSnippet({ id: 'glass/frosted', title: 'Frosted Glass', category: 'glass' }),
+        makeSnippet({ id: 'text/gradient', title: 'Gradient Text', category: 'text' }),
+        makeSnippet({ id: 'animations/fade-in', title: 'Fade In Animation', category: 'animations' }),
+    ];
+    const results = searchSnippets(snippets, { query: 'frosted' });
+    assert.equal(results.length >= 1, true);
+    assert.equal(results[0].id, 'glass/frosted');
+});
+test('searchSnippets: search by title keyword', () => {
+    const snippets = [
+        makeSnippet({ id: 'glass/frosted', title: 'Frosted Glass Effect', category: 'glass' }),
+        makeSnippet({ id: 'text/headline', title: 'Headline Typography', category: 'text' }),
+    ];
+    const results = searchSnippets(snippets, { query: 'frosted' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'glass/frosted');
+});
+test('searchSnippets: search by tag', () => {
+    const snippets = [
+        makeSnippet({
+            id: 'glass/panel',
+            title: 'Glass Panel',
+            category: 'glass',
+            tags: ['glassmorphism', 'backdrop'],
+        }),
+        makeSnippet({ id: 'text/clip', title: 'Text Clip', category: 'text', tags: ['typography'] }),
+    ];
+    const results = searchSnippets(snippets, { query: 'glassmorphism' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'glass/panel');
+});
+test('searchSnippets: search by solves field', () => {
+    const snippets = [
+        makeSnippet({
+            id: 'glass/overlay',
+            title: 'Overlay',
+            category: 'glass',
+            meta: { solves: ['adds depth to modal backgrounds'], useCases: [] },
+        }),
+        makeSnippet({ id: 'text/label', title: 'Label Style', category: 'text' }),
+    ];
+    const results = searchSnippets(snippets, { query: 'modal backgrounds' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'glass/overlay');
+});
+test('searchSnippets: search by useCases field', () => {
+    const snippets = [
+        makeSnippet({
+            id: 'scroll/reveal',
+            title: 'Scroll Reveal',
+            category: 'scroll',
+            meta: { useCases: ['animate elements into view on scroll into viewport'], solves: [] },
+        }),
+        makeSnippet({ id: 'decorative/divider', title: 'Section Divider', category: 'decorative' }),
+    ];
+    const results = searchSnippets(snippets, { query: 'animate elements viewport' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'scroll/reveal');
+});
+test('searchSnippets: filter by category', () => {
+    const snippets = [
+        makeSnippet({ id: 'glass/frosted', title: 'Frosted Glass', category: 'glass' }),
+        makeSnippet({ id: 'glass/tinted', title: 'Tinted Glass', category: 'glass' }),
+        makeSnippet({ id: 'text/gradient', title: 'Gradient Text', category: 'text' }),
+    ];
+    const results = searchSnippets(snippets, { query: 'glass', category: 'glass' });
+    assert.equal(results.every((s) => s.category === 'glass'), true);
+    assert.equal(results.some((s) => s.id === 'text/gradient'), false);
+});
+test('searchSnippets: empty query returns empty array', () => {
+    const snippets = [
+        makeSnippet({ id: 'glass/frosted', title: 'Frosted Glass', category: 'glass' }),
+    ];
+    const results = searchSnippets(snippets, { query: '' });
+    assert.equal(results.length, 0);
+});
+// --- Pattern search tests ---
+test('searchPatterns: search by family name ranks first', () => {
+    const patterns = [
+        makePattern({
+            id: 'hero/base',
+            family: 'hero',
+            title: 'Hero Base',
+            search: { intent: ['full-width hero section'], keywords: ['hero'], useCases: [] },
+        }),
+        makePattern({
+            id: 'pricing/base',
+            family: 'pricing',
+            title: 'Pricing Base',
+            search: { intent: ['pricing table'], keywords: ['pricing'], useCases: [] },
+        }),
+        makePattern({
+            id: 'faq/base',
+            family: 'faq',
+            title: 'FAQ Base',
+            search: { intent: ['questions and answers'], keywords: ['faq'], useCases: [] },
+        }),
+    ];
+    const results = searchPatterns(patterns, { query: 'hero' });
+    assert.equal(results.length >= 1, true);
+    assert.equal(results[0].family, 'hero');
+});
+test('searchPatterns: filter by tier base only', () => {
+    const patterns = [
+        makePattern({ id: 'hero/base', family: 'hero', title: 'Hero Base', tier: 'base' }),
+        makePattern({
+            id: 'hero/animated',
+            family: 'hero',
+            title: 'Hero Animated',
+            tier: 'enhanced',
+            search: { intent: ['animated hero'], keywords: ['hero', 'animation'], useCases: [] },
+        }),
+        makePattern({ id: 'pricing/base', family: 'pricing', title: 'Pricing Base', tier: 'base' }),
+    ];
+    const results = searchPatterns(patterns, { query: 'hero', tier: 'base' });
+    assert.equal(results.every((p) => p.tier === 'base'), true);
+    assert.equal(results.some((p) => p.id === 'hero/animated'), false);
+});
+test('searchPatterns: filter by domain', () => {
+    const saasSemantics = {
+        domains: ['saas'],
+        tones: ['modern'],
+        uxGoals: ['drive_signup'],
+        avoidForTones: [],
+        avoidForScenarios: [],
+        neighbors: { before: [], after: [], neverWith: [] },
+    };
+    const otherSemantics = {
+        domains: ['legal'],
+        tones: ['serious'],
+        uxGoals: ['build_trust'],
+        avoidForTones: [],
+        avoidForScenarios: [],
+        neighbors: { before: [], after: [], neverWith: [] },
+    };
+    const patterns = [
+        makePattern({
+            id: 'hero/base',
+            family: 'hero',
+            title: 'Hero',
+            semantics: saasSemantics,
+            search: { intent: ['hero for saas landing'], keywords: ['hero', 'saas'], useCases: [] },
+        }),
+        makePattern({
+            id: 'legal/base',
+            family: 'legal',
+            title: 'Legal Page',
+            semantics: otherSemantics,
+            search: { intent: ['legal information page'], keywords: ['legal'], useCases: [] },
+        }),
+    ];
+    const results = searchPatterns(patterns, { query: 'hero', domain: 'saas' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'hero/base');
+});
+test('searchPatterns: filter by tone', () => {
+    const modernSemantics = {
+        domains: ['saas'],
+        tones: ['modern'],
+        uxGoals: [],
+        avoidForTones: [],
+        avoidForScenarios: [],
+        neighbors: { before: [], after: [], neverWith: [] },
+    };
+    const seriousSemantics = {
+        domains: ['legal'],
+        tones: ['serious'],
+        uxGoals: [],
+        avoidForTones: [],
+        avoidForScenarios: [],
+        neighbors: { before: [], after: [], neverWith: [] },
+    };
+    const patterns = [
+        makePattern({
+            id: 'hero/modern',
+            family: 'hero',
+            title: 'Modern Hero',
+            semantics: modernSemantics,
+            search: { intent: ['modern hero section'], keywords: ['hero', 'modern'], useCases: [] },
+        }),
+        makePattern({
+            id: 'hero/serious',
+            family: 'hero',
+            title: 'Serious Hero',
+            semantics: seriousSemantics,
+            search: { intent: ['hero for law firm'], keywords: ['hero', 'serious'], useCases: [] },
+        }),
+    ];
+    const results = searchPatterns(patterns, { query: 'hero', tone: 'modern' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'hero/modern');
+});
+test('searchPatterns: filter by uxGoal', () => {
+    const signupSemantics = {
+        domains: ['saas'],
+        tones: ['modern'],
+        uxGoals: ['drive_signup'],
+        avoidForTones: [],
+        avoidForScenarios: [],
+        neighbors: { before: [], after: [], neverWith: [] },
+    };
+    const trustSemantics = {
+        domains: ['saas'],
+        tones: ['modern'],
+        uxGoals: ['build_trust'],
+        avoidForTones: [],
+        avoidForScenarios: [],
+        neighbors: { before: [], after: [], neverWith: [] },
+    };
+    const patterns = [
+        makePattern({
+            id: 'cta/base',
+            family: 'cta',
+            title: 'CTA Section',
+            semantics: signupSemantics,
+            search: { intent: ['call to action for signups'], keywords: ['cta', 'signup'], useCases: [] },
+        }),
+        makePattern({
+            id: 'testimonials/base',
+            family: 'testimonials',
+            title: 'Testimonials',
+            semantics: trustSemantics,
+            search: {
+                intent: ['social proof section'],
+                keywords: ['testimonials', 'trust'],
+                useCases: [],
+            },
+        }),
+    ];
+    const results = searchPatterns(patterns, { query: 'cta', uxGoal: 'drive_signup' });
+    assert.equal(results.length, 1);
+    assert.equal(results[0].id, 'cta/base');
+});
+test('searchPatterns: empty query returns empty array', () => {
+    const patterns = [
+        makePattern({
+            id: 'hero/base',
+            family: 'hero',
+            title: 'Hero',
+            search: { intent: [], keywords: ['hero'], useCases: [] },
+        }),
+    ];
+    const results = searchPatterns(patterns, { query: '' });
+    assert.equal(results.length, 0);
+});
+test('searchPatterns: recommended qualityTier gets score boost', () => {
+    const baseSearch = { intent: ['landing section'], keywords: ['section'], useCases: [] };
+    const patterns = [
+        makePattern({
+            id: 'hero/base',
+            family: 'hero',
+            title: 'Hero Base',
+            qualityTier: 'recommended',
+            search: baseSearch,
+        }),
+        makePattern({
+            id: 'hero/plain',
+            family: 'hero-plain',
+            title: 'Hero Plain',
+            qualityTier: 'usable',
+            search: baseSearch,
+        }),
+    ];
+    const results = searchPatterns(patterns, { query: 'section' });
+    // recommended gets +15 score boost, so hero/base should rank first
+    assert.equal(results[0].id, 'hero/base');
+});

package/dist/types.d.ts

@@ -32,6 +32,7 @@ export interface SnippetEntry {
     updatedAt: string;
     meta: SnippetMeta;
     css: string;
+    polishLayer?: 'motion' | 'surface' | 'depth' | 'interaction' | 'text' | 'decorative' | null;
 }
 export interface PatternEntry {
     id: string;
@@ -114,6 +115,18 @@ export interface PatternEntry {
         owner: string;
         updatedAt: string;
     };
+    qualityTier?: 'recommended' | 'usable' | 'experimental';
+    quality?: {
+        checks: {
+            responsive: boolean;
+            darkMode: boolean;
+            a11y: boolean;
+            reducedMotion: boolean;
+            tokenized: boolean;
+        };
+    } | null;
+    subtype?: string | null;
+    suggestedSnippets?: string[];
     html: string;
     css: string | null;
     js: string | null;
@@ -150,6 +163,11 @@ export interface TemplateEntry {
         owner: string;
         updatedAt: string;
     };
+    composition?: {
+        patterns: string[];
+        snippets: string[];
+        tokens: string[];
+    } | null;
     html: string;
 }
 export interface FontEntry {
@@ -248,6 +266,54 @@ export interface MotionRecipeEntry {
     };
     html: string;
 }
+export interface SkillEntry {
+    id: string;
+    title: string;
+    summary: string;
+    tone: string;
+    domains: string[];
+    uxGoals: string[];
+    tags: string[];
+    colors: Record<string, string>;
+    typography: {
+        heading: string;
+        body: string;
+        mono: string;
+        scale: number[];
+        weight: {
+            heading: number;
+            body: number;
+            ui: number;
+        };
+    };
+    spacing: {
+        base: number;
+        scale: number[];
+    };
+    radius: Record<string, string>;
+    relatedPatterns: string[];
+    suggestedTemplate: string | null;
+    governance: {
+        updatedAt: string;
+    };
+    /** Full markdown body — the design rules AI agents should follow */
+    body: string;
+}
+export interface StarterPathEntry {
+    id: string;
+    title: string;
+    description: string;
+    goal: string;
+    patterns: string[];
+    snippets: string[];
+    fonts: string[];
+    tokenPreset: string | null;
+    tags: string[];
+    governance: {
+        status: 'draft' | 'review' | 'published' | 'deprecated';
+        updatedAt: string;
+    };
+}
 export interface Registry {
     version: string;
     generated: string;
@@ -256,6 +322,8 @@ export interface Registry {
     templates?: TemplateEntry[];
     canvasEffects?: CanvasEffectEntry[];
     motionRecipes?: MotionRecipeEntry[];
+    skills?: SkillEntry[];
+    starterPaths?: StarterPathEntry[];
     fonts?: FontsData;
     mountCanvas?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webspire/mcp",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "MCP server for Webspire — AI-native discovery of CSS snippets, UI patterns, canvas effects, page templates, motion recipes, and font recommendations",
   "type": "module",
   "exports": {
@@ -17,7 +17,10 @@
   "scripts": {
     "build": "tsc && node scripts/postbuild.mjs && node scripts/bundle-registry.mjs",
     "dev": "tsx src/index.ts",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "test:registry": "node --test src/registry.test.mjs",
+    "test:search": "node --import tsx/esm --test src/search.test.ts",
+    "test": "node --test src/registry.test.mjs && node --import tsx/esm --test src/search.test.ts"
   },
   "files": [
     "dist",
@@ -25,13 +28,13 @@
     "css"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.13.0",
-    "zod": "^4.2.1"
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@types/node": "^22.0.0",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3"
+    "@types/node": "^25.8.0",
+    "tsx": "^4.22.1",
+    "typescript": "^6.0.3"
   },
   "keywords": [
     "mcp",
@@ -54,7 +57,7 @@
   "engines": {
     "node": ">=22.12.0"
   },
-  "license": "MIT",
+  "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   }