@redocly/theme 0.59.0-next.4 → 0.59.0-rc.2

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 (75) hide show
  1. package/LICENSE +1 -7
  2. package/lib/components/Buttons/AIAssistantButton.js +1 -5
  3. package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js +1 -1
  4. package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js +1 -1
  5. package/lib/components/Catalog/CatalogTagsWithTooltip.js +1 -1
  6. package/lib/components/Dropdown/Dropdown.d.ts +2 -16
  7. package/lib/components/Dropdown/Dropdown.js +5 -5
  8. package/lib/components/Menu/MenuItem.js +1 -1
  9. package/lib/components/Navbar/NavbarItem.js +3 -3
  10. package/lib/components/OpenApiDocs/hooks/AdditionalOverviewInfo.d.ts +1 -0
  11. package/lib/components/OpenApiDocs/hooks/AdditionalOverviewInfo.js +11 -0
  12. package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.d.ts +1 -0
  13. package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.js +5 -0
  14. package/lib/components/Search/FilterFields/SearchFilterFieldTags.js +2 -1
  15. package/lib/components/Search/SearchAiConversationInput.d.ts +1 -2
  16. package/lib/components/Search/SearchAiConversationInput.js +3 -11
  17. package/lib/components/Search/SearchDialog.js +3 -15
  18. package/lib/components/Search/SearchGroups.js +2 -2
  19. package/lib/components/Search/variables.js +1 -5
  20. package/lib/components/Select/SelectInput.js +1 -1
  21. package/lib/components/Select/variables.js +2 -2
  22. package/lib/components/Tag/Tag.d.ts +1 -2
  23. package/lib/components/Tag/Tag.js +17 -66
  24. package/lib/components/Tag/variables.dark.js +36 -135
  25. package/lib/components/Tag/variables.js +61 -78
  26. package/lib/core/constants/search.d.ts +4 -5
  27. package/lib/core/constants/search.js +5 -4
  28. package/lib/core/hooks/use-page-actions.d.ts +1 -1
  29. package/lib/core/hooks/use-page-actions.js +24 -1
  30. package/lib/core/hooks/use-tabs.d.ts +2 -3
  31. package/lib/core/hooks/use-tabs.js +57 -115
  32. package/lib/core/hooks/use-telemetry-fallback.d.ts +0 -1
  33. package/lib/core/hooks/use-telemetry-fallback.js +0 -1
  34. package/lib/core/types/hooks.d.ts +2 -2
  35. package/lib/ext/process-scorecard.d.ts +5 -0
  36. package/lib/ext/process-scorecard.js +11 -0
  37. package/lib/icons/AiStarsIcon/AiStarsIcon.js +2 -11
  38. package/lib/icons/RedoclyIcon/RedoclyIcon.js +7 -4
  39. package/lib/index.d.ts +2 -0
  40. package/lib/index.js +2 -0
  41. package/lib/markdoc/components/Tabs/TabList.d.ts +1 -3
  42. package/lib/markdoc/components/Tabs/TabList.js +47 -197
  43. package/lib/markdoc/components/Tabs/Tabs.d.ts +1 -2
  44. package/lib/markdoc/components/Tabs/Tabs.js +12 -57
  45. package/package.json +5 -5
  46. package/src/components/Buttons/AIAssistantButton.tsx +1 -5
  47. package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx +1 -1
  48. package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx +1 -1
  49. package/src/components/Catalog/CatalogTagsWithTooltip.tsx +5 -1
  50. package/src/components/Dropdown/Dropdown.tsx +79 -84
  51. package/src/components/Menu/MenuItem.tsx +0 -1
  52. package/src/components/Navbar/NavbarItem.tsx +5 -6
  53. package/src/components/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx +9 -0
  54. package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx +1 -0
  55. package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx +3 -3
  56. package/src/components/Search/SearchAiConversationInput.tsx +2 -12
  57. package/src/components/Search/SearchDialog.tsx +3 -15
  58. package/src/components/Search/SearchGroups.tsx +0 -2
  59. package/src/components/Search/variables.ts +1 -5
  60. package/src/components/Select/SelectInput.tsx +0 -1
  61. package/src/components/Select/variables.ts +2 -2
  62. package/src/components/Tag/Tag.tsx +19 -35
  63. package/src/components/Tag/variables.dark.ts +36 -135
  64. package/src/components/Tag/variables.ts +61 -78
  65. package/src/core/constants/search.ts +4 -8
  66. package/src/core/hooks/use-page-actions.ts +33 -2
  67. package/src/core/hooks/use-tabs.ts +86 -168
  68. package/src/core/hooks/use-telemetry-fallback.ts +0 -1
  69. package/src/core/types/hooks.ts +1 -5
  70. package/src/ext/process-scorecard.ts +13 -0
  71. package/src/icons/AiStarsIcon/AiStarsIcon.tsx +2 -11
  72. package/src/icons/RedoclyIcon/RedoclyIcon.tsx +22 -4
  73. package/src/index.ts +2 -0
  74. package/src/markdoc/components/Tabs/TabList.tsx +105 -312
  75. package/src/markdoc/components/Tabs/Tabs.tsx +11 -136
