@cobwds/mcp-server 1.19.4 → 1.23.1

package/dist/resources/frameworks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Framework Resources
+ *
+ * MCP resources for COBWDS framework packages (@cobwds/react, @cobwds/vue,
+ * @cobwds/angular).
+ *
+ * Resources:
+ * - cobwds://frameworks - Index of framework packages with version and guide URI
+ * - cobwds://frameworks/react - @cobwds/react guide (synced from its README)
+ * - cobwds://frameworks/vue - @cobwds/vue guide (synced from its README)
+ * - cobwds://frameworks/angular - @cobwds/angular guide (synced from its README)
+ */
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerFrameworkResources(server: McpServer): void;
+//# sourceMappingURL=frameworks.d.ts.map

package/dist/resources/frameworks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frameworks.d.ts","sourceRoot":"","sources":["../../src/resources/frameworks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAezE,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAwGlE"}

package/dist/resources/frameworks.js

@@ -0,0 +1,104 @@
+/**
+ * Framework Resources
+ *
+ * MCP resources for COBWDS framework packages (@cobwds/react, @cobwds/vue,
+ * @cobwds/angular).
+ *
+ * Resources:
+ * - cobwds://frameworks - Index of framework packages with version and guide URI
+ * - cobwds://frameworks/react - @cobwds/react guide (synced from its README)
+ * - cobwds://frameworks/vue - @cobwds/vue guide (synced from its README)
+ * - cobwds://frameworks/angular - @cobwds/angular guide (synced from its README)
+ */
+import { readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { getFrameworksIndex } from "../lib/frameworks-data.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const GUIDES_DIR = join(__dirname, "../../data/guides/frameworks");
+function loadFrameworkGuide(framework) {
+    try {
+        return readFileSync(join(GUIDES_DIR, `${framework}.md`), "utf-8");
+    }
+    catch {
+        return `Framework guide not found: ${framework}. Run "npm run sync:guides -w @cobwds/mcp-server".`;
+    }
+}
+export function registerFrameworkResources(server) {
+    // cobwds://frameworks - Index of framework packages
+    server.resource("frameworks", "cobwds://frameworks", {
+        description: "Index of COBWDS framework packages (@cobwds/react, @cobwds/vue, @cobwds/angular) with their published version and guide resource URI",
+        mimeType: "application/json",
+    }, async () => {
+        const index = getFrameworksIndex();
+        const list = [
+            {
+                id: "react",
+                packageName: index.react.packageName,
+                version: index.react.version,
+                guideUri: "cobwds://frameworks/react",
+            },
+            {
+                id: "vue",
+                packageName: index.vue.packageName,
+                version: index.vue.version,
+                guideUri: "cobwds://frameworks/vue",
+            },
+            {
+                id: "angular",
+                packageName: index.angular.packageName,
+                version: index.angular.version,
+                guideUri: "cobwds://frameworks/angular",
+            },
+        ];
+        return {
+            contents: [
+                {
+                    uri: "cobwds://frameworks",
+                    mimeType: "application/json",
+                    text: JSON.stringify(list, null, 2),
+                },
+            ],
+        };
+    });
+    // cobwds://frameworks/react - @cobwds/react guide
+    server.resource("frameworks-react", "cobwds://frameworks/react", {
+        description: "@cobwds/react install, usage, forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "cobwds://frameworks/react",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("react"),
+            },
+        ],
+    }));
+    // cobwds://frameworks/vue - @cobwds/vue guide
+    server.resource("frameworks-vue", "cobwds://frameworks/vue", {
+        description: "@cobwds/vue install, usage, v-model forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "cobwds://frameworks/vue",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("vue"),
+            },
+        ],
+    }));
+    // cobwds://frameworks/angular - @cobwds/angular guide
+    server.resource("frameworks-angular", "cobwds://frameworks/angular", {
+        description: "@cobwds/angular install, usage, forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "cobwds://frameworks/angular",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("angular"),
+            },
+        ],
+    }));
+}

package/dist/resources/guides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAyE9D"}
+{"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAoF9D"}

package/dist/resources/guides.js

