@redocly/theme 0.69.0-next.1 → 0.69.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/lib/components/Badge/Badge.d.ts +3 -1
  2. package/lib/components/Badge/Badge.js +7 -2
  3. package/lib/components/Buttons/ConnectMCPButton.js +43 -14
  4. package/lib/components/MCP/McpConnectionTabs.d.ts +7 -0
  5. package/lib/components/MCP/McpConnectionTabs.js +151 -0
  6. package/lib/core/constants/mcp.d.ts +2 -0
  7. package/lib/core/constants/mcp.js +8 -1
  8. package/lib/core/hooks/use-active-heading.js +59 -15
  9. package/lib/core/hooks/use-active-section-id.js +3 -1
  10. package/lib/core/hooks/use-connect-mcp-button.d.ts +1 -1
  11. package/lib/core/hooks/use-connect-mcp-button.js +16 -13
  12. package/lib/core/styles/global.js +6 -1
  13. package/lib/core/types/catalog.d.ts +2 -0
  14. package/lib/core/types/l10n.d.ts +1 -1
  15. package/lib/core/types/mcp.d.ts +1 -1
  16. package/lib/core/utils/mcp.d.ts +5 -0
  17. package/lib/core/utils/mcp.js +35 -0
  18. package/lib/icons/CodexIcon/CodexIcon.d.ts +25 -0
  19. package/lib/icons/CodexIcon/CodexIcon.js +22 -0
  20. package/lib/layouts/McpNotAllowed.js +5 -3
  21. package/lib/markdoc/components/Cards/Card.d.ts +8 -1
  22. package/lib/markdoc/components/Cards/Card.js +55 -16
  23. package/lib/markdoc/components/Cards/CardBadge.d.ts +9 -0
  24. package/lib/markdoc/components/Cards/CardBadge.js +30 -0
  25. package/lib/markdoc/components/Cards/CardIcon.d.ts +5 -4
  26. package/lib/markdoc/components/Cards/CardIcon.js +6 -3
  27. package/lib/markdoc/components/Cards/variables.dark.js +32 -0
  28. package/lib/markdoc/components/Cards/variables.js +76 -4
  29. package/lib/markdoc/tags/card.js +14 -0
  30. package/lib/markdoc/tags/connect-mcp.js +2 -1
  31. package/package.json +2 -2
  32. package/src/components/Badge/Badge.tsx +16 -2
  33. package/src/components/Buttons/ConnectMCPButton.tsx +44 -14
  34. package/src/components/MCP/McpConnectionTabs.tsx +263 -0
  35. package/src/core/constants/mcp.ts +10 -0
  36. package/src/core/hooks/use-active-heading.ts +79 -15
  37. package/src/core/hooks/use-active-section-id.ts +3 -1
  38. package/src/core/hooks/use-connect-mcp-button.ts +23 -15
  39. package/src/core/styles/global.ts +6 -1
  40. package/src/core/types/catalog.ts +3 -0
  41. package/src/core/types/l10n.ts +17 -0
  42. package/src/core/types/mcp.ts +1 -1
  43. package/src/core/utils/mcp.ts +39 -0
  44. package/src/icons/CodexIcon/CodexIcon.tsx +23 -0
  45. package/src/layouts/McpNotAllowed.tsx +4 -2
  46. package/src/markdoc/components/Cards/Card.tsx +79 -14
  47. package/src/markdoc/components/Cards/CardBadge.tsx +39 -0
  48. package/src/markdoc/components/Cards/CardIcon.tsx +16 -5
  49. package/src/markdoc/components/Cards/variables.dark.ts +32 -0
  50. package/src/markdoc/components/Cards/variables.ts +76 -4
  51. package/src/markdoc/tags/card.ts +14 -0
  52. package/src/markdoc/tags/connect-mcp.ts +3 -1
@@ -1,5 +1,5 @@
1
1
  import type { TOptions } from 'i18next';