@@ -3,11 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.tagDarkMode = void 0;
4
4
  const styled_components_1 = require("styled-components");
5
5
  exports.tagDarkMode = (0, styled_components_1.css) `
6
- --tag-close-button-bg-color-focus: var(--color-warm-grey-6); // @presenter Color
7
-
8
6
  --tag-border-color-focused: var(--color-blue-8); // @presenter Color
9
7
  --tag-badge-border-color: var(--border-color-secondary);
10
8
 
9
+ --tag-operation-color-delete: #fa82a2; // @presenter Color
10
+ --tag-operation-bg-color-delete: #77214C; // @presenter Color
11
+
12
+ --tag-operation-color-get: #68cc97; // @presenter Color
13
+ --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
14
+
15
+ --tag-operation-color-post: #90b0f0; // @presenter Color
16
+ --tag-operation-bg-color-post: #233061; // @presenter Color
17
+
18
+ --tag-operation-color-put: #e0a663; // @presenter Color
19
+ --tag-operation-bg-color-put: #612729; // @presenter Color
20
+
21
+ --tag-operation-color-patch: #e0c363; // @presenter Color
22
+ --tag-operation-bg-color-patch: #5C3721; // @presenter Color
23
+
24
+ --tag-operation-color-head: #e6e1fe; // @presenter Color
25
+ --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
26
+
27
+ --tag-operation-color-options: #1a1c21; // @presenter Color
28
+ --tag-operation-bg-color-options: #2a2b33; // @presenter Color
29
+
30
+ --tag-action-color-receive: #88CF82; // @presenter Color
31
+ --tag-action-color-sub: #88CF82; // @presenter Color
32
+ --tag-action-color-cons: #88CF82; // @presenter Color
33
+
34
+ --tag-action-color-send: #7779F8; // @presenter Color
35
+ --tag-action-color-pub: #7779F8; // @presenter Color
36
+ --tag-action-color-publish: #7779F8; // @presenter Color
37
+
38
+ --tag-action-color-channel: #F5AD5B; // @presenter Color
39
+ --tag-action-color-topic: #F5AD5B; // @presenter Color
40
+ --tag-action-color-queue: #F7A7CF; // @presenter Color
41
+ --tag-action-color-exchange: #C79CF2; // @presenter Color
42
+
11
43
  .tag-grey,
12
44
  .tag-draft,
13
45
  .tag-schema,
@@ -15,7 +47,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
15
47
  --tag-color: var(--color-warm-grey-8); // @presenter Color
16
48
  --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
17
49
  --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
18
- --tag-close-button-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
19
50
  }
20
51
 
21
52
  .tag-red {
@@ -23,7 +54,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
23
54
  --tag-bg-color: var(--color-red-1); // @presenter Color
24
55
  --tag-border-color: var(--color-red-8); // @presenter Color
25
56
  --tag-border-color-hover: var(--color-red-6); // @presenter Color
26
- --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
27
57
  }
28
58
 
29
59
  .tag-green {
@@ -32,7 +62,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
32
62
  --tag-border-color: var(--color-green-3); // @presenter Color
33
63
  --tag-border-color-hover: var(--color-green-5); // @presenter Color
34
64
  --tag-bg-color-hover: var(--color-green-2); // @presenter Color
35
- --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
36
65
  }
37
66
 
38
67
  .tag-blue {
@@ -40,7 +69,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
40
69
  --tag-bg-color: var(--color-blue-1); // @presenter Color
41
70
  --tag-border-color-hover: var(--color-blue-5); // @presenter Color
42
71
  --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
43
- --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
44
72
  }
45
73
 
46
74
  .tag-magenta,
@@ -48,15 +76,14 @@ exports.tagDarkMode = (0, styled_components_1.css) `
48
76
  --tag-color: var(--color-magenta-4); // @presenter Color
