@nextclaw/ui 0.3.16 → 0.4.0
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.
- package/CHANGELOG.md +19 -0
- package/dist/assets/index-D16PLMLv.js +337 -0
- package/dist/assets/index-Wn63frSd.css +1 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/App.tsx +2 -0
- package/src/api/marketplace.ts +110 -0
- package/src/api/types.ts +85 -0
- package/src/components/config/ChannelsList.tsx +2 -2
- package/src/components/config/ModelConfig.tsx +2 -2
- package/src/components/config/ProvidersList.tsx +3 -3
- package/src/components/config/SessionsConfig.tsx +93 -81
- package/src/components/doc-browser/DocBrowser.tsx +283 -0
- package/src/components/doc-browser/DocBrowserContext.tsx +134 -0
- package/src/components/doc-browser/index.ts +3 -0
- package/src/components/doc-browser/useDocLinkInterceptor.ts +33 -0
- package/src/components/layout/AppLayout.tsx +25 -8
- package/src/components/layout/Sidebar.tsx +32 -5
- package/src/components/marketplace/MarketplacePage.tsx +408 -0
- package/src/hooks/useMarketplace.ts +59 -0
- package/src/index.css +11 -4
- package/src/lib/i18n.ts +10 -1
- package/src/styles/design-system.css +256 -214
- package/dist/assets/index-DuW0OWcM.js +0 -298
- package/dist/assets/index-xwCviEXg.css +0 -1
|
@@ -5,244 +5,286 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
@layer base {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
:root {
|
|
9
|
+
/* ========================================
|
|
10
10
|
BRAND COLORS
|
|
11
11
|
======================================== */
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
12
|
+
--brand-50: 217 100% 97%;
|
|
13
|
+
--brand-100: 217 100% 94%;
|
|
14
|
+
--brand-200: 217 95% 87%;
|
|
15
|
+
--brand-300: 217 90% 77%;
|
|
16
|
+
--brand-400: 217 85% 65%;
|
|
17
|
+
--brand-500: 217 80% 55%;
|
|
18
|
+
--brand-600: 217 75% 48%;
|
|
19
|
+
--brand-700: 217 70% 40%;
|
|
20
|
+
--brand-800: 217 65% 33%;
|
|
21
|
+
--brand-900: 217 60% 25%;
|
|
22
|
+
|
|
23
|
+
/* ========================================
|
|
24
24
|
NEUTRAL COLORS (Gray Scale)
|
|
25
25
|
======================================== */
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
26
|
+
--gray-50: 210 20% 98%;
|
|
27
|
+
--gray-100: 220 14% 96%;
|
|
28
|
+
--gray-200: 220 13% 91%;
|
|
29
|
+
--gray-300: 216 12% 84%;
|
|
30
|
+
--gray-400: 218 11% 65%;
|
|
31
|
+
--gray-500: 220 9% 46%;
|
|
32
|
+
--gray-600: 215 14% 34%;
|
|
33
|
+
--gray-700: 217 19% 27%;
|
|
34
|
+
--gray-800: 215 28% 17%;
|
|
35
|
+
--gray-900: 221 39% 11%;
|
|
36
|
+
|
|
37
|
+
/* ========================================
|
|
38
38
|
SEMANTIC COLORS
|
|
39
39
|
======================================== */
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
40
|
+
/* Background */
|
|
41
|
+
--background: 210 20% 98%;
|
|
42
|
+
--background-secondary: 220 14% 96%;
|
|
43
|
+
--background-tertiary: 220 13% 91%;
|
|
44
|
+
|
|
45
|
+
/* Foreground (Text) */
|
|
46
|
+
--foreground: 221 39% 11%;
|
|
47
|
+
--foreground-secondary: 215 28% 17%;
|
|
48
|
+
--foreground-tertiary: 220 9% 46%;
|
|
49
|
+
--foreground-muted: 218 11% 65%;
|
|
50
|
+
|
|
51
|
+
/* Primary (Brand Blue) */
|
|
52
|
+
--primary: 217 80% 55%;
|
|
53
|
+
--primary-hover: 217 75% 48%;
|
|
54
|
+
--primary-active: 217 70% 40%;
|
|
55
|
+
--primary-foreground: 0 0% 100%;
|
|
56
|
+
|
|
57
|
+
/* Secondary */
|
|
58
|
+
--secondary: 220 14% 96%;
|
|
59
|
+
--secondary-hover: 220 13% 91%;
|
|
60
|
+
--secondary-foreground: 215 28% 17%;
|
|
61
|
+
|
|
62
|
+
/* Accent */
|
|
63
|
+
--accent: 217 100% 97%;
|
|
64
|
+
--accent-foreground: 217 70% 40%;
|
|
65
|
+
|
|
66
|
+
/* Muted */
|
|
67
|
+
--muted: 220 14% 96%;
|
|
68
|
+
--muted-foreground: 220 9% 46%;
|
|
69
|
+
|
|
70
|
+
/* Destructive */
|
|
71
|
+
--destructive: 0 84% 60%;
|
|
72
|
+
--destructive-foreground: 0 0% 98%;
|
|
73
|
+
|
|
74
|
+
/* Success */
|
|
75
|
+
--success: 142 76% 36%;
|
|
76
|
+
--success-foreground: 0 0% 100%;
|
|
77
|
+
|
|
78
|
+
/* Warning */
|
|
79
|
+
--warning: 38 92% 50%;
|
|
80
|
+
--warning-foreground: 0 0% 100%;
|
|
81
|
+
|
|
82
|
+
/* ========================================
|
|
83
83
|
UI ELEMENTS
|
|
84
84
|
======================================== */
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
85
|
+
/* Card */
|
|
86
|
+
--card: 0 0% 100%;
|
|
87
|
+
--card-foreground: 221 39% 11%;
|
|
88
|
+
--card-border: 220 13% 91%;
|
|
89
|
+
|
|
90
|
+
/* Popover */
|
|
91
|
+
--popover: 0 0% 100%;
|
|
92
|
+
--popover-foreground: 221 39% 11%;
|
|
93
|
+
|
|
94
|
+
/* Border */
|
|
95
|
+
--border: 220 13% 91%;
|
|
96
|
+
--border-hover: 216 12% 84%;
|
|
97
|
+
--border-active: 217 80% 55%;
|
|
98
|
+
|
|
99
|
+
/* Input */
|
|
100
|
+
--input: 0 0% 100%;
|
|
101
|
+
--input-border: 220 13% 91%;
|
|
102
|
+
--input-focus: 217 80% 55%;
|
|
103
|
+
|
|
104
|
+
/* Ring (Focus) */
|
|
105
|
+
--ring: 217 80% 55%;
|
|
106
|
+
--ring-offset: 0 0% 100%;
|
|
107
|
+
|
|
108
|
+
/* ========================================
|
|
109
109
|
SPACING SYSTEM
|
|
110
110
|
======================================== */
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
111
|
+
--space-0: 0px;
|
|
112
|
+
--space-1: 4px;
|
|
113
|
+
--space-2: 8px;
|
|
114
|
+
--space-3: 12px;
|
|
115
|
+
--space-4: 16px;
|
|
116
|
+
--space-5: 20px;
|
|
117
|
+
--space-6: 24px;
|
|
118
|
+
--space-8: 32px;
|
|
119
|
+
--space-10: 40px;
|
|
120
|
+
--space-12: 48px;
|
|
121
|
+
--space-16: 64px;
|
|
122
|
+
--space-20: 80px;
|
|
123
|
+
--space-24: 96px;
|
|
124
|
+
|
|
125
|
+
/* ========================================
|
|
126
126
|
BORDER RADIUS
|
|
127
127
|
======================================== */
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
128
|
+
--radius-sm: 6px;
|
|
129
|
+
--radius-md: 8px;
|
|
130
|
+
--radius-lg: 12px;
|
|
131
|
+
--radius-xl: 16px;
|
|
132
|
+
--radius-2xl: 20px;
|
|
133
|
+
--radius-3xl: 24px;
|
|
134
|
+
--radius-full: 9999px;
|
|
135
|
+
|
|
136
|
+
/* ========================================
|
|
137
137
|
SHADOWS
|
|
138
138
|
======================================== */
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
139
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
140
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
141
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
142
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
143
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
144
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
145
|
+
|
|
146
|
+
/* Card Shadow - Softer, more diffuse for premium feel */
|
|
147
|
+
--shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
|
|
148
|
+
--shadow-card-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 0, 0, 0.03);
|
|
149
|
+
|
|
150
|
+
/* ========================================
|
|
151
151
|
TYPOGRAPHY
|
|
152
152
|
======================================== */
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
153
|
+
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
154
|
+
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
155
|
+
|
|
156
|
+
/* Font Sizes */
|
|
157
|
+
--text-xs: 12px;
|
|
158
|
+
--text-sm: 14px;
|
|
159
|
+
--text-base: 16px;
|
|
160
|
+
--text-lg: 18px;
|
|
161
|
+
--text-xl: 20px;
|
|
162
|
+
--text-2xl: 24px;
|
|
163
|
+
--text-3xl: 30px;
|
|
164
|
+
--text-4xl: 36px;
|
|
165
|
+
--text-5xl: 48px;
|
|
166
|
+
|
|
167
|
+
/* Font Weights */
|
|
168
|
+
--font-normal: 400;
|
|
169
|
+
--font-medium: 500;
|
|
170
|
+
--font-semibold: 600;
|
|
171
|
+
--font-bold: 700;
|
|
172
|
+
|
|
173
|
+
/* Line Heights */
|
|
174
|
+
--leading-tight: 1.25;
|
|
175
|
+
--leading-snug: 1.375;
|
|
176
|
+
--leading-normal: 1.5;
|
|
177
|
+
--leading-relaxed: 1.625;
|
|
178
|
+
|
|
179
|
+
/* Letter Spacing */
|
|
180
|
+
--tracking-tight: -0.025em;
|
|
181
|
+
--tracking-normal: 0;
|
|
182
|
+
--tracking-wide: 0.025em;
|
|
183
|
+
|
|
184
|
+
/* ========================================
|
|
185
185
|
TRANSITIONS
|
|
186
186
|
======================================== */
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
187
|
+
--transition-fast: 150ms ease;
|
|
188
|
+
--transition-base: 200ms ease;
|
|
189
|
+
--transition-slow: 300ms ease;
|
|
190
190
|
|
|
191
|
-
|
|
191
|
+
/* ========================================
|
|
192
192
|
Z-INDEX SCALE
|
|
193
193
|
======================================== */
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
194
|
+
--z-dropdown: 100;
|
|
195
|
+
--z-sticky: 200;
|
|
196
|
+
--z-fixed: 300;
|
|
197
|
+
--z-modal-backdrop: 400;
|
|
198
|
+
--z-modal: 500;
|
|
199
|
+
--z-popover: 600;
|
|
200
|
+
--z-tooltip: 700;
|
|
201
|
+
}
|
|
202
202
|
}
|
|
203
203
|
|
|
204
204
|
@layer utilities {
|
|
205
|
-
|
|
205
|
+
/* ========================================
|
|
206
206
|
UTILITY CLASSES
|
|
207
207
|
======================================== */
|
|
208
208
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
209
|
+
/* Brand Colors */
|
|
210
|
+
.bg-brand-50 {
|
|
211
|
+
background-color: hsl(var(--brand-50));
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.bg-brand-100 {
|
|
215
|
+
background-color: hsl(var(--brand-100));
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.bg-brand-500 {
|
|
219
|
+
background-color: hsl(var(--brand-500));
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.bg-brand-600 {
|
|
223
|
+
background-color: hsl(var(--brand-600));
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.text-brand-500 {
|
|
227
|
+
color: hsl(var(--brand-500));
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.text-brand-600 {
|
|
231
|
+
color: hsl(var(--brand-600));
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.border-brand-500 {
|
|
235
|
+
border-color: hsl(var(--brand-500));
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* Gray Colors */
|
|
239
|
+
.bg-gray-50 {
|
|
240
|
+
background-color: hsl(var(--gray-50));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.bg-gray-100 {
|
|
244
|
+
background-color: hsl(var(--gray-100));
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.bg-gray-900 {
|
|
248
|
+
background-color: hsl(var(--gray-900));
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.text-gray-500 {
|
|
252
|
+
color: hsl(var(--gray-500));
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.text-gray-600 {
|
|
256
|
+
color: hsl(var(--gray-600));
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.text-gray-900 {
|
|
260
|
+
color: hsl(var(--gray-900));
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* Shadows */
|
|
264
|
+
.shadow-card {
|
|
265
|
+
box-shadow: var(--shadow-card);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.shadow-card-hover {
|
|
269
|
+
box-shadow: var(--shadow-card-hover);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Gradient Backgrounds */
|
|
273
|
+
.bg-gradient-hero {
|
|
274
|
+
background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--gray-50)) 100%);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* Glass Effect */
|
|
278
|
+
.glass {
|
|
279
|
+
background: rgba(255, 255, 255, 0.8);
|
|
280
|
+
backdrop-filter: blur(12px);
|
|
281
|
+
-webkit-backdrop-filter: blur(12px);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* Focus Ring */
|
|
285
|
+
.focus-ring {
|
|
286
|
+
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
|
287
|
+
--tw-ring-color: hsl(var(--ring));
|
|
288
|
+
--tw-ring-offset-color: hsl(var(--ring-offset));
|
|
289
|
+
}
|
|
290
|
+
}
|