2
- export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.create.app.dialog.callbackUrls' | 'dev.create.app.dialog.callbackUrls.placeholder' | 'dev.create.app.dialog.callbackUrls.hint' | 'dev.app.callbackUrls.title' | 'dev.edit.callbackUrls.dialog.title' | 'dev.edit.callbackUrls.dialog.placeholder' | 'dev.edit.callbackUrls.dialog.hint' | 'dev.edit.callbackUrls.dialog.save' | 'dev.edit.callbackUrls.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.error.title' | 'search.error.button' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolCall.executed' | 'search.ai.toolCall.executing' | 'search.ai.toolCall.withArgs' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.mcpNotAllowed.title' | 'page.mcpNotAllowed.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.notConnected' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.filters.close' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.maxLength' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'jsonViewer.showMore' | 'jsonViewer.showLess' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.languages.moreButton.tooltipText' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.schemas' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.querystring' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.property' | 'openapi.properties' | 'openapi.details' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.noRequestData' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'asyncapi.info.contact.url' | 'asyncapi.info.contact.name' | 'asyncapi.info.license' | 'asyncapi.info.termsOfService' | 'asyncapi.key' | 'asyncapi.value' | 'asyncapi.variables' | 'asyncapi.required' | 'asyncapi.requiredScopes' | 'asyncapi.viewSecurityDetails' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.actions.show' | 'graphql.actions.hide' | 'graphql.actions.more' | 'graphql.fields' | 'graphql.inputFields' | 'graphql.values' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.implementedBy' | 'graphql.nonNull' | 'graphql.required' | 'asyncapi.badges.deprecated' | 'graphql.badges.deprecated' | 'asyncapi.actions.show' | 'asyncapi.actions.hide' | 'asyncapi.actions.more' | 'asyncapi.payload' | 'asyncapi.parameters' | 'asyncapi.messages' | 'asyncapi.contentType' | 'asyncapi.moreDetails' | 'asyncapi.property' | 'asyncapi.properties' | 'asyncapi.details' | 'asyncapi.reply' | 'asyncapi.servers.title' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'button.copy.tooltipText' | 'button.download.tooltipText' | 'button.externalLink.tooltipText' | 'button.email.tooltipText' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'diagram.openFullscreen' | 'diagram.zoomIn' | 'diagram.zoomOut' | 'diagram.reset' | 'diagram.close' | 'diagram.viewer';
2
+ export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.create.app.dialog.callbackUrls' | 'dev.create.app.dialog.callbackUrls.placeholder' | 'dev.create.app.dialog.callbackUrls.hint' | 'dev.app.callbackUrls.title' | 'dev.edit.callbackUrls.dialog.title' | 'dev.edit.callbackUrls.dialog.placeholder' | 'dev.edit.callbackUrls.dialog.hint' | 'dev.edit.callbackUrls.dialog.save' | 'dev.edit.callbackUrls.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.error.title' | 'search.error.button' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolCall.executed' | 'search.ai.toolCall.executing' | 'search.ai.toolCall.withArgs' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.mcpNotAllowed.title' | 'page.mcpNotAllowed.description' | 'page.mcpNotAllowed.snippets.terminal.hint' | 'page.mcpNotAllowed.snippets.claudeCode.headline' | 'page.mcpNotAllowed.snippets.claudeDesktop.headline' | 'page.mcpNotAllowed.snippets.claudeDesktop.instruction' | 'page.mcpNotAllowed.snippets.chatgptApp.headline' | 'page.mcpNotAllowed.snippets.chatgptApp.instruction' | 'page.mcpNotAllowed.snippets.codexCli.headline' | 'page.mcpNotAllowed.snippets.prompt.headline' | 'page.mcpNotAllowed.snippets.prompt.hint' | 'page.mcpNotAllowed.snippets.json.hint' | 'page.mcpNotAllowed.tabs.claude' | 'page.mcpNotAllowed.tabs.chatgpt' | 'page.mcpNotAllowed.tabs.json' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.notConnected' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.filters.close' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.maxLength' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'jsonViewer.showMore' | 'jsonViewer.showLess' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.claudeCode' | 'page.actions.connectMcp.claudeCodeDescription' | 'page.actions.connectMcp.codex' | 'page.actions.connectMcp.codexDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.languages.moreButton.tooltipText' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.schemas' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.querystring' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.property' | 'openapi.properties' | 'openapi.details' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.noRequestData' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'asyncapi.info.contact.url' | 'asyncapi.info.contact.name' | 'asyncapi.info.license' | 'asyncapi.info.termsOfService' | 'asyncapi.key' | 'asyncapi.value' | 'asyncapi.variables' | 'asyncapi.required' | 'asyncapi.requiredScopes' | 'asyncapi.viewSecurityDetails' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.actions.show' | 'graphql.actions.hide' | 'graphql.actions.more' | 'graphql.fields' | 'graphql.inputFields' | 'graphql.values' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.implementedBy' | 'graphql.nonNull' | 'graphql.required' | 'asyncapi.badges.deprecated' | 'graphql.badges.deprecated' | 'asyncapi.actions.show' | 'asyncapi.actions.hide' | 'asyncapi.actions.more' | 'asyncapi.payload' | 'asyncapi.parameters' | 'asyncapi.messages' | 'asyncapi.contentType' | 'asyncapi.moreDetails' | 'asyncapi.property' | 'asyncapi.properties' | 'asyncapi.details' | 'asyncapi.reply' | 'asyncapi.servers.title' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'button.copy.tooltipText' | 'button.download.tooltipText' | 'button.externalLink.tooltipText' | 'button.email.tooltipText' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'diagram.openFullscreen' | 'diagram.zoomIn' | 'diagram.zoomOut' | 'diagram.reset' | 'diagram.close' | 'diagram.viewer';
3
3
  export type Locale = {
4
4
  code: string;
5
5
  name: string;
@@ -1,5 +1,5 @@
1
1
  export type MCPClientType = 'cursor' | 'vscode';
2
- export type MCPOption = 'cursor' | 'vscode' | 'copy';
2
+ export type MCPOption = 'cursor' | 'vscode' | 'claude-code' | 'codex' | 'copy';
3
3
  export type McpConnectionParams = {
4
4
  serverName: string;
5
5
  url: string;
@@ -1,2 +1,7 @@
1
1
  import type { MCPClientType, McpConnectionParams } from '../types';
2
2
  export declare function generateMCPDeepLink(clientType: MCPClientType, config: McpConnectionParams): string;
3
+ export declare function slugifyMcpServerName(name: string): string;
4
+ export declare function generateClaudeDesktopConfig(config: McpConnectionParams): string;
5
+ export declare function generateClaudeCodeCommand(config: McpConnectionParams): string;
6
+ export declare function generateCodexCommand(config: McpConnectionParams): string;
7
+ export declare function generateMcpInstallPrompt(config: McpConnectionParams): string;
@@ -1,6 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.generateMCPDeepLink = generateMCPDeepLink;
4
+ exports.slugifyMcpServerName = slugifyMcpServerName;
5
+ exports.generateClaudeDesktopConfig = generateClaudeDesktopConfig;
6
+ exports.generateClaudeCodeCommand = generateClaudeCodeCommand;
7
+ exports.generateCodexCommand = generateCodexCommand;
8
+ exports.generateMcpInstallPrompt = generateMcpInstallPrompt;
4
9
  function generateCursorMCPDeepLink(config) {
5
10
  const cursorConfig = {
6
11
  url: config.url,
@@ -28,4 +33,34 @@ function generateMCPDeepLink(clientType, config) {
28
33
  return generateCursorMCPDeepLink(config);
29
34
  }
30
35
  }
36
+ // Server names can contain spaces (e.g. "Docs MCP server") which break bare CLI
37
+ // arguments, so commands use a slugified form while JSON configs keep the raw name.
38
+ function slugifyMcpServerName(name) {
39
+ return name
40
+ .toLowerCase()
41
+ .replace(/[^a-z0-9_-]+/g, '-')
42
+ .replace(/^-+|-+$/g, '');
43
+ }
44
+ // Claude Desktop's config file only launches stdio commands, so remote servers
45
+ // connect through the mcp-remote bridge.
46
+ function generateClaudeDesktopConfig(config) {
47
+ return JSON.stringify({
48
+ mcpServers: {
49
+ [slugifyMcpServerName(config.serverName)]: {
50
+ command: 'npx',
51
+ args: ['-y', 'mcp-remote', config.url],
52
+ },
53
+ },
54
+ }, null, 2);
55
+ }
56
+ function generateClaudeCodeCommand(config) {
57
+ return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
58
+ }
59
+ function generateCodexCommand(config) {
60
+ return `codex mcp add ${slugifyMcpServerName(config.serverName)} --url ${config.url}`;
61
+ }
62
+ // Pasted into an AI assistant (Claude Code, Codex) so it installs the server itself.
63
+ function generateMcpInstallPrompt(config) {
64
+ return `Add the MCP server "${slugifyMcpServerName(config.serverName)}" with URL ${config.url} (streamable HTTP transport) to my MCP configuration, then verify it is connected.`;
65
+ }
31
66
  //# sourceMappingURL=mcp.js.map
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import type { IconProps } from '../../icons/types';
3
+ declare const Icon: (props: IconProps) => React.JSX.Element;
4
+ export declare const CodexIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
5
+ color?: string;
6
+ size?: string;
7
+ className?: string;
8
+ 'data-component-name'?: string;
9
+ } & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
10
+ color?: string;
11
+ size?: string;
12
+ className?: string;
13
+ 'data-component-name'?: string;
14
+ } & React.SVGProps<SVGSVGElement>, "data-component-name"> & Partial<Pick<import("styled-components").FastOmit<{
15
+ color?: string;
16
+ size?: string;
17
+ className?: string;
18
+ 'data-component-name'?: string;
19
+ } & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
20
+ color?: string;
21
+ size?: string;
22
+ className?: string;
23
+ 'data-component-name'?: string;
24
+ } & React.SVGProps<SVGSVGElement>, "data-component-name">>> & string & Omit<typeof Icon, keyof React.Component<any, {}, any>>;
25
+ export {};
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CodexIcon = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const styled_components_1 = __importDefault(require("styled-components"));
9
+ const utils_1 = require("../../core/utils");
10
+ const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
11
+ react_1.default.createElement("path", { d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.073zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997z" })));
12
+ exports.CodexIcon = (0, styled_components_1.default)(Icon).attrs({
13
+ 'data-component-name': 'icons/CodexIcon/CodexIcon',
14
+ }) `
15
+ path {
16
+ fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
17
+ }
18
+
19
+ height: ${({ size }) => size || '16px'};
20
+ width: ${({ size }) => size || '16px'};
21
+ `;
22
+ //# sourceMappingURL=CodexIcon.js.map
@@ -8,15 +8,17 @@ const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
9
  const hooks_1 = require("../core/hooks");
10
10
  const ConnectMCPButton_1 = require("../components/Buttons/ConnectMCPButton");
11
+ const McpConnectionTabs_1 = require("../components/MCP/McpConnectionTabs");
11
12
  function McpNotAllowed() {
12
13
  const { useTranslate } = (0, hooks_1.useThemeHooks)();
13
14
  const { translate } = useTranslate();
14
15
  return (react_1.default.createElement(NotAllowedWrapper, { "data-component-name": "layouts/McpNotAllowed" },
15
16
  react_1.default.createElement(StatusText, null, "405"),
16
- react_1.default.createElement(Title, { "data-translation-key": "page.mcpNotAllowed.title" }, translate('page.mcpNotAllowed.title', 'Method not allowed')),
17
- react_1.default.createElement(Description, { "data-translation-key": "page.mcpNotAllowed.description" }, translate('page.mcpNotAllowed.description', 'To use this MCP server, register it in your MCP Client (for example: VS Code, Cursor, or Claude Code).')),
17
+ react_1.default.createElement(Title, { "data-translation-key": "page.mcpNotAllowed.title" }, translate('page.mcpNotAllowed.title', 'Connect to the MCP server')),
18
+ react_1.default.createElement(Description, { "data-translation-key": "page.mcpNotAllowed.description" }, translate('page.mcpNotAllowed.description', 'To use this MCP server, register it in your MCP client (for example: VS Code, Cursor, or Claude Code).')),
18
19
  react_1.default.createElement(ButtonWrapper, null,
19
- react_1.default.createElement(ConnectMCPButton_1.ConnectMCPButton, { alignment: "start" }))));
20
+ react_1.default.createElement(ConnectMCPButton_1.ConnectMCPButton, { alignment: "start" })),
21
+ react_1.default.createElement(McpConnectionTabs_1.McpConnectionTabs, null)));
20
22
  }