49
77
  --tag-bg-color: var(--color-magenta-1); // @presenter Color
50
78
  --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
51
- --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
52
79
  }
53
80
 
54
- .tag-purple {
81
+ .tag-purple,
82
+ .tag-head {
55
83
  --tag-color: var(--color-purple-7); // @presenter Color
56
84
  --tag-bg-color: var(--color-purple-1); // @presenter Color
57
85
  --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
58
86
  --tag-border-color-hover: var(--color-purple-5); // @presenter Color
59
- --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
60
87
  }
61
88
 
62
89
  .tag-carrot {
@@ -64,14 +91,12 @@ exports.tagDarkMode = (0, styled_components_1.css) `
64
91
  --tag-bg-color: var(--color-carrot-1); // @presenter Color
65
92
  --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
66
93
  --tag-border-color: var(--color-carrot-4); // @presenter Color
67
- --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
68
94
  }
69
95
 
70
96
  .tag-raspberry {
71
97
  --tag-color: var(--color-raspberry-7); // @presenter Color
72
98
  --tag-bg-color: var(--color-raspberry-1); // @presenter Color
73
99
  --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
74
- --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
75
100
  }
76
101
 
77
102
  .tag-orange {
@@ -80,7 +105,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
80
105
  --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
81
106
  --tag-border-color: var(--color-orange-3); // @presenter Color
82
107
  --tag-border-color-hover: var(--color-orange-5); // @presenter Color
83
- --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
84
108
  }
85
109
 
86
110
  .tag-grass {
@@ -89,7 +113,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
89
113
  --tag-color: var(--color-grass-7); // @presenter Color
90
114
  --tag-border-color: var(--color-grass-3); // @presenter Color
91
115
  --tag-border-color-hover: var(--color-grass-5); // @presenter Color
92
- --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
93
116
  }
94
117
 
95
118
  .tag-persian-green {
@@ -98,7 +121,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
98
121
  --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
99
122
  --tag-border-color: var(--color-persian-green-3); // @presenter Color
100
123
  --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
101
- --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
102
124
  }
103
125
 
104
126
  .tag-turquoise,
@@ -107,7 +129,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
107
129
  --tag-bg-color: var(--color-turquoise-1); // @presenter Color
108
130
  --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
109
131
  --tag-border-color: var(--color-turquoise-4); // @presenter Color
110
- --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
111
132
  }
112
133
 
113
134
  .tag-sky {
@@ -115,7 +136,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
115
136
  --tag-bg-color: var(--color-sky-1); // @presenter Color
116
137
  --tag-border-color: var(--color-sky-4); // @presenter Color
117
138
  --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
118
- --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
119
139
  }
120
140
 
121
141
  .tag-blueberry {
@@ -123,7 +143,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
123
143
  --tag-bg-color: var(--color-blueberry-1); // @presenter Color
124
144
  --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
125
145
  --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
126
- --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
127
146
  }
128
147
 
129
148
  .tag-warning,
@@ -131,7 +150,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
131
150
  --tag-color: var(--color-warning-active); // @presenter Color
132
151
  --tag-bg-color: var(--color-warning-bg); // @presenter Color
133
152
  --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
134
- --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
135
153
  }
136
154
 
137
155
  .tag-processing,
@@ -139,7 +157,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
139
157
  --tag-color: var(--color-info-active); // @presenter Color
140
158
  --tag-bg-color: var(--color-info-bg); // @presenter Color
141
159
  --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
142
- --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
143
160
  }
144
161
 
145
162
  .tag-error,
@@ -147,7 +164,6 @@ exports.tagDarkMode = (0, styled_components_1.css) `
147
164
  --tag-color: var(--color-error-active); // @presenter Color
148
165
  --tag-bg-color: var(--color-error-bg); // @presenter Color
149
166
  --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
150
- --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
151
167
  }
152
168
 
153
169
  .tag-success,
@@ -155,127 +171,12 @@ exports.tagDarkMode = (0, styled_components_1.css) `
155
171
  --tag-color: var(--color-success-active); // @presenter Color
156
172
  --tag-bg-color: var(--color-success-bg); // @presenter Color
157
173
  --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
158
- --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
159
174
  }
160
175
 
161
176
  .tag-link {
162
177
  --tag-color: var(--color-info-active); // @presenter Color
163
178
  --tag-bg-color: var(--color-info-bg); // @presenter Color
164
179
  --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
165
- --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
166
- }
167
-
168
- .tag-delete {
169
- --tag-color: #fa82a2; // @presenter Color
170
- --tag-bg-color: #47252E; // @presenter Color
171
- --tag-bg-color-hover: #653441; // @presenter Color
172
- }
173
-
174
- .tag-get {
175
- --tag-color: #68cc97; // @presenter Color
176
- --tag-bg-color: #1F3D2D; // @presenter Color
177
- --tag-bg-color-hover: #34654B; // @presenter Color
178
- }
179
-
180
- .tag-post {
181
- --tag-color: #90b0f0; // @presenter Color
182
- --tag-bg-color: #2B3447; // @presenter Color
183
- --tag-bg-color-hover: #3A465F; // @presenter Color
184
- }
185
-
186
- .tag-put {
187
- --tag-color: #e0a663; // @presenter Color
188
- --tag-bg-color: #3D2D1B; // @presenter Color
189
- --tag-bg-color-hover: #674C2D; // @presenter Color
190
- }
191
-
192
- .tag-patch {
193
- --tag-color: #e0c363; // @presenter Color
194
- --tag-bg-color: #3D351B; // @presenter Color
195
- --tag-bg-color-hover: #67592D; // @presenter Color
196
- }
197
-
198
- .tag-head {
199
- --tag-color: var(--color-purple-7); // @presenter Color
200
- --tag-bg-color: #312B5A; // @presenter Color
201
- --tag-bg-color-hover: #413875; // @presenter Color
202
- }
203
-
204
- .tag-channel {
205
- --tag-color: #F5AD5B; // @presenter Color
206
- --tag-bg-color: #4A3721; // @presenter Color
207
- --tag-bg-color-hover: #64492B; // @presenter Color
208
- }
209
-
210
- .tag-topic {
211
- --tag-color: #F5AD5B; // @presenter Color
212
- --tag-bg-color: #4A3721; // @presenter Color
213
- --tag-bg-color-hover: #64492B; // @presenter Color
214
- }
215
-
216
- .tag-send {
217
- --tag-color: #7779F8; // @presenter Color
218
- --tag-bg-color: #272754; // @presenter Color
219
- --tag-bg-color-hover: #373776; // @presenter Color
220
- }
221
-
222
- .tag-pub {
223
- --tag-color: #7779F8; // @presenter Color
224
- --tag-bg-color: #272754; // @presenter Color
225
- --tag-bg-color-hover: #373776; // @presenter Color
226
- }
227
-
228
- .tag-publish {
229
- --tag-color: #7779F8; // @presenter Color
230
- --tag-bg-color: #272754; // @presenter Color
231
- --tag-bg-color-hover: #373776; // @presenter Color
232
- }
233
-
234
- .tag-receive {
235
- --tag-color: #88CF82; // @presenter Color
236
- --tag-bg-color: #23421F; // @presenter Color
237
- --tag-bg-color-hover: #305A2A; // @presenter Color
238
- }
239
-
240
- .tag-sub {
241
- --tag-color: #88CF82; // @presenter Color
242
- --tag-bg-color: #23421F; // @presenter Color
243
- --tag-bg-color-hover: #305A2A; // @presenter Color
244
- }
245
-
246
- .tag-cons {
247
- --tag-color: #88CF82; // @presenter Color
248
- --tag-bg-color: #23421F; // @presenter Color
249
- --tag-bg-color-hover: #305A2A; // @presenter Color
250
- }
251
-
252
- .tag-exchange {
253
- --tag-color: #C79CF2; // @presenter Color
254
- --tag-bg-color: #472669; // @presenter Color
255
- --tag-bg-color-hover: #5C3187; // @presenter Color
256
- }
257
-
258
- // shorten alias for exchange tag:
259
- .tag-exch {
260
- --tag-color: #C79CF2; // @presenter Color
261
- --tag-bg-color: #472669; // @presenter Color
262
- --tag-bg-color-hover: #5C3187; // @presenter Color
263
- }
264
-
265
- .tag-queue {
266
- --tag-color: #F7A7CF; // @presenter Color
267
- --tag-bg-color: #622242; // @presenter Color
268
- --tag-bg-color-hover: #882F5C; // @presenter Color
269
- }
270
-
271
- .tag-variant-filled {
272
- --tag-border-color: transparent;
273
- --tag-border-color-hover: transparent;
274
- }
275
-
276
- .tag-variant-outline {
277
- --tag-bg-color: transparent;
278
- --tag-bg-color-hover: transparent;
279
180
  }
280
181
  `;
281
182
  //# sourceMappingURL=variables.dark.js.map
@@ -18,7 +18,6 @@ exports.tag = (0, styled_components_1.css) `
18
18
  --tag-badge-border-width: 2px;
19
19
  --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
20
20
  --tag-border-color-focused: var(--color-blue-4); // @presenter Color
21
- --tag-close-button-bg-color-focus: var(--color-warm-grey-4); // @presenter Color
22
21
 
23
22
  /**
24
23
  * @tokens Tag spacing
@@ -65,7 +64,6 @@ exports.tag = (0, styled_components_1.css) `
65
64
  --tag-icon-width: 14px; // @presenter Spacing
66
65
  --tag-icon-height: 14px; // @presenter Spacing
67
66
 
68
-
69
67
  /**
70
68
  * @tokens Tag colors
71
69
  */
@@ -161,7 +159,8 @@ exports.tag = (0, styled_components_1.css) `
161
159
  --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
162
160
  }
163
161
 
164
- .tag-purple {
162
+ .tag-purple,
163
+ .tag-head {
165
164
  --tag-color: var(--color-purple-7); // @presenter Color
166
165
  --tag-bg-color: var(--color-purple-1); // @presenter Color
167
166
  --tag-border-color: var(--color-purple-4); // @presenter Color
@@ -272,125 +271,109 @@ exports.tag = (0, styled_components_1.css) `
272
271
  * @tokens Operation tag colors
273
272
  */
274
273
 
275
- .tag-head {
276
- --tag-color: #6355CA; // @presenter Color
277
- --tag-bg-color: #ECEBFA; // @presenter Color
278
- --tag-bg-color-hover: #E0DEF7; // @presenter Color
279
- }
274
+ --tag-operation-color-delete: #e70b46; // @presenter Color
275
+ --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
276
+
277
+ --tag-operation-color-get: #25b869; // @presenter Color
278
+ --tag-operation-bg-color-get: #e5faef; // @presenter Color
279
+
280
+ --tag-operation-color-post: #1e65f5; // @presenter Color
281
+ --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
282
+
283
+ --tag-operation-color-put: #f5901d; // @presenter Color
284
+ --tag-operation-bg-color-put: #fef1e2; // @presenter Color
285
+
286
+ --tag-operation-color-patch: #f5c31d; // @presenter Color
287
+ --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
288
+
289
+ --tag-operation-color-head: #5b4ccc; // @presenter Color
290
+ --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
291
+
292
+ --tag-operation-color-options: #1a1c21; // @presenter Color
293
+ --tag-operation-bg-color-options: #ededf2; // @presenter Color
294
+
295
+ --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
296
+
297
+ --tag-action-color-receive: #4db144; // @presenter Color
298
+ --tag-action-color-sub: #4db144; // @presenter Color
299
+ --tag-action-color-cons: #4db144; // @presenter Color
300
+
301
+ --tag-action-color-send: #4144f6; // @presenter Color
302
+ --tag-action-color-pub: #4144f6; // @presenter Color
303
+ --tag-action-color-publish: #4144f6; // @presenter Color
304
+
305
+ --tag-action-color-channel: #F0870E; // @presenter Color
306
+ --tag-action-color-topic: #F0870E; // @presenter Color
307
+ --tag-action-color-queue: #D72E81; // @presenter Color
308
+ --tag-action-color-exchange: #9B51E0; // @presenter Color
280
309
 
281
310
  .tag-delete {
282
- --tag-color: #e70b46; // @presenter Color
283
- --tag-bg-color: #fee2e9; // @presenter Color
284
- --tag-bg-color-hover: #fdd3dd; // @presenter Color
311
+ --tag-color: var(--tag-operation-color-delete); // @presenter Color
285
312
  }
286
313
 
287
314
  .tag-get {
288
- --tag-color: #25b869; // @presenter Color
289
- --tag-bg-color: #e5faef; // @presenter Color
290
- --tag-bg-color-hover: #D4F7E5; // @presenter Color
315
+ --tag-color: var(--tag-operation-color-get); // @presenter Color
291
316
  }
292
317
 
293
318
  .tag-post {
294
- --tag-color: #1e65f5; // @presenter Color
295
- --tag-bg-color: #e2ebfe; // @presenter Color
296
- --tag-bg-color-hover: #CEDDFD; // @presenter Color
319
+ --tag-color: var(--tag-operation-color-post); // @presenter Color
297
320
  }
298
321
 
299
322
  .tag-put {
300
- --tag-color: #f5901d; // @presenter Color
301
- --tag-bg-color: #fef1e2; // @presenter Color
302
- --tag-bg-color-hover: #FDE2C4; // @presenter Color
323
+ --tag-color: var(--tag-operation-color-put); // @presenter Color
303
324
  }
304
-
325
+
305
326
  .tag-patch {
306
- --tag-color: #f5c31d; // @presenter Color
307
- --tag-bg-color: #fdf6dd; // @presenter Color
308
- --tag-bg-color-hover: #FCF0C5; // @presenter Color
327
+ --tag-color: var(--tag-operation-color-patch); // @presenter Color
309
328
  }
310
329
 
311
330
  .tag-http-deprecated {
312
- --tag-color: var(--text-color-disabled); // @presenter Color
331
+ --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
332
+ }
333
+
334
+ .tag-receive {
335
+ --tag-color: var(--tag-action-color-receive); // @presenter Color
313
336
  }
314
337
 
315
338
  .tag-send {
316
- --tag-color: #4144F6; // @presenter Color
317
- --tag-bg-color: #ECECFE; // @presenter Color
318
- --tag-bg-color-hover: #CFCFFC; // @presenter Color
339
+ --tag-color: var(--tag-action-color-send); // @presenter Color
319
340
  }
320
341
 
321
342
  .tag-pub {
322
- --tag-color: #4144F6; // @presenter Color
323
- --tag-bg-color: #ECECFE; // @presenter Color
324
- --tag-bg-color-hover: #CFCFFC; // @presenter Color
325
- }
326
-
327
- .tag-publish {
328
- --tag-color: #4144F6; // @presenter Color
329
- --tag-bg-color: #ECECFE; // @presenter Color
330
- --tag-bg-color-hover: #CFCFFC; // @presenter Color
331
- }
332
-
333
- .tag-receive {
334
- --tag-color: #4db144; // @presenter Color
335
- --tag-bg-color: #E5FDE2; // @presenter Color
336
- --tag-bg-color-hover: #D4FCCF; // @presenter Color
343
+ --tag-color: var(--tag-action-color-pub); // @presenter Color
337
344
  }
338
345
 
339
346
  .tag-sub {
340
- --tag-color: #4db144; // @presenter Color
341
- --tag-bg-color: #E5FDE2; // @presenter Color
342
- --tag-bg-color-hover: #D4FCCF; // @presenter Color
347
+ --tag-color: var(--tag-action-color-sub); // @presenter Color
343
348
  }
344
349
 
345
350
  .tag-cons {
346
- --tag-color: #4db144; // @presenter Color
347
- --tag-bg-color: #E5FDE2; // @presenter Color
348
- --tag-bg-color-hover: #D4FCCF; // @presenter Color
351
+ --tag-color: var(--tag-action-color-cons); // @presenter Color
352
+ }
353
+
354
+ .tag-publish {
355
+ --tag-color: var(--tag-action-color-publish); // @presenter Color
349
356
  }
350
357
 
351
358
  .tag-channel {
352
- --tag-color: #F0870E; // @presenter Color
353
- --tag-bg-color: #FDF1E2; // @presenter Color
354
- --tag-bg-color-hover: #FBE1C1; // @presenter Color
359
+ --tag-color: var(--tag-action-color-channel); // @presenter Color
355
360
  }
356
361
 
357
362
  .tag-topic {
358
- --tag-color: #F0870E; // @presenter Color
359
- --tag-bg-color: #FDF1E2; // @presenter Color
360
- --tag-bg-color-hover: #FBE1C1; // @presenter Color
363
+ --tag-color: var(--tag-action-color-channel); // @presenter Color
361
364
  }
362
365
 
363
366
  .tag-queue {
364
- --tag-color: #D72E81; // @presenter Color
365
- --tag-bg-color: #FAE5F0; // @presenter Color
366
- --tag-bg-color-hover: #F7D4E6; // @presenter Color
367
+ --tag-color: var(--tag-action-color-queue); // @presenter Color
367
368
  }
368
369
 
369
370
  .tag-exchange {
370
- --tag-color: #9B51E0; // @presenter Color
371
- --tag-bg-color: #F0E5FA; // @presenter Color
372
- --tag-bg-color-hover: #E6D4F7; // @presenter Color
371
+ --tag-color: var(--tag-action-color-exchange); // @presenter Color
373
372
  }
374
373
 
375
374
  // shorten alias for exchange tag:
376
375
  .tag-exch {
377
- --tag-color: #9B51E0; // @presenter Color
378
- --tag-bg-color: #F0E5FA; // @presenter Color
379
- --tag-bg-color-hover: #E6D4F7; // @presenter Color
380
- }
381
-
382
- /**
383
- * @tokens Tag variants
384
- */
385
-
386
- .tag-variant-filled {
387
- --tag-border-color: transparent;
388
- --tag-border-color-hover: transparent;
389
- }
390
-
391
- .tag-variant-outline {
392
- --tag-bg-color: transparent;
393
- --tag-bg-color-hover: transparent;
376
+ --tag-color: var(--tag-action-color-exchange); // @presenter Color
394
377
  }
395
378
 
396
379
  // @tokens End
@@ -6,11 +6,10 @@ export declare enum AiSearchError {
6
6
  EmptyResponse = "empty_response",
7
7
  ErrorProcessingResponse = "error_processing_response"
8
8
  }
9
- export declare const AiSearchConversationRole: {
10
- readonly USER: "user";
11
- readonly ASSISTANT: "assistant";
12
- };
13
- export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
9
+ export declare const enum AiSearchConversationRole {
10
+ USER = "user",
11
+ ASSISTANT = "assistant"
12
+ }
14
13
  export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
15
14
  export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
16
15
  export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
@@ -9,10 +9,11 @@ var AiSearchError;
9
9
  AiSearchError["EmptyResponse"] = "empty_response";
10
10
  AiSearchError["ErrorProcessingResponse"] = "error_processing_response";
11
11
  })(AiSearchError || (exports.AiSearchError = AiSearchError = {}));