@@ -56,7 +56,18 @@ Then use them in HTML:
 
 ## Framework Integration
 
-For framework-specific setup, use the \`get_guide\` tool with \`topic: "framework"\` and a \`framework\` parameter (angular, react, dotnet, drupal, or vanilla).
+For framework-specific setup, use the \`get_guide\` tool with a \`topic\` and a \`framework\` parameter (angular, react, vue, dotnet, drupal, or vanilla).
+
+React, Vue, and Angular are first-class packages, not wrapper snippets:
+\`@cobwds/react\` (\`npm install @cobwds/react\`), \`@cobwds/vue\`
+(\`npm install @cobwds/vue\`), and \`@cobwds/angular\`
+(\`npm install @cobwds/angular @cobwds/components\`) generate typed
+components, props, and events directly from this design system's
+manifest. See the \`cobwds://frameworks\` resource for their current
+published versions, \`cobwds://frameworks/react\`, \`cobwds://frameworks/vue\`, and
+\`cobwds://frameworks/angular\` for their full guides, and pass
+\`framework: "react"\` or \`"angular"\` to \`get_component\` for
+per-component import lines and framework-specific code examples.
 
 ## Resources
 

package/dist/resources/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAKzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAMzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAKzD"}

package/dist/resources/index.js

@@ -6,8 +6,10 @@
 import { registerComponentResources } from "./components.js";
 import { registerTokenResources } from "./tokens.js";
 import { registerGuideResources } from "./guides.js";
+import { registerFrameworkResources } from "./frameworks.js";
 export function registerResources(server) {
     registerComponentResources(server);
     registerTokenResources(server);
     registerGuideResources(server);
+    registerFrameworkResources(server);
 }

package/dist/tools/component-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA+G9D"}
+{"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAYzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA2I9D"}

package/dist/tools/component-tools.js

@@ -10,6 +10,8 @@
 import { z } from "zod";
 import { getComponent, getAllComponents } from "../lib/cem-parser.js";
 import { searchComponents } from "../lib/search.js";
+import { buildExampleSnippets, } from "../lib/framework-snippets.js";
+import { buildAngularUsageNotes, buildReactUsageNotes, } from "../lib/framework-usage.js";
 export function registerComponentTools(server) {
     // find_components - Search or list all components
     server.tool("find_components", "Search for COBWDS components by name or description. Omit query to list all components.", {
@@ -51,15 +53,19 @@ export function registerComponentTools(server) {
         };
     });
     // get_component - Full documentation for a specific component
-    server.tool("get_component", "Get full documentation for a specific COBWDS component including properties, events, slots, and CSS custom properties", {
+    server.tool("get_component", "Get full documentation for a specific COBWDS component including properties, events, slots, and CSS custom properties. Set framework to 'react' or 'angular' to get that framework's import line, event-prop naming, and forms guidance alongside HTML/React/Angular code examples.", {
         tagName: z
             .string()
             .describe("The tag name of the component (e.g., 'cob-button')"),
         includeExamples: z
             .boolean()
             .default(false)
-            .describe("Include HTML code examples from component JSDoc. Set to true when you need usage patterns."),
-    }, async ({ tagName, includeExamples }) => {
+            .describe("Include code examples from component JSDoc. Set to true when you need usage patterns. Each example carries html, react, and angular snippets."),
+        framework: z
+            .enum(["html", "react", "angular"])
+            .default("html")
+            .describe("Which framework to optimize the response for. 'html' (default) returns plain custom-element usage. 'react' and 'angular' add framework-specific usage notes (import line, event-prop naming, forms binding) and, for a form-control component, transform that framework's example snippets into its idiomatic controlled/reactive-forms pattern."),
+    }, async ({ tagName, includeExamples, framework }) => {
         const component = getComponent(tagName);
         if (!component) {
             return {
@@ -76,16 +82,25 @@ export function registerComponentTools(server) {
         // Attributes contains the HTML API, members duplicates this plus private methods
         const { 
         // members: _members,
-        examples, ...componentWithoutMembers } = component;
+        examples, formControl, ...componentWithoutMembers } = component;
+        const usage = {};
+        if (framework === "react") {
+            usage.react = buildReactUsageNotes(tagName, component.name, formControl);
+        }
+        else if (framework === "angular") {
+            usage.angular = buildAngularUsageNotes(tagName, component.name, formControl);
+        }
         return {
             content: [
                 {
                     type: "text",
                     text: JSON.stringify({
                         ...componentWithoutMembers,
+                        formControl,
                         examples: includeExamples && examples && examples.length > 0
-                            ? examples
+                            ? buildExampleSnippets(examples, framework, formControl)
                             : undefined,
+                        usage: Object.keys(usage).length > 0 ? usage : undefined,
                         resourceUri: `cobwds://component/${tagName}`,
                     }, null, 2),
                 },