21
23
  const NotAllowedWrapper = styled_components_1.default.div `
22
24
  height: 100%;
@@ -10,7 +10,14 @@ export type CardProps = React.PropsWithChildren<{
10
10
  layout?: 'horizontal' | 'vertical' | 'combined';
11
11
  variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
12
12
  iconVariant?: 'filled' | 'ghost';
13
+ iconColor?: string;
13
14
  align?: 'start' | 'center' | 'end';
14
15
  to?: string;
16
+ linkIcon?: 'chevron' | 'arrow';
17
+ cta?: React.ReactNode;
18
+ badge?: string;
19
+ badgeColor?: string;
20
+ badgeIcon?: string;
21
+ badgeIconRawContent?: string;
15
22
  }>;
16
- export declare function Card({ title, image, icon, iconRawContent, imagePosition, iconPosition, layout, variant, lineClamp, iconVariant, align, to, children, }: CardProps): React.JSX.Element;
23
+ export declare function Card({ title, image, icon, iconRawContent, imagePosition, iconPosition, layout, variant, lineClamp, iconVariant, iconColor, align, to, cta, linkIcon, badge, badgeColor, badgeIcon, badgeIconRawContent, children, }: CardProps): React.JSX.Element;
@@ -7,10 +7,12 @@ exports.Card = Card;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
9
  const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
10
+ const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
10
11
  const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
11
12
  const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
13
+ const CardBadge_1 = require("../../../markdoc/components/Cards/CardBadge");
12
14
  const Link_1 = require("../../../components/Link/Link");
13
- function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', align = 'start', to, children, }) {
15
+ function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', iconColor, align = 'start', to, cta, linkIcon, badge, badgeColor, badgeIcon, badgeIconRawContent, children, }) {
14
16
  const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
15
17
  const cardTitleId = `card-title-${titleNoSpaces}`;
16
18
  const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
@@ -20,12 +22,20 @@ function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start'
20
22
  react_1.default.createElement(react_1.default.Fragment, null,
21
23
  image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
22
24
  react_1.default.createElement(CardContentWrapper, { $layout: layout, $alignItems: alignItems, $textAlign: textAlign, $hasImage: image !== undefined },
23
- icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition })),
25
+ icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition, color: iconColor })),
24
26
  react_1.default.createElement(ContentWrapper, null,
25
- react_1.default.createElement(Title, { id: cardTitleId, $isCardLink: !!to, $justifyContent: justifyContent },
26
- title,
27
- variant == 'ghost' && !!to && react_1.default.createElement(CardLinkIcon, null)),
28
- react_1.default.createElement(Body, { $lineClamp: lineClamp }, children))))));
27
+ react_1.default.createElement(TitleWrapper, { id: cardTitleId, $isCardLink: !!to, $justifyContent: justifyContent },
28
+ react_1.default.createElement(Title, null,
29
+ title,
30
+ !!to && !!linkIcon && (react_1.default.createElement(CardLinkIcon, { as: linkIcon === 'arrow' ? ArrowUpRightIcon_1.ArrowUpRightIcon : undefined }))),
31
+ !!badge && (react_1.default.createElement(CardBadge_1.CardBadge, { color: badgeColor, icon: badgeIcon, iconRawContent: badgeIconRawContent }, badge))),
32
+ react_1.default.createElement(Body, { $lineClamp: lineClamp }, children),
33
+ !!to && !!cta && (react_1.default.createElement(Cta, { $justifyContent: justifyContent },
34
+ react_1.default.createElement(CtaText, null,
35
+ " ",
36
+ cta,
37
+ " "),
38
+ react_1.default.createElement(CtaIcon, null))))))));
29
39
  }
30
40
  const CardContentWrapper = styled_components_1.default.div `