12
- exports.AiSearchConversationRole = {
13
- USER: 'user',
14
- ASSISTANT: 'assistant',
15
- };
12
+ var AiSearchConversationRole;
13
+ (function (AiSearchConversationRole) {
14
+ AiSearchConversationRole["USER"] = "user";
15
+ AiSearchConversationRole["ASSISTANT"] = "assistant";
16
+ })(AiSearchConversationRole || (exports.AiSearchConversationRole = AiSearchConversationRole = {}));
16
17
  const defaultErrorConfig = {
17
18
  headerKey: 'search.ai.error.header',
18
19
  headerDefault: 'Oops! Something went wrong.',
@@ -1,3 +1,3 @@
1
1
  import type { PageAction } from '../types';
2
- export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
2
+ export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor' | 'mcp-claude' | 'mcp-json';
3
3
  export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];
@@ -33,7 +33,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
33
33
  const { isPublic } = usePageData() || {};
34
34
  const result = (0, react_1.useMemo)(() => {
35
35
  var _a, _b;
36
- if (shouldHideAllActions) {
36
+ if (shouldHideAllActions && !(actions === null || actions === void 0 ? void 0 : actions.length)) {
37
37
  return [];
38
38
  }
39
39
  const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
@@ -80,6 +80,29 @@ function usePageActions(pageSlug, mcpUrl, actions) {
80
80
  }
81
81
  },
82
82
  };
83
+ case 'mcp-claude':
84
+ if (!mcpUrl) {
85
+ return null;
86
+ }
87
+ return {
88
+ buttonText: 'Copy Claude configuration',
89
+ title: 'Copy Claude configuration',
90
+ description: 'Copy MCP configuration for Claude',
91
+ iconComponent: ClaudeIcon_1.ClaudeIcon,
92
+ onClick: () => __awaiter(this, void 0, void 0, function* () {
93
+ clipboard_service_1.ClipboardService.copyCustom(`claude mcp add --transport http server ${mcpUrl}`);
94
+ }),
95
+ };
96
+ case 'mcp-json':
97
+ return {
98
+ buttonText: 'Copy MCP configuration',
99
+ title: 'Copy MCP JSON configuration',
100
+ description: 'Copy MCP JSON configuration',
101
+ iconComponent: CopyIcon_1.CopyIcon,
102
+ onClick: () => __awaiter(this, void 0, void 0, function* () {
103
+ clipboard_service_1.ClipboardService.copyCustom(generateMCPConfig());
104
+ }),
105
+ };
83
106
  case 'copy':
84
107
  return {
85
108
  buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -4,19 +4,18 @@ type UseTabsProps = {
4
4
  totalTabs: number;
5
5
  containerRef?: React.RefObject<HTMLElement | null>;
6
6
  };
7
- type UseTabsReturn = {
7
+ export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
8
8
  setTabRef: (element: HTMLButtonElement | null, index: number) => void;
9
9
  onTabClick: (labelOrIndex: string | number) => void;
10
10
  handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
11
11
  visibleTabs: number[];
12
12
  overflowTabs: number[];
13
- isReady: boolean;
13
+ allTabsHidden: boolean;
14
14
  };
15
15
  type UseActiveTabProps = {
16
16
  initialTab: string;
17
17
  tabsId?: string;
18
18
  };
19
- export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }: UseTabsProps): UseTabsReturn;
20
19
  export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
21
20
  activeTab: string;
22
21
  setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;