@webspire/mcp 0.8.1 → 0.9.0

package/dist/registration.js

@@ -1,146 +1,140 @@
-import { z } from "zod";
-import { searchSnippets } from "./registry.js";
-import { composePage, CONTENT_NEED_KEYS, CONTENT_NEED_LABEL, DOMAIN_KEYS, DOMAIN_LABEL, normalizeContentNeed, searchPatterns, TONE_KEYS, TONE_LABEL, UX_GOAL_KEYS, UX_GOAL_LABEL, } from "./search.js";
+import { z } from 'zod';
+import { loadFonts, searchSnippets } from './registry.js';
+import { CONTENT_NEED_KEYS, CONTENT_NEED_LABEL, composePage, DOMAIN_KEYS, DOMAIN_LABEL, normalizeContentNeed, recommendFonts, searchCanvasEffects, searchPatterns, TONE_KEYS, TONE_LABEL, UX_GOAL_KEYS, UX_GOAL_LABEL, } from './search.js';
 function formatSnippetBrief(s) {
     return [
         `**${s.title}** (${s.id})`,
         `  ${s.description}`,
-        `  Category: ${s.category} | Tags: ${s.tags.join(", ")}`,
-        s.darkMode ? "  Dark mode: yes" : "",
-        s.responsive ? "  Responsive: yes" : "",
-        s.meta.useCases.length > 0
-            ? `  Use cases: ${s.meta.useCases.slice(0, 2).join("; ")}`
-            : "",
+        `  Category: ${s.category} | Tags: ${s.tags.join(', ')}`,
+        s.darkMode ? '  Dark mode: yes' : '',
+        s.responsive ? '  Responsive: yes' : '',
+        s.meta.useCases.length > 0 ? `  Use cases: ${s.meta.useCases.slice(0, 2).join('; ')}` : '',
     ]
         .filter(Boolean)
-        .join("\n");
+        .join('\n');
 }
 function formatAccessibility(s) {
     const a11y = s.meta.accessibility;
     const features = [];
     if (a11y.prefersReducedMotion)
-        features.push("prefers-reduced-motion");
+        features.push('prefers-reduced-motion');
     if (a11y.prefersColorScheme)
-        features.push("prefers-color-scheme");
+        features.push('prefers-color-scheme');
     if (a11y.supportsCheck)
-        features.push("@supports fallback");
+        features.push('@supports fallback');
     if (a11y.ariaNotes?.length)
         features.push(...a11y.ariaNotes);
-    return features.length > 0
-        ? `## Accessibility\nRespects: ${features.join(", ")}`
-        : "";
+    return features.length > 0 ? `## Accessibility\nRespects: ${features.join(', ')}` : '';
 }
 function formatSnippetFull(s) {
     const props = s.meta.customProperties
-        .map((p) => `  ${p}: ${s.meta.defaultValues?.[p] ?? "unset"}`)
-        .join("\n");
+        .map((p) => `  ${p}: ${s.meta.defaultValues?.[p] ?? 'unset'}`)
+        .join('\n');
     return [
         `# ${s.title}`,
-        "",
+        '',
         s.description,
-        "",
-        "## Usage",
-        "```html",
+        '',
+        '## Usage',
+        '```html',
         s.meta.usageExample,
-        "```",
-        "",
-        "## CSS",
-        "```css",
+        '```',
+        '',
+        '## CSS',
+        '```css',
         s.css,
-        "```",
-        "",
-        s.meta.customProperties.length > 0 ? `## Custom Properties\n${props}` : "",
-        s.meta.classes.length > 0 ? `## Classes\n${s.meta.classes.join(", ")}` : "",
+        '```',
+        '',
+        s.meta.customProperties.length > 0 ? `## Custom Properties\n${props}` : '',
+        s.meta.classes.length > 0 ? `## Classes\n${s.meta.classes.join(', ')}` : '',
         formatAccessibility(s),
-        s.dependencies?.length
-            ? `## Dependencies\n${s.dependencies.join(", ")}`
-            : "",
-        s.variants?.length ? `## Variants\n${s.variants.join(", ")}` : "",
-        "",
+        s.dependencies?.length ? `## Dependencies\n${s.dependencies.join(', ')}` : '',
+        s.variants?.length ? `## Variants\n${s.variants.join(', ')}` : '',
+        '',
         `Browser support: ${s.meta.browser}`,
         `Size: ${s.meta.lines} lines, ${s.meta.bytes} bytes`,
-        s.darkMode ? "Dark mode: supported" : "",
-        s.responsive ? "Responsive: yes" : "",
+        s.darkMode ? 'Dark mode: supported' : '',
+        s.responsive ? 'Responsive: yes' : '',
     ]
-        .filter((line) => line !== "")
-        .join("\n");
+        .filter((line) => line !== '')
+        .join('\n');
 }
 function formatTemplateBrief(t) {
     return [
         `**${t.title}** (${t.id})`,
         `  ${t.summary}`,
         `  Category: ${t.category} | Style: ${t.style}`,
-        t.tags.length > 0 ? `  Tags: ${t.tags.join(", ")}` : "",
+        t.tags.length > 0 ? `  Tags: ${t.tags.join(', ')}` : '',
     ]
         .filter(Boolean)
-        .join("\n");
+        .join('\n');
 }
 function formatTemplateFull(t) {
     return [
         `# ${t.title}`,
-        "",
+        '',
         t.description ?? t.summary,
-        "",
-        "## Identity",
+        '',
+        '## Identity',
         `ID: ${t.id}`,
         `Category: ${t.category}`,
         `Style: ${t.style}`,
-        "",
-        t.tags.length > 0 ? `## Tags\n${t.tags.join(", ")}` : "",
-        t.sections.length > 0 ? `## Sections\n${t.sections.join(", ")}` : "",
-        t.patterns.length > 0 ? `## Uses Patterns\n${t.patterns.join(", ")}` : "",
-        "",
-        "## HTML",
-        "```html",
+        '',
+        t.tags.length > 0 ? `## Tags\n${t.tags.join(', ')}` : '',
+        t.sections.length > 0 ? `## Sections\n${t.sections.join(', ')}` : '',
+        t.patterns.length > 0 ? `## Uses Patterns\n${t.patterns.join(', ')}` : '',
+        '',
+        '## HTML',
+        '```html',
         t.html,
-        "```",
+        '```',
     ]
-        .filter((line) => line !== "")
-        .join("\n");
+        .filter((line) => line !== '')
+        .join('\n');
 }
 function formatPatternBrief(p) {
     return [
         `**${p.title}** (${p.id})`,
         `  ${p.summary}`,
         `  Family: ${p.family} | Tier: ${p.tier} | Kind: ${p.kind}`,
-        p.tags.length > 0 ? `  Tags: ${p.tags.join(", ")}` : "",
-        p.extends ? `  Extends: ${p.extends}` : "",
+        p.tags.length > 0 ? `  Tags: ${p.tags.join(', ')}` : '',
+        p.extends ? `  Extends: ${p.extends}` : '',
     ]
         .filter(Boolean)
-        .join("\n");
+        .join('\n');
 }
 function formatPatternFull(p) {
     return [
         `# ${p.title}`,
-        "",
+        '',
         p.description ?? p.summary,
-        "",
-        "## Identity",
+        '',
+        '## Identity',
         `ID: ${p.id}`,
         `Family: ${p.family}`,
         `Tier: ${p.tier}`,
         `Kind: ${p.kind}`,
-        p.extends ? `Extends: ${p.extends}` : "",
-        "",
-        p.tags.length > 0 ? `## Tags\n${p.tags.join(", ")}` : "",
+        p.extends ? `Extends: ${p.extends}` : '',
+        '',
+        p.tags.length > 0 ? `## Tags\n${p.tags.join(', ')}` : '',
         p.slots.length > 0
-            ? `## Slots\n${p.slots.map((s) => `- ${s.name}${s.required ? " (required)" : ""}: ${s.description}`).join("\n")}`
-            : "",
+            ? `## Slots\n${p.slots.map((s) => `- ${s.name}${s.required ? ' (required)' : ''}: ${s.description}`).join('\n')}`
+            : '',
         p.props.length > 0
-            ? `## Props\n${p.props.map((prop) => `- ${prop.name} (${prop.type}) default=${String(prop.default)}`).join("\n")}`
-            : "",
-        "## HTML",
-        "```html",
+            ? `## Props\n${p.props.map((prop) => `- ${prop.name} (${prop.type}) default=${String(prop.default)}`).join('\n')}`
+            : '',
+        '## HTML',
+        '```html',
         p.html,
-        "```",
-        p.css ? `## CSS\n\`\`\`css\n${p.css}\n\`\`\`` : "",
-        p.js ? `## JS\n\`\`\`js\n${p.js}\n\`\`\`` : "",
+        '```',
+        p.css ? `## CSS\n\`\`\`css\n${p.css}\n\`\`\`` : '',
+        p.js ? `## JS\n\`\`\`js\n${p.js}\n\`\`\`` : '',
     ]
-        .filter((line) => line !== "")
-        .join("\n");
+        .filter((line) => line !== '')
+        .join('\n');
 }
 export function registerToolsWithProvider(server, getRegistry) {
-    server.tool("list_categories", "List all available snippet categories with snippet counts", {}, async () => {
+    server.tool('list_categories', 'List all available snippet categories with snippet counts', {}, async () => {
         const registry = await getRegistry();
         const counts = {};
         for (const snippet of registry.snippets) {
@@ -148,31 +142,28 @@ export function registerToolsWithProvider(server, getRegistry) {
         }
         const result = Object.entries(counts)
             .sort(([, a], [, b]) => b - a)
-            .map(([cat, count]) => `${cat}: ${count} snippet${count > 1 ? "s" : ""}`)
-            .join("\n");
+            .map(([cat, count]) => `${cat}: ${count} snippet${count > 1 ? 's' : ''}`)
+            .join('\n');
         return {
             content: [
                 {
-                    type: "text",
+                    type: 'text',
                     text: `${registry.snippets.length} snippets across ${Object.keys(counts).length} categories:\n\n${result}`,
                 },
             ],
         };
     });
-    server.tool("search_snippets", "Search Webspire CSS snippets by keyword, problem description, or use case. Returns matching snippets with their descriptions and IDs.", {
+    server.tool('search_snippets', 'Search Webspire CSS snippets by keyword, problem description, or use case. Returns matching snippets with their descriptions and IDs.', {
         query: z
             .string()
             .describe('Search query: problem description, use case, or CSS technique (e.g. "glass card", "fade animation", "blur entrance")'),
         category: z
             .string()
             .optional()
-            .describe("Filter by category: glass, animations, easing, scroll, decorative, interactions, text"),
-        tags: z.array(z.string()).optional().describe("Filter by tags"),
-        darkMode: z.boolean().optional().describe("Filter for dark mode support"),
-        responsive: z
-            .boolean()
-            .optional()
-            .describe("Filter for responsive support"),
+            .describe('Filter by category: glass, animations, easing, scroll, decorative, interactions, text'),
+        tags: z.array(z.string()).optional().describe('Filter by tags'),
+        darkMode: z.boolean().optional().describe('Filter for dark mode support'),
+        responsive: z.boolean().optional().describe('Filter for responsive support'),
     }, async ({ query, category, tags, darkMode, responsive }) => {
         const registry = await getRegistry();
         const results = searchSnippets(registry, {
@@ -186,23 +177,23 @@ export function registerToolsWithProvider(server, getRegistry) {
             return {
                 content: [
                     {
-                        type: "text",
-                        text: "No snippets found matching your query. Try broader keywords or check available categories with list_categories.",
+                        type: 'text',
+                        text: 'No snippets found matching your query. Try broader keywords or check available categories with list_categories.',
                     },
                 ],
             };
         }
-        const text = results.map(formatSnippetBrief).join("\n\n");
+        const text = results.map(formatSnippetBrief).join('\n\n');
         return {
             content: [
                 {
-                    type: "text",
-                    text: `Found ${results.length} snippet${results.length > 1 ? "s" : ""}:\n\n${text}`,
+                    type: 'text',
+                    text: `Found ${results.length} snippet${results.length > 1 ? 's' : ''}:\n\n${text}`,
                 },
             ],
         };
     });
-    server.tool("get_snippet", "Get full CSS source, metadata, usage example, and custom properties for a specific snippet. Use this after finding a snippet via search_snippets or recommend_snippet.", {
+    server.tool('get_snippet', 'Get full CSS source, metadata, usage example, and custom properties for a specific snippet. Use this after finding a snippet via search_snippets or recommend_snippet.', {
         id: z
             .string()
             .describe('Snippet ID, e.g. "glass/frosted", "animations/fade-in", "easing/tokens"'),
@@ -210,41 +201,38 @@ export function registerToolsWithProvider(server, getRegistry) {
         const registry = await getRegistry();
         const snippet = registry.snippets.find((s) => s.id === id);
         if (!snippet) {
-            const available = registry.snippets.map((s) => s.id).join(", ");
+            const available = registry.snippets.map((s) => s.id).join(', ');
             return {
                 content: [
                     {
-                        type: "text",
+                        type: 'text',
                         text: `Snippet "${id}" not found. Available snippets: ${available}`,
                     },
                 ],
             };
         }
         return {
-            content: [{ type: "text", text: formatSnippetFull(snippet) }],
+            content: [{ type: 'text', text: formatSnippetFull(snippet) }],
         };
     });
-    server.tool("recommend_snippet", "Describe a UI problem or desired effect and get the best matching Webspire snippets with reasoning. Supports optional constraints like dark mode or reduced motion requirements.", {
+    server.tool('recommend_snippet', 'Describe a UI problem or desired effect and get the best matching Webspire snippets with reasoning. Supports optional constraints like dark mode or reduced motion requirements.', {
         use_case: z
             .string()
             .describe('Describe the UI problem or effect you need (e.g. "I need a blurred card overlay on my hero section", "my list items should animate in one by one")'),
-        category: z
-            .string()
-            .optional()
-            .describe("Limit recommendations to a specific category"),
+        category: z.string().optional().describe('Limit recommendations to a specific category'),
         needs_dark_mode: z
             .boolean()
             .optional()
-            .describe("Only recommend snippets with dark mode support"),
+            .describe('Only recommend snippets with dark mode support'),
         needs_responsive: z
             .boolean()
             .optional()
-            .describe("Only recommend snippets with responsive support"),
+            .describe('Only recommend snippets with responsive support'),
         needs_reduced_motion: z
             .boolean()
             .optional()
-            .describe("Only recommend snippets that respect prefers-reduced-motion"),
-    }, async ({ use_case, category, needs_dark_mode, needs_responsive, needs_reduced_motion, }) => {
+            .describe('Only recommend snippets that respect prefers-reduced-motion'),
+    }, async ({ use_case, category, needs_dark_mode, needs_responsive, needs_reduced_motion }) => {
         const registry = await getRegistry();
         let filteredRegistry = registry;
         if (needs_reduced_motion) {
@@ -264,8 +252,8 @@ export function registerToolsWithProvider(server, getRegistry) {
             return {
                 content: [
                     {
-                        type: "text",
-                        text: "No matching snippet found for your description. Try rephrasing or relax the constraints.",
+                        type: 'text',
+                        text: 'No matching snippet found for your description. Try rephrasing or relax the constraints.',
                     },
                 ],
             };
@@ -274,25 +262,25 @@ export function registerToolsWithProvider(server, getRegistry) {
             .map((s, i) => {
             const reasons = [];
             if (s.darkMode)
-                reasons.push("dark mode");
+                reasons.push('dark mode');
             if (s.meta.accessibility.prefersReducedMotion)
-                reasons.push("reduced motion");
+                reasons.push('reduced motion');
             if (s.meta.accessibility.supportsCheck)
-                reasons.push("@supports fallback");
-            const reasonStr = reasons.length > 0 ? ` (${reasons.join(", ")})` : "";
+                reasons.push('@supports fallback');
+            const reasonStr = reasons.length > 0 ? ` (${reasons.join(', ')})` : '';
             return `${i + 1}. ${formatSnippetBrief(s)}${reasonStr}\n   Usage: \`${s.meta.usageExample}\``;
         })
-            .join("\n\n");
+            .join('\n\n');
         return {
             content: [
                 {
-                    type: "text",
-                    text: `Top ${results.length} recommendation${results.length > 1 ? "s" : ""} for "${use_case}":\n\n${text}\n\nUse get_snippet(id) for full CSS and details.`,
+                    type: 'text',
+                    text: `Top ${results.length} recommendation${results.length > 1 ? 's' : ''} for "${use_case}":\n\n${text}\n\nUse get_snippet(id) for full CSS and details.`,
                 },
             ],
         };
     });
-    server.tool("list_pattern_families", "List all available pattern families with counts", {}, async () => {
+    server.tool('list_pattern_families', 'List all available pattern families with counts', {}, async () => {
         const registry = await getRegistry();
         const patterns = registry.patterns ?? [];
         const counts = {};
@@ -301,34 +289,34 @@ export function registerToolsWithProvider(server, getRegistry) {
         }
         const result = Object.entries(counts)
             .sort(([, a], [, b]) => b - a)
-            .map(([family, count]) => `${family}: ${count} pattern${count > 1 ? "s" : ""}`)
-            .join("\n");
+            .map(([family, count]) => `${family}: ${count} pattern${count > 1 ? 's' : ''}`)
+            .join('\n');
         return {
             content: [
                 {
-                    type: "text",
+                    type: 'text',
                     text: `${patterns.length} patterns across ${Object.keys(counts).length} families:\n\n${result}`,
                 },
             ],
         };
     });
-    server.tool("search_patterns", "Search Webspire UI patterns by intent, family, tier, domain, tone, or UX goal. Uses weighted scoring with synonym expansion for better results.", {
+    server.tool('search_patterns', 'Search Webspire UI patterns by intent, family, tier, domain, tone, or UX goal. Uses weighted scoring with synonym expansion for better results.', {
         query: z
             .string()
             .describe('Search query, e.g. "hero with image", "pricing section", "trust building for legal"'),
         family: z
             .string()
             .optional()
-            .describe("Filter by pattern family, e.g. hero, pricing, navbar"),
-        tier: z.enum(["base", "enhanced"]).optional().describe("Filter by tier"),
+            .describe('Filter by pattern family, e.g. hero, pricing, navbar'),
+        tier: z.enum(['base', 'enhanced']).optional().describe('Filter by tier'),
         domain: z
             .string()
             .optional()
-            .describe("Filter/boost by business domain: legal, healthcare, education, finance, saas, ecommerce, agency, consulting, nonprofit, gastronomy, realestate, personal"),
+            .describe('Filter/boost by business domain: legal, healthcare, education, finance, saas, ecommerce, agency, consulting, nonprofit, gastronomy, realestate, personal'),
         tone: z
             .string()
             .optional()
-            .describe("Filter/boost by tone: serious, premium, modern, friendly, approachable, approachable_professional, technical, editorial, playful, institutional, industrial, casual"),
+            .describe('Filter/boost by tone: serious, premium, modern, friendly, approachable, approachable_professional, technical, editorial, playful, institutional, industrial, casual'),
         ux_goal: z
             .enum(UX_GOAL_KEYS)
             .optional()
@@ -347,8 +335,8 @@ export function registerToolsWithProvider(server, getRegistry) {
             return {
                 content: [
                     {
-                        type: "text",
-                        text: "No patterns found matching your query.",
+                        type: 'text',
+                        text: 'No patterns found matching your query.',
                     },
                 ],
             };
@@ -356,18 +344,16 @@ export function registerToolsWithProvider(server, getRegistry) {
         return {
             content: [
                 {
-                    type: "text",
-                    text: `Found ${results.length} pattern${results.length > 1 ? "s" : ""}:\n\n${results.map(formatPatternBrief).join("\n\n")}`,
+                    type: 'text',
+                    text: `Found ${results.length} pattern${results.length > 1 ? 's' : ''}:\n\n${results.map(formatPatternBrief).join('\n\n')}`,
                 },
             ],
         };
     });
-    server.tool("compose_page", "Compose an optimal page structure by selecting and ordering patterns based on business domain, tone, and UX goals. Also recommends matching CSS snippets for polish and interaction.", {
+    server.tool('compose_page', 'Compose an optimal page structure by selecting and ordering patterns based on business domain, tone, and UX goals. Also recommends matching CSS snippets for polish and interaction.', {
         domain: z.enum(DOMAIN_KEYS).describe(`Business domain: ${DOMAIN_LABEL}`),
         tone: z.enum(TONE_KEYS).describe(`Desired tone: ${TONE_LABEL}`),
-        ux_goals: z
-            .array(z.enum(UX_GOAL_KEYS))
-            .describe(`UX goals: ${UX_GOAL_LABEL}`),
+        ux_goals: z.array(z.enum(UX_GOAL_KEYS)).describe(`UX goals: ${UX_GOAL_LABEL}`),
         content_needs: z
             .array(z.enum(CONTENT_NEED_KEYS))
             .optional()
@@ -376,7 +362,7 @@ export function registerToolsWithProvider(server, getRegistry) {
             .number()
             .optional()
             .default(8)
-            .describe("Maximum number of sections to include (default: 8)"),
+            .describe('Maximum number of sections to include (default: 8)'),
     }, async ({ domain, tone, ux_goals, content_needs, max_sections }) => {
         const registry = await getRegistry();
         const allPatterns = registry.patterns ?? [];
@@ -393,7 +379,7 @@ export function registerToolsWithProvider(server, getRegistry) {
             return {
                 content: [
                     {
-                        type: "text",
+                        type: 'text',
                         text: `No suitable patterns found for domain="${domain}", tone="${tone}". Try broader criteria.`,
                     },
                 ],
@@ -401,43 +387,47 @@ export function registerToolsWithProvider(server, getRegistry) {
         }
         const sections = result.patterns
             .map((p, i) => {
-            const role = p.ai?.compositionRole ?? "supporting";
+            const role = p.ai?.compositionRole ?? 'supporting';
             return `${i + 1}. **${p.title}** (${p.id}) — role: ${role}\n   ${p.summary}`;
         })
-            .join("\n\n");
+            .join('\n\n');
         const reasoningText = result.reasoning.length > 0
-            ? `\n\n## Selection Reasoning\n${result.reasoning.join("\n")}`
-            : "";
-        const warningsText = result.warnings.length > 0
-            ? `\n\n## Warnings\n${result.warnings.join("\n")}`
-            : "";
+            ? `\n\n## Selection Reasoning\n${result.reasoning.join('\n')}`
+            : '';
+        const warningsText = result.warnings.length > 0 ? `\n\n## Warnings\n${result.warnings.join('\n')}` : '';
         const snippetsText = result.snippets.length > 0
             ? `\n\n## Recommended Snippets\n${result.snippets
                 .map(({ snippet, reason }, i) => `${i + 1}. **${snippet.title}** (${snippet.id}) — ${reason}`)
-                .join("\n")}\n\nUse \`get_snippet(id)\` to retrieve the CSS for any snippet.`
-            : "";
+                .join('\n')}\n\nUse \`get_snippet(id)\` to retrieve the CSS for any snippet.`
+            : '';
+        // Font recommendation
+        let fontsText = '';
+        const fontsDataLoaded = await loadFonts();
+        if (fontsDataLoaded) {
+            const fontRec = recommendFonts(fontsDataLoaded, domain, tone);
+            const predNote = fontRec.isPredefined ? ' (predefined pairing)' : '';
+            fontsText = `\n\n## Recommended Fonts${predNote}\n- **Heading:** ${fontRec.heading.name} (\`${fontRec.heading.npm}\`)\n- **Body:** ${fontRec.body.name} (\`${fontRec.body.npm}\`)\n- **Mono:** ${fontRec.mono.name} (\`${fontRec.mono.npm}\`)\n\n\`\`\`bash\n${fontRec.install}\n\`\`\`\n\n\`\`\`css\n${fontRec.tailwindTheme}\n\`\`\`\n\nUse \`recommend_fonts\` for detailed reasoning.`;
+        }
         return {
             content: [
                 {
-                    type: "text",
-                    text: `# Composed Page: ${domain} / ${tone}\n\nUX Goals: ${ux_goals.join(", ")}${content_needs?.length ? `\nContent Needs: ${content_needs.join(", ")}` : ""}\n\n## Recommended Sections\n\n${sections}${snippetsText}${warningsText}${reasoningText}\n\nUse \`get_pattern(id)\` to get full HTML for each section.`,
+                    type: 'text',
+                    text: `# Composed Page: ${domain} / ${tone}\n\nUX Goals: ${ux_goals.join(', ')}${content_needs?.length ? `\nContent Needs: ${content_needs.join(', ')}` : ''}\n\n## Recommended Sections\n\n${sections}${snippetsText}${fontsText}${warningsText}${reasoningText}\n\nUse \`get_pattern(id)\` to get full HTML for each section.`,
                 },
             ],
         };
     });
-    server.tool("get_pattern", "Get full pattern data including HTML (and optional CSS/JS) for a specific pattern. Patterns use --ws-* design tokens via component classes — import webspire-tokens.css + webspire-components.css to enable.", {
-        id: z
-            .string()
-            .describe('Pattern ID, e.g. "hero/base", "hero/with-image"'),
+    server.tool('get_pattern', 'Get full pattern data including HTML (and optional CSS/JS) for a specific pattern. Patterns use --ws-* design tokens via component classes — import webspire-tokens.css + webspire-components.css to enable.', {
+        id: z.string().describe('Pattern ID, e.g. "hero/base", "hero/with-image"'),
     }, async ({ id }) => {
         const registry = await getRegistry();
         const pattern = (registry.patterns ?? []).find((p) => p.id === id);
         if (!pattern) {
-            const available = (registry.patterns ?? []).map((p) => p.id).join(", ");
+            const available = (registry.patterns ?? []).map((p) => p.id).join(', ');
             return {
                 content: [
                     {
-                        type: "text",
+                        type: 'text',
                         text: `Pattern "${id}" not found. Available patterns: ${available}`,
                     },
                 ],
@@ -446,13 +436,13 @@ export function registerToolsWithProvider(server, getRegistry) {
         return {
             content: [
                 {
-                    type: "text",
+                    type: 'text',
                     text: `${formatPatternFull(pattern)}\n\n---\n**Setup:** Import \`webspire-tokens.css\` and \`webspire-components.css\` to enable token support.\nOverride \`--ws-color-primary\` etc. to match your brand. Docs: https://webspire.de/tokens`,
                 },
             ],
         };
     });
-    server.tool("list_templates", "List all available page templates grouped by category", {}, async () => {
+    server.tool('list_templates', 'List all available page templates grouped by category', {}, async () => {
         const registry = await getRegistry();
         const templates = registry.templates ?? [];
         const counts = {};
@@ -461,29 +451,27 @@ export function registerToolsWithProvider(server, getRegistry) {
         }
         const result = Object.entries(counts)
             .sort(([, a], [, b]) => b - a)
-            .map(([cat, count]) => `${cat}: ${count} template${count > 1 ? "s" : ""}`)
-            .join("\n");
+            .map(([cat, count]) => `${cat}: ${count} template${count > 1 ? 's' : ''}`)
+            .join('\n');
         return {
             content: [
                 {
-                    type: "text",
+                    type: 'text',
                     text: `${templates.length} templates across ${Object.keys(counts).length} categories:\n\n${result}`,
                 },
             ],
         };
     });
-    server.tool("search_templates", "Search Webspire page templates by keyword, category, or style.", {
-        query: z
-            .string()
-            .describe('Search query, e.g. "saas landing", "portfolio dark", "shop"'),
+    server.tool('search_templates', 'Search Webspire page templates by keyword, category, or style.', {
+        query: z.string().describe('Search query, e.g. "saas landing", "portfolio dark", "shop"'),
         category: z
             .string()
             .optional()
-            .describe("Filter by category, e.g. saas-landing, agency, shop"),
+            .describe('Filter by category, e.g. saas-landing, agency, shop'),
         style: z
             .string()
             .optional()
-            .describe("Filter by style, e.g. modern, bold, minimal, corporate"),
+            .describe('Filter by style, e.g. modern, bold, minimal, corporate'),
     }, async ({ query, category, style }) => {
         const registry = await getRegistry();
         let templates = registry.templates ?? [];
@@ -497,13 +485,13 @@ export function registerToolsWithProvider(server, getRegistry) {
             const haystack = [
                 t.title,
                 t.summary,
-                t.description ?? "",
+                t.description ?? '',
                 t.category,
                 t.style,
                 ...t.tags,
                 ...t.sections,
             ]
-                .join(" ")
+                .join(' ')
                 .toLowerCase();
             const score = terms.reduce((acc, term) => acc + (haystack.includes(term) ? 1 : 0), 0);
             return { template: t, score };
@@ -516,8 +504,8 @@ export function registerToolsWithProvider(server, getRegistry) {
             return {
                 content: [
                     {
-                        type: "text",
-                        text: "No templates found matching your query.",
+                        type: 'text',
+                        text: 'No templates found matching your query.',
                     },
                 ],
             };
@@ -525,46 +513,40 @@ export function registerToolsWithProvider(server, getRegistry) {
         return {
             content: [
                 {
-                    type: "text",
-                    text: `Found ${results.length} template${results.length > 1 ? "s" : ""}:\n\n${results.map(formatTemplateBrief).join("\n\n")}`,
+                    type: 'text',
+                    text: `Found ${results.length} template${results.length > 1 ? 's' : ''}:\n\n${results.map(formatTemplateBrief).join('\n\n')}`,
                 },
             ],
         };
     });
-    server.tool("get_template", "Get full template HTML for a specific page template. Returns standalone HTML ready to use.", {
-        id: z
-            .string()
-            .describe('Template ID, e.g. "saas-landing/modern", "shop/catalog"'),
+    server.tool('get_template', 'Get full template HTML for a specific page template. Returns standalone HTML ready to use.', {
+        id: z.string().describe('Template ID, e.g. "saas-landing/modern", "shop/catalog"'),
     }, async ({ id }) => {
         const registry = await getRegistry();
         const template = (registry.templates ?? []).find((t) => t.id === id);
         if (!template) {
-            const available = (registry.templates ?? [])
-                .map((t) => t.id)
-                .join(", ");
+            const available = (registry.templates ?? []).map((t) => t.id).join(', ');
             return {
                 content: [
                     {
-                        type: "text",
+                        type: 'text',
                         text: `Template "${id}" not found. Available templates: ${available}`,
                     },
                 ],
             };
         }
         return {
-            content: [
-                { type: "text", text: formatTemplateFull(template) },
-            ],
+            content: [{ type: 'text', text: formatTemplateFull(template) }],
         };
     });
-    server.tool("recommend_token_mapping", "Analyze project design tokens and recommend how to map them to Webspire --ws-* tokens. Provide your existing CSS custom properties or Tailwind theme colors.", {
+    server.tool('recommend_token_mapping', 'Analyze project design tokens and recommend how to map them to Webspire --ws-* tokens. Provide your existing CSS custom properties or Tailwind theme colors.', {
         project_tokens: z
             .string()
             .describe('Your project\'s design tokens or CSS custom properties, e.g. "--color-brand-500: #2563eb; --color-bg: #fafafa" or "primary: blue-600, background: white"'),
         framework: z
-            .enum(["tailwind", "custom", "bootstrap", "chakra", "shadcn"])
+            .enum(['tailwind', 'custom', 'bootstrap', 'chakra', 'shadcn'])
             .optional()
-            .describe("CSS framework used in your project"),
+            .describe('CSS framework used in your project'),
     }, async ({ project_tokens, framework }) => {
         const lines = project_tokens
             .split(/[;\n,]+/)
@@ -574,107 +556,101 @@ export function registerToolsWithProvider(server, getRegistry) {
         const TOKEN_HINTS = [
             {
                 patterns: [/brand|primary|main|accent-color/i],
-                wsToken: "--ws-color-primary",
-                description: "Primary/brand color",
+                wsToken: '--ws-color-primary',
+                description: 'Primary/brand color',
             },
             {
                 patterns: [/brand.*hover|primary.*hover|primary.*dark/i],
-                wsToken: "--ws-color-primary-hover",
-                description: "Primary hover state",
+                wsToken: '--ws-color-primary-hover',
+                description: 'Primary hover state',
             },
             {
                 patterns: [/brand.*light|primary.*light|primary.*50|brand.*50/i],
-                wsToken: "--ws-color-primary-soft",
-                description: "Primary soft background",
+                wsToken: '--ws-color-primary-soft',
+                description: 'Primary soft background',
             },
             {
                 patterns: [/secondary|accent(?!-color)/i],
-                wsToken: "--ws-color-accent",
-                description: "Secondary/accent color",
+                wsToken: '--ws-color-accent',
+                description: 'Secondary/accent color',
             },
             {
                 patterns: [/^bg$|background(?!.*secondary)|surface(?!.*alt)/i],
-                wsToken: "--ws-color-surface",
-                description: "Page background",
+                wsToken: '--ws-color-surface',
+                description: 'Page background',
             },
             {
-                patterns: [
-                    /bg.*secondary|bg.*subtle|bg.*muted|surface.*alt|bg.*light/i,
-                ],
-                wsToken: "--ws-color-surface-alt",
-                description: "Subtle background",
+                patterns: [/bg.*secondary|bg.*subtle|bg.*muted|surface.*alt|bg.*light/i],
+                wsToken: '--ws-color-surface-alt',
+                description: 'Subtle background',
             },
             {
                 patterns: [/^text$|text.*primary|foreground(?!.*muted)/i],
-                wsToken: "--ws-color-text",
-                description: "Primary text color",
+                wsToken: '--ws-color-text',
+                description: 'Primary text color',
             },
             {
-                patterns: [
-                    /text.*secondary|text.*soft|text.*muted|muted.*foreground/i,
-                ],
-                wsToken: "--ws-color-text-muted",
-                description: "Muted text color",
+                patterns: [/text.*secondary|text.*soft|text.*muted|muted.*foreground/i],
+                wsToken: '--ws-color-text-muted',
+                description: 'Muted text color',
             },
             {
                 patterns: [/border(?!.*strong)|divider/i],
-                wsToken: "--ws-color-border",
-                description: "Default border",
+                wsToken: '--ws-color-border',
+                description: 'Default border',
             },
             {
                 patterns: [/success|green|positive/i],
-                wsToken: "--ws-color-success",
-                description: "Success color",
+                wsToken: '--ws-color-success',
+                description: 'Success color',
             },
             {
                 patterns: [/warning|amber|yellow|caution/i],
-                wsToken: "--ws-color-warning",
-                description: "Warning color",
+                wsToken: '--ws-color-warning',
+                description: 'Warning color',
             },
             {
                 patterns: [/danger|error|red|destructive/i],
-                wsToken: "--ws-color-danger",
-                description: "Danger/error color",
+                wsToken: '--ws-color-danger',
+                description: 'Danger/error color',
             },
             {
                 patterns: [/radius|rounded|corner/i],
-                wsToken: "--ws-radius-md",
-                description: "Border radius",
+                wsToken: '--ws-radius-md',
+                description: 'Border radius',
             },
         ];
         for (const line of lines) {
-            const [rawName] = line.split(":").map((s) => s.trim());
-            const name = rawName.replace(/^--color-|^--/, "");
+            const [rawName] = line.split(':').map((s) => s.trim());
+            const name = rawName.replace(/^--color-|^--/, '');
             for (const hint of TOKEN_HINTS) {
                 if (hint.patterns.some((p) => p.test(name))) {
-                    const varRef = rawName.startsWith("--")
-                        ? `var(${rawName})`
-                        : rawName;
+                    const varRef = rawName.startsWith('--') ? `var(${rawName})` : rawName;
                     mappings.push(`  ${hint.wsToken}: ${varRef};  /* ${hint.description} ← ${rawName} */`);
                     break;
                 }
             }
         }
         const frameworkNote = framework
-            ? `\nFramework detected: ${framework}. ${framework === "tailwind"
-                ? "Use @theme to register --ws-* tokens, or override in your main CSS."
-                : framework === "shadcn"
-                    ? "Map shadcn/ui --* variables to --ws-* in your globals.css."
-                    : "Override --ws-* tokens in your global stylesheet."}\n`
-            : "";
+            ? `\nFramework detected: ${framework}. ${framework === 'tailwind'
+                ? 'Use @theme to register --ws-* tokens, or override in your main CSS.'
+                : framework === 'shadcn'
+                    ? 'Map shadcn/ui --* variables to --ws-* in your globals.css.'
+                    : 'Override --ws-* tokens in your global stylesheet.'}\n`
+            : '';
         const css = mappings.length > 0
-            ? `:root {\n${mappings.join("\n")}\n}`
-            : "/* No matching tokens detected. Provide CSS custom properties like:\n   --color-brand: #2563eb; --color-bg: #ffffff */";
+            ? `:root {\n${mappings.join('\n')}\n}`
+            : '/* No matching tokens detected. Provide CSS custom properties like:\n   --color-brand: #2563eb; --color-bg: #ffffff */';
         return {
             content: [
                 {
-                    type: "text",
+                    type: 'text',
                     text: `# Recommended Token Mapping\n${frameworkNote}\n\`\`\`css\n${css}\n\`\`\`\n\nPaste this into your project's CSS, then import webspire-tokens.css.\nAdjust values as needed — these are suggestions based on naming conventions.\n\nFull token reference: https://webspire.de/tokens`,
                 },
             ],
         };
     });
-    server.tool("setup_tokens", "Get the WebSpire token CSS files to write into your project. Returns the content of webspire-tokens.css (alias tokens + dark mode) and webspire-components.css (per-component tokens). Write these files to your project and import them in your main CSS.", {
+    server.tool('setup_tokens', 'Get the WebSpire token CSS files to write into your project. Returns the content of webspire-tokens.css (alias tokens + dark mode) and webspire-components.css (per-component tokens). Write these files to your project and import them in your main CSS.', {
         components: z
             .array(z.string())
             .optional()
@@ -682,31 +658,29 @@ export function registerToolsWithProvider(server, getRegistry) {
     }, async ({ components }) => {
         const registry = await getRegistry();
         // Read bundled CSS files
-        const { readFile } = await import("node:fs/promises");
-        const { dirname, resolve } = await import("node:path");
-        const { fileURLToPath } = await import("node:url");
+        const { readFile } = await import('node:fs/promises');
+        const { dirname, resolve } = await import('node:path');
+        const { fileURLToPath } = await import('node:url');
         const thisDir = dirname(fileURLToPath(import.meta.url));
         let tokensCss;
         let componentsCss;
         try {
-            tokensCss = await readFile(resolve(thisDir, "..", "css", "webspire-tokens.css"), "utf-8");
-            componentsCss = await readFile(resolve(thisDir, "..", "css", "webspire-components.css"), "utf-8");
+            tokensCss = await readFile(resolve(thisDir, '..', 'css', 'webspire-tokens.css'), 'utf-8');
+            componentsCss = await readFile(resolve(thisDir, '..', 'css', 'webspire-components.css'), 'utf-8');
         }
         catch {
             return {
                 content: [
                     {
-                        type: "text",
-                        text: "Token CSS files not found in package. Update @webspire/mcp to the latest version.",
+                        type: 'text',
+                        text: 'Token CSS files not found in package. Update @webspire/mcp to the latest version.',
                     },
                 ],
             };
         }
         // Filter component tokens if specific families requested
         if (components && components.length > 0) {
-            const filtered = [
-                "/* Webspire Component Tokens (filtered) */",
-            ];
+            const filtered = ['/* Webspire Component Tokens (filtered) */'];
             const sections = componentsCss.split(/(?=^\.ws-)/m);
             for (const section of sections) {
                 const classMatch = section.match(/^\.ws-([a-z0-9-]+)/);
@@ -714,56 +688,217 @@ export function registerToolsWithProvider(server, getRegistry) {
                     filtered.push(section.trim());
                 }
             }
-            componentsCss = filtered.join("\n\n");
+            componentsCss = filtered.join('\n\n');
         }
-        const families = components ? components.join(", ") : "all";
+        const families = components ? components.join(', ') : 'all';
         const patternCount = registry.patterns?.length ?? 0;
         return {
             content: [
                 {
-                    type: "text",
+                    type: 'text',
                     text: [
                         `# WebSpire Token Setup (${families} families, ${patternCount} patterns)`,
-                        "",
-                        "## 1. Write `webspire-tokens.css` to your project",
-                        "",
-                        "```css",
+                        '',
+                        '## 1. Write `webspire-tokens.css` to your project',
+                        '',
+                        '```css',
                         tokensCss,
-                        "```",
-                        "",
-                        "## 2. Write `webspire-components.css` to your project",
-                        "",
-                        "```css",
+                        '```',
+                        '',
+                        '## 2. Write `webspire-components.css` to your project',
+                        '',
+                        '```css',
                         componentsCss,
-                        "```",
-                        "",
-                        "## 3. Import in your main CSS",
-                        "",
-                        "```css",
+                        '```',
+                        '',
+                        '## 3. Import in your main CSS',
+                        '',
+                        '```css',
                         '@import "./webspire-tokens.css";',
                         '@import "./webspire-components.css";',
-                        "```",
-                        "",
-                        "## 4. Override to match your brand",
-                        "",
-                        "```css",
-                        ":root {",
-                        "  --ws-color-primary: #your-brand-color;",
-                        "  --ws-color-primary-hover: #your-brand-darker;",
-                        "}",
-                        "```",
-                        "",
-                        "Docs: https://webspire.de/tokens",
-                    ].join("\n"),
+                        '```',
+                        '',
+                        '## 4. Override to match your brand',
+                        '',
+                        '```css',
+                        ':root {',
+                        '  --ws-color-primary: #your-brand-color;',
+                        '  --ws-color-primary-hover: #your-brand-darker;',
+                        '}',
+                        '```',
+                        '',
+                        'Docs: https://webspire.de/tokens',
+                    ].join('\n'),
                 },
             ],
         };
     });
+    // --- Font Recommendation Tool ---
+    server.tool('recommend_fonts', 'Recommend a font pairing (heading + body + mono) based on business domain and tone. Returns npm install command and Tailwind theme configuration.', {
+        domain: z.enum(DOMAIN_KEYS).describe(`Business domain: ${DOMAIN_LABEL}`),
+        tone: z.enum(TONE_KEYS).describe(`Desired tone: ${TONE_LABEL}`),
+    }, async ({ domain, tone }) => {
+        const fontsData = await loadFonts();
+        if (!fontsData) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Font data not available. Update @webspire/mcp to the latest version.',
+                    },
+                ],
+            };
+        }
+        const rec = recommendFonts(fontsData, domain, tone);
+        const predefinedNote = rec.isPredefined ? '(predefined pairing)' : '(dynamically scored)';
+        const text = [
+            `# Font Recommendation: ${tone} / ${domain} ${predefinedNote}`,
+            '',
+            '## Heading',
+            `**${rec.heading.name}** (\`${rec.heading.npm}\`)`,
+            `CSS: \`${rec.heading.css}\``,
+            `Reason: ${rec.heading.reason}`,
+            '',
+            '## Body',
+            `**${rec.body.name}** (\`${rec.body.npm}\`)`,
+            `CSS: \`${rec.body.css}\``,
+            `Reason: ${rec.body.reason}`,
+            '',
+            '## Mono',
+            `**${rec.mono.name}** (\`${rec.mono.npm}\`)`,
+            `CSS: \`${rec.mono.css}\``,
+            `Reason: ${rec.mono.reason}`,
+            '',
+            '## Install',
+            '```bash',
+            rec.install,
+            '```',
+            '',
+            '## Tailwind Theme',
+            '```css',
+            rec.tailwindTheme,
+            '```',
+            '',
+            'Browse all fonts: https://webspire.de/fonts',
+        ].join('\n');
+        return {
+            content: [{ type: 'text', text }],
+        };
+    });
+    // --- Canvas Effect Tools ---
+    server.tool('search_canvas_effects', 'Search Webspire Canvas effects by keyword, category, or capability. Returns matching effects with their descriptions.', {
+        query: z
+            .string()
+            .describe('Search query, e.g. "particles", "interactive background", "gradient"'),
+        category: z
+            .string()
+            .optional()
+            .describe('Filter by category: backgrounds, interactive, decorative, data-viz, text, business'),
+        interactive: z.boolean().optional().describe('Filter for interactive effects'),
+        animate: z.boolean().optional().describe('Filter for animated effects'),
+    }, async ({ query, category, interactive, animate }) => {
+        const registry = await getRegistry();
+        const effects = registry.canvasEffects ?? [];
+        if (effects.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'No canvas effects available in registry. Canvas effects may need to be bundled first.',
+                    },
+                ],
+            };
+        }
+        const results = searchCanvasEffects(effects, { query, category, interactive, animate });
+        if (results.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'No canvas effects found matching your query.',
+                    },
+                ],
+            };
+        }
+        const text = results
+            .map((e) => `**${e.title}** (${e.id})\n  ${e.description}\n  Category: ${e.category} | Animate: ${e.animate} | Interactive: ${e.interactive}`)
+            .join('\n\n');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Found ${results.length} canvas effect${results.length > 1 ? 's' : ''}:\n\n${text}\n\nUse \`get_canvas_effect(id)\` for full JS source and embed code.`,
+                },
+            ],
+        };
+    });
+    server.tool('get_canvas_effect', 'Get full JavaScript source, parameters, and embed HTML for a specific canvas effect.', {
+        id: z.string().describe('Canvas effect ID, e.g. "backgrounds/particle-field"'),
+    }, async ({ id }) => {
+        const registry = await getRegistry();
+        const effects = registry.canvasEffects ?? [];
+        const effect = effects.find((e) => e.id === id);
+        if (!effect) {
+            const available = effects.map((e) => e.id).join(', ');
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `Canvas effect "${id}" not found. Available: ${available}`,
+                    },
+                ],
+            };
+        }
+        const params = effect.parameters
+            .map((p) => `  ${p.name} (${p.type}, default: ${String(p.default)}): ${p.description}`)
+            .join('\n');
+        const embedHtml = `<canvas id="ws-canvas" style="position:absolute;inset:0;width:100%;height:100%;" aria-hidden="true"></canvas>
+<script type="module">
+import { mountCanvas } from './mount-canvas.js';
+import effect from './${id.split('/').pop()}.js';
+mountCanvas(document.getElementById('ws-canvas'), effect, { animate: ${effect.animate} });
+</script>`;
+        const mountSource = registry.mountCanvas ?? '/* mountCanvas source not bundled */';
+        const text = [
+            `# ${effect.title}`,
+            '',
+            effect.description,
+            '',
+            `Category: ${effect.category} | Animate: ${effect.animate} | Interactive: ${effect.interactive} | Complexity: ${effect.complexity}`,
+            '',
+            '## Parameters',
+            params || '  (none)',
+            '',
+            '## JavaScript',
+            '```javascript',
+            effect.js,
+            '```',
+            '',
+            '## mountCanvas Runtime',
+            '```javascript',
+            mountSource,
+            '```',
+            '',
+            '## Embed HTML',
+            '```html',
+            embedHtml,
+            '```',
+            '',
+            effect.useCases.length > 0
+                ? `## Use Cases\n${effect.useCases.map((u) => `- ${u}`).join('\n')}`
+                : '',
+        ]
+            .filter(Boolean)
+            .join('\n');
+        return {
+            content: [{ type: 'text', text }],
+        };
+    });
 }
 export function registerResourcesWithProvider(server, getRegistry) {
-    server.resource("categories", "webspire://categories", {
-        description: "List all snippet categories with counts",
-        mimeType: "application/json",
+    server.resource('categories', 'webspire://categories', {
+        description: 'List all snippet categories with counts',
+        mimeType: 'application/json',
     }, async () => {
         const registry = await getRegistry();
         const counts = {};
@@ -773,18 +908,18 @@ export function registerResourcesWithProvider(server, getRegistry) {
         return {
             contents: [
                 {
-                    uri: "webspire://categories",
-                    mimeType: "application/json",
+                    uri: 'webspire://categories',
+                    mimeType: 'application/json',
                     text: JSON.stringify(counts, null, 2),
                 },
             ],
         };
     });
-    server.resource("category", "webspire://category/{name}", {
-        description: "List snippets in a specific category",
-        mimeType: "application/json",
+    server.resource('category', 'webspire://category/{name}', {
+        description: 'List snippets in a specific category',
+        mimeType: 'application/json',
     }, async (uri) => {
-        const name = uri.pathname.replace("//", "").split("/").pop();
+        const name = uri.pathname.replace('//', '').split('/').pop();
         const registry = await getRegistry();
         const snippets = registry.snippets.filter((s) => s.category === name);
         const brief = snippets.map((s) => ({
@@ -799,18 +934,18 @@ export function registerResourcesWithProvider(server, getRegistry) {
             contents: [
                 {
                     uri: uri.href,
-                    mimeType: "application/json",
+                    mimeType: 'application/json',
                     text: JSON.stringify(brief, null, 2),
                 },
             ],
         };
     });
-    server.resource("snippet", "webspire://snippet/{id}", {
-        description: "Get full snippet data including CSS source",
-        mimeType: "application/json",
+    server.resource('snippet', 'webspire://snippet/{id}', {
+        description: 'Get full snippet data including CSS source',
+        mimeType: 'application/json',
     }, async (uri) => {
-        const parts = uri.pathname.replace("//", "").split("/");
-        const id = parts.slice(1).join("/");
+        const parts = uri.pathname.replace('//', '').split('/');
+        const id = parts.slice(1).join('/');
         const registry = await getRegistry();
         const snippet = registry.snippets.find((s) => s.id === id);
         if (!snippet) {
@@ -818,7 +953,7 @@ export function registerResourcesWithProvider(server, getRegistry) {
                 contents: [
                     {
                         uri: uri.href,
-                        mimeType: "text/plain",
+                        mimeType: 'text/plain',
                         text: `Snippet "${id}" not found`,
                     },
                 ],
@@ -828,13 +963,13 @@ export function registerResourcesWithProvider(server, getRegistry) {
             contents: [
                 {
                     uri: uri.href,
-                    mimeType: "application/json",
+                    mimeType: 'application/json',
                     text: JSON.stringify(snippet, null, 2),
                 },
             ],
         };
     });
-    server.resource("patterns", "webspire://patterns", { description: "List all patterns", mimeType: "application/json" }, async () => {
+    server.resource('patterns', 'webspire://patterns', { description: 'List all patterns', mimeType: 'application/json' }, async () => {
         const registry = await getRegistry();
         const patterns = (registry.patterns ?? []).map((p) => ({
             id: p.id,
@@ -847,19 +982,19 @@ export function registerResourcesWithProvider(server, getRegistry) {
         return {
             contents: [
                 {
-                    uri: "webspire://patterns",
-                    mimeType: "application/json",
+                    uri: 'webspire://patterns',
+                    mimeType: 'application/json',
                     text: JSON.stringify(patterns, null, 2),
                 },
             ],
         };
     });
-    server.resource("pattern", "webspire://pattern/{id}", {
-        description: "Get full pattern data including HTML source",
-        mimeType: "application/json",
+    server.resource('pattern', 'webspire://pattern/{id}', {
+        description: 'Get full pattern data including HTML source',
+        mimeType: 'application/json',
     }, async (uri) => {
-        const parts = uri.pathname.replace("//", "").split("/");
-        const id = parts.slice(1).join("/");
+        const parts = uri.pathname.replace('//', '').split('/');
+        const id = parts.slice(1).join('/');
         const registry = await getRegistry();
         const pattern = (registry.patterns ?? []).find((p) => p.id === id);
         if (!pattern) {
@@ -867,7 +1002,7 @@ export function registerResourcesWithProvider(server, getRegistry) {
                 contents: [
                     {
                         uri: uri.href,
-                        mimeType: "text/plain",
+                        mimeType: 'text/plain',
                         text: `Pattern "${id}" not found`,
                     },
                 ],
@@ -877,13 +1012,13 @@ export function registerResourcesWithProvider(server, getRegistry) {
             contents: [
                 {
                     uri: uri.href,
-                    mimeType: "application/json",
+                    mimeType: 'application/json',
                     text: JSON.stringify(pattern, null, 2),
                 },
             ],
         };
     });
-    server.resource("templates", "webspire://templates", { description: "List all page templates", mimeType: "application/json" }, async () => {
+    server.resource('templates', 'webspire://templates', { description: 'List all page templates', mimeType: 'application/json' }, async () => {
         const registry = await getRegistry();
         const templates = (registry.templates ?? []).map((t) => ({
             id: t.id,
@@ -895,19 +1030,19 @@ export function registerResourcesWithProvider(server, getRegistry) {
         return {
             contents: [
                 {
-                    uri: "webspire://templates",
-                    mimeType: "application/json",
+                    uri: 'webspire://templates',
+                    mimeType: 'application/json',
                     text: JSON.stringify(templates, null, 2),
                 },
             ],
         };
     });
-    server.resource("template", "webspire://template/{id}", {
-        description: "Get full template data including HTML source",
-        mimeType: "application/json",
+    server.resource('template', 'webspire://template/{id}', {
+        description: 'Get full template data including HTML source',
+        mimeType: 'application/json',
     }, async (uri) => {
-        const parts = uri.pathname.replace("//", "").split("/");
-        const id = parts.slice(1).join("/");
+        const parts = uri.pathname.replace('//', '').split('/');
+        const id = parts.slice(1).join('/');
         const registry = await getRegistry();
         const template = (registry.templates ?? []).find((t) => t.id === id);
         if (!template) {
@@ -915,7 +1050,7 @@ export function registerResourcesWithProvider(server, getRegistry) {
                 contents: [
                     {
                         uri: uri.href,
-                        mimeType: "text/plain",
+                        mimeType: 'text/plain',
                         text: `Template "${id}" not found`,
                     },
                 ],
@@ -925,7 +1060,7 @@ export function registerResourcesWithProvider(server, getRegistry) {
             contents: [
                 {
                     uri: uri.href,
-                    mimeType: "application/json",
+                    mimeType: 'application/json',
                     text: JSON.stringify(template, null, 2),
                 },
             ],