31
41
  display: flex;
@@ -44,24 +54,26 @@ const ContentWrapper = styled_components_1.default.div `
44
54
  gap: var(--card-content-gap);
45
55
  width: 100%;
46
56
  `;
47
- const Title = styled_components_1.default.h3 `
48
- margin: var(--card-title-margin);
49
- font-weight: var(--card-title-font-weight);
57
+ const TitleWrapper = styled_components_1.default.div `
50
58
  color: var(--card-title-text-color);
51
59
  display: flex;
52
60
  align-items: center;
61
+ flex-wrap: wrap;
62
+ row-gap: var(--card-title-row-gap);
53
63
  justify-content: ${({ $justifyContent }) => $justifyContent};
54
64
  width: 100%;
55
65
  `;
66
+ const Title = styled_components_1.default.h3 `
67
+ margin: var(--card-title-margin);
68
+ font-weight: var(--card-title-font-weight);
69
+ `;
70
+ // The `as` prop selects the icon; the chevron is the default target.
56
71
  const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
57
72
  width: var(--card-link-icon-width);
58
73
  height: var(--card-link-icon-height);
59
- color: var(--card-link-icon-color);
74
+ color: var(--icon-color-secondary);
60
75
  margin-left: var(--spacing-xxs);
61
- opacity: 0;
62
- transition:
63
- opacity 0.3s,
64
- transform 0.3s;
76
+ margin-top: calc(var(--spacing-xxs) / 2);
65
77
  `;
