@testgorilla/tgo-ui 11.12.1 → 11.13.0

package/mcp/server.mjs

@@ -3228,8 +3228,8 @@ var require_utils = __commonJS({
       }
       return ind;
     }
-    function removeDotSegments(path2) {
-      let input = path2;
+    function removeDotSegments(path3) {
+      let input = path3;
       const output = [];
       let nextSlash = -1;
       let len = 0;
@@ -3481,8 +3481,8 @@ var require_schemes = __commonJS({
         wsComponent.secure = void 0;
       }
       if (wsComponent.resourceName) {
-        const [path2, query] = wsComponent.resourceName.split("?");
-        wsComponent.path = path2 && path2 !== "/" ? path2 : void 0;
+        const [path3, query] = wsComponent.resourceName.split("?");
+        wsComponent.path = path3 && path3 !== "/" ? path3 : void 0;
         wsComponent.query = query;
         wsComponent.resourceName = void 0;
       }
@@ -7392,8 +7392,8 @@ function getErrorMap() {
 
 // node_modules/zod/v3/helpers/parseUtil.js
 var makeIssue = (params) => {
-  const { data, path: path2, errorMaps, issueData } = params;
-  const fullPath = [...path2, ...issueData.path || []];
+  const { data, path: path3, errorMaps, issueData } = params;
+  const fullPath = [...path3, ...issueData.path || []];
   const fullIssue = {
     ...issueData,
     path: fullPath
@@ -7509,11 +7509,11 @@ var errorUtil;
 
 // node_modules/zod/v3/types.js
 var ParseInputLazyPath = class {
-  constructor(parent, value, path2, key) {
+  constructor(parent, value, path3, key) {
     this._cachedPath = [];
     this.parent = parent;
     this.data = value;
-    this._path = path2;
+    this._path = path3;
     this._key = key;
   }
   get path() {
@@ -11150,10 +11150,10 @@ function assignProp(target, prop, value) {
     configurable: true
   });
 }
-function getElementAtPath(obj, path2) {
-  if (!path2)
+function getElementAtPath(obj, path3) {
+  if (!path3)
     return obj;
-  return path2.reduce((acc, key) => acc?.[key], obj);
+  return path3.reduce((acc, key) => acc?.[key], obj);
 }
 function promiseAllObject(promisesObj) {
   const keys = Object.keys(promisesObj);
@@ -11473,11 +11473,11 @@ function aborted(x, startIndex = 0) {
   }
   return false;
 }
-function prefixIssues(path2, issues) {
+function prefixIssues(path3, issues) {
   return issues.map((iss) => {
     var _a;
     (_a = iss).path ?? (_a.path = []);
-    iss.path.unshift(path2);
+    iss.path.unshift(path3);
     return iss;
   });
 }
@@ -21102,8 +21102,8 @@ var StdioServerTransport = class {
 };
 
 // src/server-lite.ts
-import { readFileSync } from "node:fs";
-import path from "node:path";
+import { readFileSync as readFileSync2 } from "node:fs";
+import path2 from "node:path";
 
 // src/catalog/store.ts
 var CatalogStore = class {
@@ -21144,6 +21144,7 @@ var CatalogStore = class {
       description: c.description,
       importPath: c.importPath,
       moduleName: c.moduleName,
+      standalone: c.standalone,
       inputCount: c.inputs.length,
       outputCount: c.outputs.length,
       supportsTheme: c.supportsTheme,
@@ -21188,12 +21189,22 @@ function registerListComponentsTool(server, store) {
 
 // src/tools/get-component.ts
 var NOT_FOUND = (name) => `Component "${name}" not found. Use list_components to see available components.`;
+function trimComponent(component, params) {
+  const { template, documentation, ...rest } = component;
+  return {
+    ...rest,
+    ...params.includeTemplate ? { template } : {},
+    ...params.includeDocs ? { documentation } : {}
+  };
+}
 function registerGetComponentTool(server, store) {
   server.tool(
     "get_component",
-    'Get full metadata for a tgo-canopy-ui component including all inputs, outputs, types, module info, usage examples, documentation, and (where applicable) resolved color swatches \u2014 e.g. badge exposes background/text hex per rebrandColor value so a Figma fill can be matched mechanically. Accepts component directory name (e.g., "button"), selector (e.g., "ui-button"), or class name (e.g., "ButtonComponent").',
+    'Get full metadata for a tgo-canopy-ui component including all inputs, outputs, types, module info, usage examples, and (where applicable) resolved color swatches \u2014 e.g. badge exposes background/text hex per rebrandColor value so a Figma fill can be matched mechanically. Accepts component directory name (e.g., "button"), selector (e.g., "ui-button"), or class name (e.g., "ButtonComponent"). The raw HTML template and full docs markdown are omitted by default \u2014 pass includeTemplate / includeDocs to get them.',
     {
-      name: external_exports.string().describe("Component name, selector, or class name")
+      name: external_exports.string().describe("Component name, selector, or class name"),
+      includeTemplate: external_exports.boolean().optional().describe("Include the raw HTML template (large; queryGuide already summarizes it). Default false."),
+      includeDocs: external_exports.boolean().optional().describe("Include the full docs markdown (large; get_usage_guide covers most needs). Default false.")
     },
     async (params) => {
       const component = store.find(params.name);
@@ -21204,7 +21215,7 @@ function registerGetComponentTool(server, store) {
         };
       }
       return {
-        content: [{ type: "text", text: JSON.stringify(component, null, 2) }]
+        content: [{ type: "text", text: JSON.stringify(trimComponent(component, params), null, 2) }]
       };
     }
   );
@@ -21270,6 +21281,7 @@ function registerSearchComponentsTool(server, store) {
         description: c.description,
         importPath: c.importPath,
         moduleName: c.moduleName,
+        standalone: c.standalone,
         inputCount: c.inputs.length,
         outputCount: c.outputs.length,
         supportsTheme: c.supportsTheme,
@@ -21309,14 +21321,21 @@ function generateUsageGuide(c) {
     }
     lines.push("");
   }
-  lines.push("## Import");
-  lines.push("");
-  lines.push("```typescript");
-  lines.push(`import { ${c.moduleName} } from '${c.importPath}';`);
-  lines.push("```");
-  lines.push("");
-  lines.push(`Add \`${c.moduleName}\` to the \`imports\` array of your NgModule.`);
-  lines.push("");
+  const importSymbol = c.moduleName || (c.name !== "UnknownComponent" ? c.name : "");
+  if (importSymbol) {
+    lines.push("## Import");
+    lines.push("");
+    lines.push("```typescript");
+    lines.push(`import { ${importSymbol} } from '${c.importPath}';`);
+    lines.push("```");
+    lines.push("");
+    if (!c.moduleName && c.standalone) {
+      lines.push(`This is a standalone component \u2014 add \`${importSymbol}\` to the \`imports\` array of your standalone component or NgModule.`);
+    } else {
+      lines.push(`Add \`${importSymbol}\` to the \`imports\` array of your NgModule or standalone component.`);
+    }
+    lines.push("");
+  }
   if (c.inputs.length > 0) {
     lines.push("## Inputs");
     lines.push("");
@@ -21377,14 +21396,13 @@ function generateUsageGuide(c) {
   lines.push("## Basic Usage");
   lines.push("");
   lines.push("```html");
-  const requiredAttrs = c.inputs.filter((i) => i.required).map((i) => `[${i.alias ?? i.name}]="value"`).join(" ");
-  const optionalAttrs = c.inputs.filter((i) => !i.required).slice(0, 3).map((i) => {
-    const attrName = i.alias ?? i.name;
-    return i.defaultValue ? `${attrName}="${i.defaultValue.replace(/'/g, "")}"` : `[${attrName}]="value"`;
-  }).join(" ");
-  const outputBindings = c.outputs.map((o) => `(${o.alias ?? o.name})="onEvent($event)"`).join(" ");
-  const attrs = [requiredAttrs, optionalAttrs, outputBindings].filter(Boolean).join(" ");
-  lines.push(`<${c.selector} ${attrs}></${c.selector}>`);
+  const requiredInputs = c.inputs.filter((i) => i.required);
+  const shownInputs = requiredInputs.length > 0 ? requiredInputs : representativeInputs(c);
+  const requiredAttrs = shownInputs.map((i) => renderInputPlaceholder(i.alias ?? i.name, i.type, c)).join(" ");
+  const primaryOutput = c.outputs[0];
+  const outputBinding = primaryOutput ? `(${primaryOutput.alias ?? primaryOutput.name})="on${capitalize(primaryOutput.alias ?? primaryOutput.name)}($event)"` : "";
+  const attrs = [requiredAttrs, outputBinding].filter(Boolean).join(" ");
+  lines.push(`<${c.selector}${attrs ? " " + attrs : ""}></${c.selector}>`);
   lines.push("```");
   lines.push("");
   if (c.examples.length > 0) {
@@ -21401,6 +21419,31 @@ function generateUsageGuide(c) {
   }
   return lines.join("\n");
 }
+function representativeInputs(c) {
+  const labelLike = c.inputs.find(
+    (i) => i.type === "string" && /^(label|title|text|placeholder)$/.test(i.alias ?? i.name)
+  );
+  const unionLike = c.inputs.find(
+    (i) => i !== labelLike && firstUnionLiteral(i.type, c) !== null
+  );
+  return [labelLike, unionLike].filter((i) => i !== void 0);
+}
+function renderInputPlaceholder(attrName, type, c) {
+  const unionLiteral = firstUnionLiteral(type, c);
+  if (unionLiteral !== null) return `${attrName}="${unionLiteral}"`;
+  if (type === "boolean") return `[${attrName}]="true"`;
+  if (type === "number") return `[${attrName}]="0"`;
+  if (type === "string") return `${attrName}="value"`;
+  return `[${attrName}]="value"`;
+}
+function firstUnionLiteral(type, c) {
+  const aliased = c.types.typeAliases.find((t) => t.name === type)?.value ?? type;
+  const match = aliased.match(/^\s*\|?\s*'([^']+)'/);
+  return match ? match[1] : null;
+}
+function capitalize(name) {
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
 function registerGetUsageGuideTool(server, store) {
   server.tool(
     "get_usage_guide",
@@ -21791,6 +21834,87 @@ function registerListColorPalettesTool(server, palettes) {
   );
 }
 
+// src/tools/check-version.ts
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+var PACKAGE_NAME = "@testgorilla/tgo-ui";
+function readJson(filePath) {
+  try {
+    return JSON.parse(readFileSync(filePath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function* ancestors(startDir) {
+  let dir = path.resolve(startDir);
+  for (; ; ) {
+    yield dir;
+    const parent = path.dirname(dir);
+    if (parent === dir) return;
+    dir = parent;
+  }
+}
+function findInstalledPackage(startDir) {
+  for (const dir of ancestors(startDir)) {
+    const pkgPath = path.join(dir, "node_modules", ...PACKAGE_NAME.split("/"), "package.json");
+    if (!existsSync(pkgPath)) continue;
+    const version2 = readJson(pkgPath)?.version;
+    if (typeof version2 === "string") return { version: version2, path: pkgPath };
+  }
+  return null;
+}
+function findDeclaredRange(startDir) {
+  for (const dir of ancestors(startDir)) {
+    const pkg = readJson(path.join(dir, "package.json"));
+    if (!pkg) continue;
+    const range = pkg.dependencies?.[PACKAGE_NAME] ?? pkg.devDependencies?.[PACKAGE_NAME] ?? pkg.peerDependencies?.[PACKAGE_NAME];
+    return typeof range === "string" ? range : null;
+  }
+  return null;
+}
+function handleCheckVersion(serverVersion, params, cwd = process.cwd()) {
+  const projectDir = params.projectDir ? path.resolve(cwd, params.projectDir) : cwd;
+  const declaredRange = findDeclaredRange(projectDir);
+  let installedVersion = null;
+  let installedSource = null;
+  if (params.installedVersion) {
+    installedVersion = params.installedVersion.trim().replace(/^v/, "");
+    installedSource = "installedVersion parameter";
+  } else {
+    const installed = findInstalledPackage(projectDir);
+    if (installed) {
+      installedVersion = installed.version;
+      installedSource = installed.path;
+    }
+  }
+  if (installedVersion === null) {
+    return {
+      serverVersion,
+      installedVersion,
+      installedSource,
+      declaredRange,
+      match: null,
+      message: `Could not find ${PACKAGE_NAME} in node_modules above ${projectDir}. Pass the version from your project's node_modules/${PACKAGE_NAME}/package.json as \`installedVersion\`, or point \`projectDir\` at the consumer project root.`
+    };
+  }
+  const match = installedVersion === serverVersion;
+  const message = match ? `OK: the MCP catalog (v${serverVersion}) matches the installed ${PACKAGE_NAME} (v${installedVersion}).` : `MISMATCH: the MCP catalog was built from ${PACKAGE_NAME} v${serverVersion} but the project has v${installedVersion} installed. Component inputs, outputs and examples reported by this server may not exist in the installed version. Point the MCP server at node_modules/${PACKAGE_NAME}/mcp/server.mjs inside this project, or update the dependency so both versions agree.`;
+  return { serverVersion, installedVersion, installedSource, declaredRange, match, message };
+}
+function registerCheckVersionTool(server, serverVersion) {
+  server.tool(
+    "check_version",
+    `Verify that this MCP server's catalog matches the ${PACKAGE_NAME} version installed in the consumer project. The installed version is resolved from node_modules (walking up from the server's working directory or \`projectDir\`); pass \`installedVersion\` to override. Call this first when component metadata looks out of sync with the code you are working on. Returns \`{ serverVersion, installedVersion, installedSource, declaredRange, match, message }\`.`,
+    {
+      installedVersion: external_exports.string().optional().describe(`Installed ${PACKAGE_NAME} version to compare against (e.g. "11.12.2"). Overrides node_modules resolution.`),
+      projectDir: external_exports.string().optional().describe("Consumer project directory to resolve node_modules from. Defaults to the server's working directory.")
+    },
+    async ({ installedVersion, projectDir }) => ({
+      content: [{ type: "text", text: JSON.stringify(handleCheckVersion(serverVersion, { installedVersion, projectDir }), null, 2) }]
+    })
+  );
+}
+
 // src/icons/icon-resolver.ts
 var MIN_FUZZY_QUERY_LENGTH = 4;
 var IconResolver = class {
@@ -22010,14 +22134,15 @@ function createStaticMcpServer(catalog) {
   registerGetDesignTokensTool(server, catalog.tokens ?? []);
   registerListTypographyClassesTool(server, catalog.typography ?? []);
   registerListColorPalettesTool(server, catalog.colorPalettes ?? []);
+  registerCheckVersionTool(server, catalog.version);
   return server;
 }
 var isMainScript = import.meta.url === `file://${process.argv[1]}` || process.argv[1]?.endsWith("server-lite.js") || process.argv[1]?.endsWith("server.mjs");
 if (isMainScript) {
-  const catalogPath = path.join(import.meta.dirname, "catalog.json");
+  const catalogPath = path2.join(import.meta.dirname, "catalog.json");
   let raw;
   try {
-    raw = readFileSync(catalogPath, "utf-8");
+    raw = readFileSync2(catalogPath, "utf-8");
   } catch {
     console.error(`[mcp] Fatal: catalog.json not found at ${catalogPath}`);
     console.error("[mcp] The catalog must be adjacent to server.mjs");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "11.12.1",
+  "version": "11.13.0",
   "license": "proprietary-license",
   "lint-staged": {
     "{projects,components}/**/*.ts": [