package/dist/tools/guide-tools.js

@@ -56,7 +56,7 @@ export function registerGuideTools(server) {
         ])
             .describe("The guide topic to retrieve"),
         framework: z
-            .enum(["angular", "react", "dotnet", "drupal", "vanilla"])
+            .enum(["angular", "react", "vue", "dotnet", "drupal", "vanilla"])
             .optional()
             .describe("When provided, returns framework-specific setup guide instead of the topic guide. Use with topic 'installation' to get framework install instructions."),
     }, async ({ topic, framework }) => {

package/dist/tools/utility-tools.d.ts

@@ -2,7 +2,55 @@
  * Utility Tools
  *
  * MCP tools for COBWDS utility classes.
+ *
+ * The class lists this tool returns are RENDERED from the scale constants
+ * below. Those constants mirror the Sass sources that actually generate the
+ * stylesheet:
+ *
+ *   - packages/styles/src/utilities/_config.scss     ($spacing, $opacity-values,
+ *                                                     $zindex-values, $display-values,
+ *                                                     $breakpoints, $flex-columns)
+ *   - packages/styles/src/utilities/_layout-grid.scss ($responsive-gap-suffixes)
+ *   - packages/styles/src/core/typography.scss        ($body-sizes, $ui-sizes,
+ *                                                     $ui-underline-styles, $display-sizes)
+ *
+ * Do not hand-write a class name into the markdown. Add it to a scale and let
+ * the renderer emit it, so a name can never appear here without a scale entry
+ * behind it.
+ *
+ * `npm run verify:utility-docs` compiles the stylesheet and asserts that every
+ * class this tool names exists in it. Run it after touching any scale.
  */
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+declare const UTILITY_DOCS: {
+    grid: string;
+    flex: string;
+    spacing: string;
+    display: string;
+    opacity: string;
+    zindex: string;
+    typography: string;
+    responsive: string;
+    componentSpacing: string;
+};
+/**
+ * Classes the reference deliberately names in order to say they do NOT exist.
+ *
+ * These are the names people reach for out of habit from other frameworks.
+ * Saying so explicitly is more useful than silence, but it means the docs
+ * mention class names the stylesheet does not define, which would otherwise
+ * trip the verifier.
+ *
+ * `verify-utility-docs.mjs` asserts each of these is genuinely absent, so if
+ * COBWDS ever adds one, the stale warning fails the check instead of quietly
+ * misinforming people.
+ */
+declare const KNOWN_ABSENT: readonly string[];
+/**
+ * Exported so `src/scripts/verify-utility-docs.mjs` can assert that every class
+ * named in this reference exists in the compiled stylesheet — and that every
+ * class named in KNOWN_ABSENT still does not.
+ */
+export { UTILITY_DOCS, KNOWN_ABSENT };
 export declare function registerUtilityTools(server: McpServer): void;
 //# sourceMappingURL=utility-tools.d.ts.map

package/dist/tools/utility-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utility-tools.d.ts","sourceRoot":"","sources":["../../src/tools/utility-tools.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAmPzE,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA8D5D"}
+{"version":3,"file":"utility-tools.d.ts","sourceRoot":"","sources":["../../src/tools/utility-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAiLzE,QAAA,MAAM,YAAY;;;;;;;;;;CAyOjB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,YAAY,EAAE,SAAS,MAAM,EAUlC,CAAC;AAEF;;;;GAIG;AACH,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAEtC,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA8D5D"}