66
78
  const Body = styled_components_1.default.div `
67
79
  color: var(--card-text-color);
@@ -84,6 +96,26 @@ const Body = styled_components_1.default.div `
84
96
  margin-bottom: 0;
85
97
  }
86
98
  `;
99
+ const Cta = styled_components_1.default.div `
100
+ display: flex;
101
+ gap: var(--card-cta-gap);
102
+ align-items: center;
103
+ margin-top: var(--card-cta-margin-top);
104
+ color: var(--card-cta-text-color);
105
+ font-size: var(--card-cta-font-size);
106
+ justify-content: ${({ $justifyContent }) => $justifyContent};
107
+
108
+ && > * {
109
+ cursor: pointer;
110
+ }
111
+ `;
112
+ const CtaText = styled_components_1.default.span `
113
+ font-weight: var(--card-cta-font-weight);
114
+ `;
115
+ const CtaIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
116
+ width: var(--card-cta-icon-width);
117
+ height: var(--card-cta-icon-height);
118
+ `;
87
119
  const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
88
120
  className: getCardWrapperClass($isCardLink, $variant),
89
121
  })) `
@@ -112,6 +144,13 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
112
144
  height: 100%;
113
145
  object-fit: cover;
114
146
  `}
147
+ }
148
+
149
+ &:hover,
150
+ &:focus-within {
151
+ ${Cta} {
152
+ color: var(--card-link-icon-color);
153
+ }
115
154
  }
116
155
 
117
156
  &.card-link {
@@ -130,8 +169,8 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
130
169
  background-color: var(--card-icon-bg-color-hover);
131
170
  }
132
171
 
133
- svg {
134
- opacity: 1;
172
+ ${CardLinkIcon} {
173
+ color: var(--card-link-icon-color);
135
174
  }
136
175
  }
137
176
  }
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export type CardBadgeProps = React.PropsWithChildren<{
3
+ color?: string;
4
+ icon?: string;
5
+ /** Inline SVG content for the icon */
6
+ iconRawContent?: string;
7
+ className?: string;
8
+ }>;
9
+ export declare function CardBadge({ color, icon, iconRawContent, className, children }: CardBadgeProps): React.JSX.Element;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CardBadge = CardBadge;
7
+ const react_1 = __importDefault(require("react"));
8
+ const styled_components_1 = __importDefault(require("styled-components"));
9
+ const Badge_1 = require("../../../components/Badge/Badge");
10
+ function CardBadge({ color, icon, iconRawContent, className, children }) {
11
+ // `tag-default` keeps a badge grey when the name is absent or unknown.
12
+ const classNames = ['tag-default', color && `tag-${color}`, className].filter(Boolean).join(' ');
13
+ return (react_1.default.createElement(CardBadgeWrapper, { className: classNames, icon: icon, iconRawContent: iconRawContent }, children));
14
+ }
15
+ const CardBadgeWrapper = (0, styled_components_1.default)(Badge_1.Badge) `
16
+ display: flex;
17
+ align-items: center;
18
+ margin: var(--card-badge-margin);
19
+ padding: var(--card-badge-padding);
20
+ border-radius: var(--card-badge-border-radius);
21
+ font-size: var(--card-badge-font-size);
22
+ font-weight: var(--card-badge-font-weight);
23
+ line-height: var(--card-badge-line-height);
24
+ white-space: nowrap;
25
+ flex-shrink: 0;
26
+
27
+ --badge-text-color: var(--tag-color);
28
+ --badge-bg-color: var(--tag-bg-color);
29
+ `;
30
+ //# sourceMappingURL=CardBadge.js.map
@@ -1,15 +1,16 @@
1
1
  import React from 'react';
2
2
  export type CardIconProps = {
3
- variant?: string;
3
+ variant?: 'filled' | 'ghost';
4
4
  src: string;
5
5
  rawContent?: string;
6
6
  position?: 'auto' | 'start' | 'center' | 'end';
7
+ color?: string;
7
8
  };
8
- export declare function CardIcon({ variant, src, rawContent, position }: CardIconProps): React.JSX.Element;
9
+ export declare function CardIcon({ variant, src, rawContent, position, color }: CardIconProps): React.JSX.Element;
9
10
  export declare const CardIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$position" | "$variant"> & {
10
- $variant?: string;
11
+ $variant?: 'filled' | 'ghost';
11
12
  $position?: string;
12
13
  }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$position" | "$variant"> & {
13
- $variant?: string;
14
+ $variant?: 'filled' | 'ghost';
14
15
  $position?: string;
15
16
  }, never>>> & string;
@@ -8,14 +8,17 @@ exports.CardIcon = CardIcon;
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const styled_components_1 = __importDefault(require("styled-components"));
10
10
  const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
11
- function CardIcon({ variant, src, rawContent, position }) {
12
- return (react_1.default.createElement(exports.CardIconWrapper, { $variant: variant, $position: position },
11
+ function CardIcon({ variant, src, rawContent, position, color }) {
12
+ return (react_1.default.createElement(exports.CardIconWrapper, { className: color && `card-icon-color-${color}`, $variant: variant, $position: position },
13
13
  react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
14
14
  }
15
15
  exports.CardIconWrapper = styled_components_1.default.div `
16
+ --card-icon-bg-color-hover: ${({ $variant }) => $variant === 'ghost' && 'transparent'};
16
17
  --icon-width: var(--card-icon-width);
17
18
  --icon-height: var(--card-icon-height);
18
19
  color: var(--card-icon-color);
20
+ /* An inline SVG fills from this. */
21
+ --icon-color: var(--card-icon-color);
19
22
 
20
23
  display: flex;
21
24
  align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -24,7 +27,7 @@ exports.CardIconWrapper = styled_components_1.default.div `
24
27
  min-height: var(--card-icon-height);
25
28
  flex-shrink: 0;
26
29
 
27
- padding: var(--card-icon-padding);
30
+ padding: ${({ $variant }) => ($variant === 'ghost' ? 0 : `var(--card-icon-padding)`)};
28
31
  border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
29
32
  border-radius: var(--card-icon-border-radius);
30
33
  overflow: hidden;
@@ -23,6 +23,38 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
23
23
  --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
24
24
  --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
25
25
  }
26
+
27
+ .card-icon-color-green {
28
+ --card-icon-color: var(--color-green-7);
29
+ }
30
+
31
+ .card-icon-color-grey {
32
+ --card-icon-color: var(--color-warm-grey-8);
33
+ }
34
+
35
+ .card-icon-color-turquoise {
36
+ --card-icon-color: var(--color-turquoise-6);
37
+ }
38
+
39
+ .card-icon-color-magenta {
40
+ --card-icon-color: var(--color-magenta-4);
41
+ }
42
+
43
+ .card-icon-color-carrot {
44
+ --card-icon-color: var(--color-carrot-6);
45
+ }
46
+
47
+ .card-icon-color-grass {
48
+ --card-icon-color: var(--color-grass-7);
49
+ }
50
+
51
+ .card-icon-color-persian-green {
52
+ --card-icon-color: var(--color-persian-green-7);
53
+ }
54
+
55
+ .card-icon-color-sky {
56
+ --card-icon-color: var(--color-sky-6);
57
+ }
26
58
  `;
27
59
  /* eslint-enable theme/no-raw-colors-in-styles */
28
60
  //# sourceMappingURL=variables.dark.js.map
@@ -23,8 +23,8 @@ exports.cards = (0, styled_components_1.css) `
23
23
  --card-border-radius: var(--border-radius-xl);
24
24
  --card-border-style: solid;
25
25
  --card-link-cursor: pointer;
26
- --card-link-icon-width: var(--h3-font-size);
27
- --card-link-icon-height: var(--h3-font-size);
26
+ --card-link-icon-width: 14px;
27
+ --card-link-icon-height: 14px;
28
28
  --card-border-width: 1px;
29
29
  --card-image-border-radius: var(--border-radius-md);
30
30
  --card-image-aspect-ratio: 16 / 9;
@@ -35,12 +35,26 @@ exports.cards = (0, styled_components_1.css) `
35
35
  --card-icon-height: var(--card-icon-size);
36
36
  --card-icon-width: var(--card-icon-size);
37
37
  --card-icon-gap: var(--spacing-base);
38
- --card-title-margin: 0;
38
+ --card-title-margin: 0 var(--spacing-xs) 0 0;
39
39
  --card-title-font-weight: var(--font-weight-semibold);
40
+ --card-title-row-gap: var(--spacing-xxs);
40
41
  --card-content-gap: 4px;
41
42
  --card-padding: 16px 20px;
42
43
  --card-body-font-size: var(--font-size-base);
43
44
  --card-body-line-height: var(--line-height-base);
45
+ --card-cta-margin-top: var(--spacing-base);
46
+ --card-cta-gap: var(--spacing-xxs);
47
+ --card-cta-font-size: var(--font-size-base);
48
+ --card-cta-font-weight: var(--font-weight-regular);
49
+ --card-cta-text-color: var(--text-color-secondary);
50
+ --card-cta-icon-width: 14px;
51
+ --card-cta-icon-height: 14px;
52
+ --card-badge-margin: 0 var(--spacing-xxs) 0 0 ;
53
+ --card-badge-padding: 0 var(--spacing-xxs);
54
+ --card-badge-border-radius: var(--border-radius);
55
+ --card-badge-font-size: var(--font-size-sm);
56
+ --card-badge-font-weight: var(--font-weight-regular);
57
+ --card-badge-line-height: var(--line-height-sm);
44
58
 
45
59
  /**
46
60
  * @tokens Card variants
@@ -84,6 +98,64 @@ exports.cards = (0, styled_components_1.css) `
84
98
  --card-hover-transition: initial;
85
99
  }
86
100
 
101
+ /**
102
+ * @tokens Card icon colors
103
+ */
104
+ .card-icon-color-red {
105
+ --card-icon-color: var(--color-red-7);
106
+ }
107
+
108
+ .card-icon-color-green {
109
+ --card-icon-color: var(--color-green-8);
110
+ }
111
+
112
+ .card-icon-color-blue {
113
+ --card-icon-color: var(--color-blue-7);
114
+ }
115
+
116
+ .card-icon-color-grey {
117
+ --card-icon-color: var(--text-color-secondary);
118
+ }
119
+
120
+ .card-icon-color-turquoise {
121
+ --card-icon-color: var(--color-turquoise-8);
122
+ }
123
+
124
+ .card-icon-color-magenta {
125
+ --card-icon-color: var(--color-magenta-7);
126
+ }
127
+
128
+ .card-icon-color-purple {
129
+ --card-icon-color: var(--color-purple-7);
130
+ }
131
+
132
+ .card-icon-color-carrot {
133
+ --card-icon-color: var(--color-carrot-8);
134
+ }
135
+
136
+ .card-icon-color-raspberry {
137
+ --card-icon-color: var(--color-raspberry-7);
138
+ }
139
+
140
+ .card-icon-color-orange {
141
+ --card-icon-color: var(--color-orange-7);
142
+ }
143
+
144
+ .card-icon-color-grass {
145
+ --card-icon-color: var(--color-grass-8);
146
+ }
147
+
148
+ .card-icon-color-persian-green {
149
+ --card-icon-color: var(--color-persian-green-8);
150
+ }
151
+
152
+ .card-icon-color-sky {
153
+ --card-icon-color: var(--color-sky-8);
154
+ }
155
+
156
+ .card-icon-color-blueberry {
157
+ --card-icon-color: var(--color-blueberry-7);
158
+ }
87
159
  `;
88
- /* eslint-enable theme/no-raw-colors-in-styles */
160
+ /* eslint-enable theme/no-raw-colors-in-styles */
89
161
  //# sourceMappingURL=variables.js.map
@@ -52,7 +52,21 @@ exports.card = {
52
52
  type: String,
53
53
  matches: ['filled', 'ghost'],
54
54
  },
55
+ iconColor: { type: String },
55
56
  to: { type: String, resolver: 'link' },
57
+ linkIcon: {
58
+ type: String,
59
+ matches: ['arrow', 'chevron'],
60
+ },
61
+ cta: { type: String },
62
+ badge: { type: String },
63
+ badgeColor: { type: String },
64
+ badgeIcon: { type: String, resolver: 'relativeOrCdnIcon' },
65
+ badgeIconRawContent: {
66
+ // internal use only
67
+ type: String,
68
+ render: true,
69
+ },
56
70
  },
57
71
  },
58
72
  tagName: 'card',