@industry-theme/theme-editor-panel 0.1.1 → 0.1.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.
@@ -1,11 +1,801 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import React2, { createContext, useState, useEffect, useContext, forwardRef, createElement, useRef, useLayoutEffect, useCallback, useMemo } from "react";
3
+ var defaultMarkdownTheme = {
4
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
5
+ fonts: {
6
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
7
+ heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
8
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
9
+ },
10
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
11
+ fontScale: 1,
12
+ fontWeights: {
13
+ body: 400,
14
+ heading: 600,
15
+ bold: 700,
16
+ light: 300,
17
+ medium: 500,
18
+ semibold: 600
19
+ },
20
+ lineHeights: {
21
+ body: 1.6,
22
+ heading: 1.3,
23
+ tight: 1.25,
24
+ relaxed: 1.75
25
+ },
26
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
27
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
28
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
29
+ shadows: [
30
+ "none",
31
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
32
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
33
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
34
+ "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
35
+ "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
36
+ ],
37
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
38
+ colors: {
39
+ text: "#1a1a1a",
40
+ background: "#ffffff",
41
+ primary: "#007acc",
42
+ secondary: "#005a9e",
43
+ accent: "#1a1a1a",
44
+ highlight: "rgba(0, 122, 204, 0.1)",
45
+ muted: "#f0f0f0",
46
+ success: "#28a745",
47
+ warning: "#ffc107",
48
+ error: "#dc3545",
49
+ info: "#17a2b8",
50
+ border: "rgba(0, 0, 0, 0.1)",
51
+ backgroundSecondary: "#f8f9fa",
52
+ backgroundTertiary: "#e9ecef",
53
+ backgroundLight: "rgba(0, 0, 0, 0.03)",
54
+ backgroundHover: "rgba(0, 0, 0, 0.05)",
55
+ surface: "#ffffff",
56
+ textSecondary: "#555555",
57
+ textTertiary: "#888888",
58
+ textMuted: "#aaaaaa",
59
+ highlightBg: "rgba(255, 235, 59, 0.3)",
60
+ highlightBorder: "rgba(255, 235, 59, 0.6)"
61
+ },
62
+ buttons: {
63
+ primary: {
64
+ color: "white",
65
+ bg: "primary",
66
+ "&:hover": { bg: "secondary" }
67
+ },
68
+ secondary: {
69
+ color: "primary",
70
+ bg: "transparent",
71
+ borderWidth: 1,
72
+ borderStyle: "solid",
73
+ borderColor: "primary",
74
+ "&:hover": { bg: "highlight" }
75
+ },
76
+ ghost: {
77
+ color: "text",
78
+ bg: "transparent",
79
+ "&:hover": { bg: "backgroundHover" }
80
+ }
81
+ },
82
+ text: {
83
+ heading: {
84
+ fontFamily: "heading",
85
+ fontWeight: "heading",
86
+ lineHeight: "heading"
87
+ },
88
+ body: {
89
+ fontFamily: "body",
90
+ fontWeight: "body",
91
+ lineHeight: "body"
92
+ },
93
+ caption: {
94
+ fontSize: 1,
95
+ color: "textSecondary"
96
+ }
97
+ },
98
+ cards: {
99
+ primary: {
100
+ bg: "surface",
101
+ border: "1px solid",
102
+ borderColor: "border",
103
+ borderRadius: 2
104
+ },
105
+ secondary: {
106
+ bg: "backgroundSecondary",
107
+ border: "1px solid",
108
+ borderColor: "border",
109
+ borderRadius: 2
110
+ }
111
+ }
112
+ };
113
+ var defaultTerminalTheme = {
114
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
115
+ fonts: {
116
+ body: '"Courier New", Courier, monospace',
117
+ heading: '"Courier New", Courier, monospace',
118
+ monospace: '"Courier New", Courier, monospace'
119
+ },
120
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
121
+ fontScale: 1,
122
+ fontWeights: {
123
+ body: 400,
124
+ heading: 500,
125
+ bold: 600,
126
+ light: 300,
127
+ medium: 500,
128
+ semibold: 600
129
+ },
130
+ lineHeights: {
131
+ body: 1.4,
132
+ heading: 1.2,
133
+ tight: 1.3,
134
+ relaxed: 1.6
135
+ },
136
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
137
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
138
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
139
+ shadows: [
140
+ "none",
141
+ "0 0 5px rgba(255, 193, 7, 0.1)",
142
+ "0 0 10px rgba(255, 193, 7, 0.15)",
143
+ "0 0 15px rgba(255, 193, 7, 0.2)",
144
+ "0 0 20px rgba(255, 193, 7, 0.25)",
145
+ "0 0 30px rgba(255, 193, 7, 0.3)"
146
+ ],
147
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
148
+ colors: {
149
+ text: "#ffc107",
150
+ background: "#000000",
151
+ primary: "#ffc107",
152
+ secondary: "#ffb300",
153
+ accent: "#ffffff",
154
+ highlight: "rgba(255, 193, 7, 0.1)",
155
+ muted: "#1a1a1a",
156
+ success: "#4caf50",
157
+ warning: "#ff9800",
158
+ error: "#f44336",
159
+ info: "#2196f3",
160
+ border: "rgba(255, 193, 7, 0.2)",
161
+ backgroundSecondary: "#0a0a0a",
162
+ backgroundTertiary: "#111111",
163
+ backgroundLight: "rgba(255, 193, 7, 0.03)",
164
+ backgroundHover: "rgba(255, 193, 7, 0.05)",
165
+ surface: "#050505",
166
+ textSecondary: "#e0e0e0",
167
+ textTertiary: "#b0b0b0",
168
+ textMuted: "#808080",
169
+ highlightBg: "rgba(255, 193, 7, 0.2)",
170
+ highlightBorder: "rgba(255, 193, 7, 0.4)"
171
+ },
172
+ buttons: {
173
+ primary: {
174
+ color: "black",
175
+ bg: "primary",
176
+ borderWidth: 0,
177
+ "&:hover": { bg: "secondary" }
178
+ },
179
+ secondary: {
180
+ color: "primary",
181
+ bg: "transparent",
182
+ borderWidth: 1,
183
+ borderStyle: "solid",
184
+ borderColor: "primary",
185
+ "&:hover": { bg: "highlight" }
186
+ },
187
+ ghost: {
188
+ color: "text",
189
+ bg: "transparent",
190
+ "&:hover": { bg: "backgroundHover" }
191
+ }
192
+ },
193
+ text: {
194
+ heading: {
195
+ fontFamily: "heading",
196
+ fontWeight: "heading",
197
+ lineHeight: "heading"
198
+ },
199
+ body: {
200
+ fontFamily: "body",
201
+ fontWeight: "body",
202
+ lineHeight: "body"
203
+ },
204
+ caption: {
205
+ fontSize: 1,
206
+ color: "textSecondary"
207
+ }
208
+ },
209
+ cards: {
210
+ primary: {
211
+ bg: "surface",
212
+ border: "1px solid",
213
+ borderColor: "border",
214
+ borderRadius: 0
215
+ },
216
+ secondary: {
217
+ bg: "backgroundSecondary",
218
+ border: "1px solid",
219
+ borderColor: "border",
220
+ borderRadius: 0
221
+ }
222
+ }
223
+ };
224
+ var defaultEditorTheme = {
225
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
226
+ fonts: {
227
+ body: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
228
+ heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
229
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
230
+ },
231
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
232
+ fontScale: 1,
233
+ fontWeights: {
234
+ body: 400,
235
+ heading: 600,
236
+ bold: 700,
237
+ light: 300,
238
+ medium: 500,
239
+ semibold: 600
240
+ },
241
+ lineHeights: {
242
+ body: 1.5,
243
+ heading: 1.2,
244
+ tight: 1.3,
245
+ relaxed: 1.7
246
+ },
247
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
248
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
249
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
250
+ shadows: [
251
+ "none",
252
+ "0 1px 2px rgba(0, 0, 0, 0.05)",
253
+ "0 2px 4px rgba(0, 0, 0, 0.1)",
254
+ "0 4px 8px rgba(0, 0, 0, 0.15)",
255
+ "0 8px 16px rgba(0, 0, 0, 0.2)",
256
+ "0 12px 24px rgba(0, 0, 0, 0.25)"
257
+ ],
258
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
259
+ colors: {
260
+ text: "#d4d4d4",
261
+ background: "#1e1e1e",
262
+ primary: "#569cd6",
263
+ secondary: "#408ac9",
264
+ accent: "#c586c0",
265
+ highlight: "rgba(86, 156, 214, 0.1)",
266
+ muted: "#2a2a2a",
267
+ success: "#6a9955",
268
+ warning: "#d18616",
269
+ error: "#f44747",
270
+ info: "#569cd6",
271
+ border: "rgba(255, 255, 255, 0.1)",
272
+ backgroundSecondary: "#252526",
273
+ backgroundTertiary: "#333333",
274
+ backgroundLight: "rgba(255, 255, 255, 0.03)",
275
+ backgroundHover: "rgba(255, 255, 255, 0.05)",
276
+ surface: "#252526",
277
+ textSecondary: "#cccccc",
278
+ textTertiary: "#999999",
279
+ textMuted: "#666666",
280
+ highlightBg: "rgba(255, 235, 59, 0.2)",
281
+ highlightBorder: "rgba(255, 235, 59, 0.4)"
282
+ },
283
+ buttons: {
284
+ primary: {
285
+ color: "white",
286
+ bg: "primary",
287
+ "&:hover": { bg: "secondary" }
288
+ },
289
+ secondary: {
290
+ color: "primary",
291
+ bg: "transparent",
292
+ borderWidth: 1,
293
+ borderStyle: "solid",
294
+ borderColor: "primary",
295
+ "&:hover": { bg: "highlight" }
296
+ },
297
+ ghost: {
298
+ color: "text",
299
+ bg: "transparent",
300
+ "&:hover": { bg: "backgroundHover" }
301
+ }
302
+ },
303
+ text: {
304
+ heading: {
305
+ fontFamily: "heading",
306
+ fontWeight: "heading",
307
+ lineHeight: "heading"
308
+ },
309
+ body: {
310
+ fontFamily: "body",
311
+ fontWeight: "body",
312
+ lineHeight: "body"
313
+ },
314
+ caption: {
315
+ fontSize: 1,
316
+ color: "textSecondary"
317
+ }
318
+ },
319
+ cards: {
320
+ primary: {
321
+ bg: "surface",
322
+ border: "1px solid",
323
+ borderColor: "border",
324
+ borderRadius: 1
325
+ },
326
+ secondary: {
327
+ bg: "backgroundSecondary",
328
+ border: "1px solid",
329
+ borderColor: "border",
330
+ borderRadius: 1
331
+ }
332
+ }
333
+ };
334
+ var landingPageTheme = {
335
+ space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 100, 128],
336
+ fonts: {
337
+ body: 'Inter, "Geist Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
338
+ heading: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
339
+ monospace: '"SF Mono", Monaco, Inconsolata, "Fira Code", monospace'
340
+ },
341
+ fontSizes: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 24, 28, 32, 36, 48, 56, 68, 84, 96],
342
+ fontScale: 1,
343
+ fontWeights: {
344
+ body: 400,
345
+ heading: 600,
346
+ bold: 700,
347
+ light: 300,
348
+ medium: 500,
349
+ semibold: 600
350
+ },
351
+ lineHeights: {
352
+ body: 1.6,
353
+ heading: 1.2,
354
+ tight: 1.05,
355
+ relaxed: 1.7
356
+ },
357
+ breakpoints: ["640px", "768px", "1024px", "1280px", "1400px"],
358
+ sizes: [16, 32, 64, 128, 200, 240, 256, 300, 512, 740, 768, 820, 900, 1024, 1200, 1400, 1536],
359
+ radii: [0, 2, 4, 6, 7, 8, 9, 10, 12, 14, 16, 24],
360
+ shadows: [
361
+ "none",
362
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
363
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
364
+ "0 4px 12px rgba(0, 194, 255, 0.4)",
365
+ "0 6px 24px rgba(0, 194, 255, 0.1)",
366
+ "0 8px 32px rgba(0, 0, 0, 0.4)"
367
+ ],
368
+ zIndices: [0, 1, 10, 20, 30, 40, 50, 1e3],
369
+ colors: {
370
+ text: "#ffffff",
371
+ background: "#000000",
372
+ primary: "#00C2FF",
373
+ secondary: "#0098CC",
374
+ accent: "#0066FF",
375
+ highlight: "rgba(0, 194, 255, 0.15)",
376
+ muted: "#1a1a1a",
377
+ success: "#4caf50",
378
+ warning: "#ff9800",
379
+ error: "#f44336",
380
+ info: "#2196f3",
381
+ border: "rgba(0, 194, 255, 0.2)",
382
+ backgroundSecondary: "#0a1628",
383
+ backgroundTertiary: "#0f1c2e",
384
+ backgroundLight: "rgba(0, 194, 255, 0.04)",
385
+ backgroundHover: "rgba(0, 194, 255, 0.1)",
386
+ surface: "rgba(0, 0, 0, 0.4)",
387
+ textSecondary: "#d1d5db",
388
+ textTertiary: "#9ca3af",
389
+ textMuted: "#6b7280",
390
+ highlightBg: "rgba(255, 235, 59, 0.25)",
391
+ highlightBorder: "rgba(255, 235, 59, 0.5)"
392
+ },
393
+ buttons: {
394
+ primary: {
395
+ color: "#000000",
396
+ bg: "#00C2FF",
397
+ borderWidth: 0,
398
+ padding: "8px 20px",
399
+ fontSize: 14,
400
+ fontWeight: 600,
401
+ cursor: "pointer",
402
+ "&:hover": {
403
+ bg: "#00D9FF"
404
+ }
405
+ },
406
+ secondary: {
407
+ color: "#00C2FF",
408
+ bg: "transparent",
409
+ borderWidth: 1,
410
+ borderStyle: "solid",
411
+ borderColor: "rgba(0, 194, 255, 0.3)",
412
+ padding: "8px 16px",
413
+ fontSize: 14,
414
+ fontWeight: 600,
415
+ cursor: "pointer",
416
+ "&:hover": {
417
+ bg: "rgba(0, 194, 255, 0.1)",
418
+ borderColor: "#00C2FF"
419
+ }
420
+ },
421
+ ghost: {
422
+ color: "#00C2FF",
423
+ bg: "transparent",
424
+ borderWidth: 0,
425
+ padding: "8px 16px",
426
+ fontSize: 14,
427
+ fontWeight: 500,
428
+ cursor: "pointer",
429
+ "&:hover": {
430
+ color: "#00D9FF",
431
+ bg: "rgba(0, 194, 255, 0.1)"
432
+ }
433
+ }
434
+ },
435
+ text: {
436
+ heading: {
437
+ fontFamily: "heading",
438
+ fontWeight: "heading",
439
+ lineHeight: "heading",
440
+ color: "#ffffff"
441
+ },
442
+ body: {
443
+ fontFamily: "body",
444
+ fontWeight: "body",
445
+ lineHeight: "body",
446
+ color: "text"
447
+ },
448
+ caption: {
449
+ fontSize: 1,
450
+ color: "textSecondary"
451
+ }
452
+ },
453
+ cards: {
454
+ primary: {
455
+ bg: "surface",
456
+ border: "1px solid",
457
+ borderColor: "border",
458
+ borderRadius: 4
459
+ },
460
+ secondary: {
461
+ bg: "rgba(0, 194, 255, 0.05)",
462
+ border: "1px solid",
463
+ borderColor: "rgba(0, 194, 255, 0.2)",
464
+ borderRadius: 4
465
+ }
466
+ }
467
+ };
468
+ var landingPageLightTheme = {
469
+ ...landingPageTheme,
470
+ colors: {
471
+ text: "#1a1a1a",
472
+ background: "#ffffff",
473
+ primary: "#0098CC",
474
+ secondary: "#00C2FF",
475
+ accent: "#0066FF",
476
+ highlight: "rgba(0, 152, 204, 0.1)",
477
+ muted: "#f0f0f0",
478
+ success: "#4caf50",
479
+ warning: "#ff9800",
480
+ error: "#f44336",
481
+ info: "#2196f3",
482
+ border: "rgba(0, 152, 204, 0.2)",
483
+ backgroundSecondary: "#f8f9fa",
484
+ backgroundTertiary: "#e9ecef",
485
+ backgroundLight: "rgba(0, 152, 204, 0.03)",
486
+ backgroundHover: "rgba(0, 152, 204, 0.05)",
487
+ surface: "rgba(255, 255, 255, 0.95)",
488
+ textSecondary: "#555555",
489
+ textTertiary: "#888888",
490
+ textMuted: "#aaaaaa",
491
+ highlightBg: "rgba(255, 235, 59, 0.3)",
492
+ highlightBorder: "rgba(255, 235, 59, 0.6)"
493
+ },
494
+ buttons: {
495
+ primary: {
496
+ color: "#ffffff",
497
+ bg: "#0098CC",
498
+ borderWidth: 0,
499
+ padding: "8px 20px",
500
+ fontSize: 14,
501
+ fontWeight: 600,
502
+ cursor: "pointer",
503
+ "&:hover": {
504
+ bg: "#007aa8"
505
+ }
506
+ },
507
+ secondary: {
508
+ color: "#0098CC",
509
+ bg: "transparent",
510
+ borderWidth: 1,
511
+ borderStyle: "solid",
512
+ borderColor: "rgba(0, 152, 204, 0.3)",
513
+ padding: "8px 16px",
514
+ fontSize: 14,
515
+ fontWeight: 600,
516
+ cursor: "pointer",
517
+ "&:hover": {
518
+ bg: "rgba(0, 152, 204, 0.05)",
519
+ borderColor: "#0098CC"
520
+ }
521
+ },
522
+ ghost: {
523
+ color: "#0098CC",
524
+ bg: "transparent",
525
+ borderWidth: 0,
526
+ padding: "8px 16px",
527
+ fontSize: 14,
528
+ fontWeight: 500,
529
+ cursor: "pointer",
530
+ "&:hover": {
531
+ color: "#007aa8",
532
+ bg: "rgba(0, 152, 204, 0.05)"
533
+ }
534
+ }
535
+ }
536
+ };
537
+ var regalTheme = {
538
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
539
+ fonts: {
540
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
541
+ heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
542
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
543
+ },
544
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
545
+ fontScale: 1,
546
+ fontWeights: {
547
+ body: 400,
548
+ heading: 600,
549
+ bold: 700,
550
+ light: 300,
551
+ medium: 500,
552
+ semibold: 600
553
+ },
554
+ lineHeights: {
555
+ body: 1.5,
556
+ heading: 1.2,
557
+ tight: 1.25,
558
+ relaxed: 1.75
559
+ },
560
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
561
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
562
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
563
+ shadows: [
564
+ "none",
565
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
566
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
567
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
568
+ "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
569
+ "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
570
+ ],
571
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
572
+ colors: {
573
+ text: "#f1e8dc",
574
+ background: "#1a1f2e",
575
+ primary: "#d4a574",
576
+ secondary: "#e0b584",
577
+ accent: "#c9b8a3",
578
+ highlight: "rgba(212, 165, 116, 0.15)",
579
+ muted: "#8b7968",
580
+ success: "#5c8a72",
581
+ warning: "#d4a574",
582
+ error: "#a85751",
583
+ info: "#d4a574",
584
+ border: "rgba(212, 165, 116, 0.2)",
585
+ backgroundSecondary: "#212738",
586
+ backgroundTertiary: "#2d3446",
587
+ backgroundLight: "rgba(212, 165, 116, 0.08)",
588
+ backgroundHover: "rgba(212, 165, 116, 0.15)",
589
+ surface: "#212738",
590
+ textSecondary: "#c9b8a3",
591
+ textTertiary: "#8b7968",
592
+ textMuted: "#8b7968",
593
+ highlightBg: "rgba(255, 193, 7, 0.25)",
594
+ highlightBorder: "rgba(255, 193, 7, 0.5)"
595
+ },
596
+ buttons: {
597
+ primary: {
598
+ color: "background",
599
+ bg: "primary",
600
+ "&:hover": {
601
+ bg: "secondary"
602
+ }
603
+ },
604
+ secondary: {
605
+ color: "text",
606
+ bg: "muted",
607
+ "&:hover": {
608
+ bg: "backgroundSecondary"
609
+ }
610
+ },
611
+ ghost: {
612
+ color: "primary",
613
+ bg: "transparent",
614
+ "&:hover": {
615
+ bg: "muted"
616
+ }
617
+ }
618
+ },
619
+ text: {
620
+ heading: {
621
+ fontFamily: "heading",
622
+ fontWeight: "heading",
623
+ lineHeight: "heading"
624
+ },
625
+ body: {
626
+ fontFamily: "body",
627
+ fontWeight: "body",
628
+ lineHeight: "body"
629
+ },
630
+ caption: {
631
+ fontSize: 1,
632
+ color: "textSecondary"
633
+ }
634
+ },
635
+ cards: {
636
+ primary: {
637
+ bg: "background",
638
+ border: "1px solid",
639
+ borderColor: "border",
640
+ borderRadius: 2
641
+ },
642
+ secondary: {
643
+ bg: "backgroundSecondary",
644
+ border: "1px solid",
645
+ borderColor: "border",
646
+ borderRadius: 2
647
+ }
648
+ }
649
+ };
3
650
  var terminalTheme = {
4
651
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
5
652
  fonts: {
6
- body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
7
- heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
8
- monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
653
+ body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
654
+ heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
655
+ monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
656
+ },
657
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
658
+ fontScale: 1,
659
+ fontWeights: {
660
+ body: 400,
661
+ heading: 500,
662
+ bold: 600,
663
+ light: 300,
664
+ medium: 500,
665
+ semibold: 600
666
+ },
667
+ lineHeights: {
668
+ body: 1.6,
669
+ heading: 1.3,
670
+ tight: 1.4,
671
+ relaxed: 1.8
672
+ },
673
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
674
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
675
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
676
+ shadows: [
677
+ "none",
678
+ "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
679
+ "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
680
+ "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
681
+ "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
682
+ "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
683
+ ],
684
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
685
+ colors: {
686
+ text: "#e4e4e4",
687
+ background: "rgba(10, 10, 10, 0.85)",
688
+ primary: "#66b3ff",
689
+ secondary: "#80c4ff",
690
+ accent: "#66ff99",
691
+ highlight: "rgba(102, 179, 255, 0.15)",
692
+ muted: "rgba(26, 26, 26, 0.8)",
693
+ success: "#66ff99",
694
+ warning: "#ffcc66",
695
+ error: "#ff6666",
696
+ info: "#66b3ff",
697
+ border: "rgba(255, 255, 255, 0.1)",
698
+ backgroundSecondary: "rgba(15, 15, 15, 0.9)",
699
+ backgroundTertiary: "rgba(20, 20, 20, 0.9)",
700
+ backgroundLight: "rgba(255, 255, 255, 0.05)",
701
+ backgroundHover: "rgba(102, 179, 255, 0.08)",
702
+ surface: "rgba(15, 15, 15, 0.95)",
703
+ textSecondary: "rgba(255, 255, 255, 0.7)",
704
+ textTertiary: "rgba(255, 255, 255, 0.5)",
705
+ textMuted: "rgba(255, 255, 255, 0.4)",
706
+ highlightBg: "rgba(255, 235, 59, 0.25)",
707
+ highlightBorder: "rgba(255, 235, 59, 0.5)"
708
+ },
709
+ modes: {
710
+ light: {
711
+ text: "#1a1a1a",
712
+ background: "rgba(255, 255, 255, 0.9)",
713
+ primary: "#0066cc",
714
+ secondary: "#0052a3",
715
+ accent: "#00cc88",
716
+ highlight: "rgba(0, 102, 204, 0.08)",
717
+ muted: "rgba(245, 245, 245, 0.8)",
718
+ success: "#00cc88",
719
+ warning: "#ffaa00",
720
+ error: "#ff3333",
721
+ info: "#0066cc",
722
+ border: "rgba(0, 0, 0, 0.1)",
723
+ backgroundSecondary: "rgba(250, 250, 250, 0.9)",
724
+ backgroundTertiary: "rgba(245, 245, 245, 0.9)",
725
+ backgroundLight: "rgba(0, 0, 0, 0.02)",
726
+ backgroundHover: "rgba(0, 102, 204, 0.04)",
727
+ surface: "rgba(255, 255, 255, 0.95)",
728
+ textSecondary: "rgba(0, 0, 0, 0.6)",
729
+ textTertiary: "rgba(0, 0, 0, 0.4)",
730
+ textMuted: "rgba(0, 0, 0, 0.3)",
731
+ highlightBg: "rgba(255, 235, 59, 0.3)",
732
+ highlightBorder: "rgba(255, 235, 59, 0.6)"
733
+ }
734
+ },
735
+ buttons: {
736
+ primary: {
737
+ color: "white",
738
+ bg: "primary",
739
+ borderWidth: 0,
740
+ "&:hover": {
741
+ bg: "secondary"
742
+ }
743
+ },
744
+ secondary: {
745
+ color: "primary",
746
+ bg: "transparent",
747
+ borderWidth: 1,
748
+ borderStyle: "solid",
749
+ borderColor: "primary",
750
+ "&:hover": {
751
+ bg: "highlight"
752
+ }
753
+ },
754
+ ghost: {
755
+ color: "text",
756
+ bg: "transparent",
757
+ "&:hover": {
758
+ bg: "backgroundHover"
759
+ }
760
+ }
761
+ },
762
+ text: {
763
+ heading: {
764
+ fontFamily: "heading",
765
+ fontWeight: "heading",
766
+ lineHeight: "heading"
767
+ },
768
+ body: {
769
+ fontFamily: "body",
770
+ fontWeight: "body",
771
+ lineHeight: "body"
772
+ },
773
+ caption: {
774
+ fontSize: 1,
775
+ color: "textSecondary"
776
+ }
777
+ },
778
+ cards: {
779
+ primary: {
780
+ bg: "surface",
781
+ border: "1px solid",
782
+ borderColor: "border",
783
+ borderRadius: 1
784
+ },
785
+ secondary: {
786
+ bg: "backgroundSecondary",
787
+ border: "1px solid",
788
+ borderColor: "border",
789
+ borderRadius: 1
790
+ }
791
+ }
792
+ };
793
+ var matrixTheme = {
794
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
795
+ fonts: {
796
+ body: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
797
+ heading: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
798
+ monospace: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace'
9
799
  },
10
800
  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
11
801
  fontScale: 1,
@@ -18,76 +808,167 @@ var terminalTheme = {
18
808
  semibold: 600
19
809
  },
20
810
  lineHeights: {
21
- body: 1.6,
22
- heading: 1.3,
23
- tight: 1.4,
24
- relaxed: 1.8
811
+ body: 1.5,
812
+ heading: 1.2,
813
+ tight: 1.3,
814
+ relaxed: 1.7
25
815
  },
26
816
  breakpoints: ["640px", "768px", "1024px", "1280px"],
27
817
  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
28
818
  radii: [0, 2, 4, 6, 8, 12, 16, 24],
29
819
  shadows: [
30
820
  "none",
31
- "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
32
- "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
33
- "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
34
- "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
35
- "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
821
+ "0 0 5px rgba(0, 216, 53, 0.15)",
822
+ "0 0 10px rgba(0, 216, 53, 0.2)",
823
+ "0 0 15px rgba(0, 216, 53, 0.25)",
824
+ "0 0 20px rgba(0, 216, 53, 0.3)",
825
+ "0 0 30px rgba(0, 216, 53, 0.4)"
36
826
  ],
37
827
  zIndices: [0, 1, 10, 20, 30, 40, 50],
38
828
  colors: {
39
- text: "#e4e4e4",
40
- background: "rgba(10, 10, 10, 0.85)",
41
- primary: "#66b3ff",
42
- secondary: "#80c4ff",
43
- accent: "#66ff99",
44
- highlight: "rgba(102, 179, 255, 0.15)",
45
- muted: "rgba(26, 26, 26, 0.8)",
46
- success: "#66ff99",
47
- warning: "#ffcc66",
48
- error: "#ff6666",
49
- info: "#66b3ff",
50
- border: "rgba(255, 255, 255, 0.1)",
51
- backgroundSecondary: "rgba(15, 15, 15, 0.9)",
52
- backgroundTertiary: "rgba(20, 20, 20, 0.9)",
53
- backgroundLight: "rgba(255, 255, 255, 0.05)",
54
- backgroundHover: "rgba(102, 179, 255, 0.08)",
55
- surface: "rgba(15, 15, 15, 0.95)",
56
- textSecondary: "rgba(255, 255, 255, 0.7)",
57
- textTertiary: "rgba(255, 255, 255, 0.5)",
58
- textMuted: "rgba(255, 255, 255, 0.4)",
59
- highlightBg: "rgba(255, 235, 59, 0.25)",
60
- highlightBorder: "rgba(255, 235, 59, 0.5)"
829
+ text: "#a8a8a8",
830
+ background: "#000000",
831
+ primary: "#00d835",
832
+ secondary: "#00a828",
833
+ accent: "#00d835",
834
+ highlight: "rgba(0, 216, 53, 0.15)",
835
+ muted: "#0a0a0a",
836
+ success: "#00d835",
837
+ warning: "#d4a000",
838
+ error: "#d63333",
839
+ info: "#00a8d6",
840
+ border: "rgba(0, 216, 53, 0.2)",
841
+ backgroundSecondary: "#0a0a0a",
842
+ backgroundTertiary: "#111111",
843
+ backgroundLight: "rgba(0, 216, 53, 0.03)",
844
+ backgroundHover: "rgba(0, 216, 53, 0.08)",
845
+ surface: "#050505",
846
+ textSecondary: "#808080",
847
+ textTertiary: "#606060",
848
+ textMuted: "#484848",
849
+ highlightBg: "rgba(0, 216, 53, 0.25)",
850
+ highlightBorder: "rgba(0, 216, 53, 0.5)"
61
851
  },
62
- modes: {
63
- light: {
64
- text: "#1a1a1a",
65
- background: "rgba(255, 255, 255, 0.9)",
66
- primary: "#0066cc",
67
- secondary: "#0052a3",
68
- accent: "#00cc88",
69
- highlight: "rgba(0, 102, 204, 0.08)",
70
- muted: "rgba(245, 245, 245, 0.8)",
71
- success: "#00cc88",
72
- warning: "#ffaa00",
73
- error: "#ff3333",
74
- info: "#0066cc",
75
- border: "rgba(0, 0, 0, 0.1)",
76
- backgroundSecondary: "rgba(250, 250, 250, 0.9)",
77
- backgroundTertiary: "rgba(245, 245, 245, 0.9)",
78
- backgroundLight: "rgba(0, 0, 0, 0.02)",
79
- backgroundHover: "rgba(0, 102, 204, 0.04)",
80
- surface: "rgba(255, 255, 255, 0.95)",
81
- textSecondary: "rgba(0, 0, 0, 0.6)",
82
- textTertiary: "rgba(0, 0, 0, 0.4)",
83
- textMuted: "rgba(0, 0, 0, 0.3)",
84
- highlightBg: "rgba(255, 235, 59, 0.3)",
85
- highlightBorder: "rgba(255, 235, 59, 0.6)"
852
+ buttons: {
853
+ primary: {
854
+ color: "black",
855
+ bg: "primary",
856
+ borderWidth: 0,
857
+ "&:hover": {
858
+ bg: "secondary"
859
+ }
860
+ },
861
+ secondary: {
862
+ color: "primary",
863
+ bg: "transparent",
864
+ borderWidth: 1,
865
+ borderStyle: "solid",
866
+ borderColor: "primary",
867
+ "&:hover": {
868
+ bg: "highlight"
869
+ }
870
+ },
871
+ ghost: {
872
+ color: "text",
873
+ bg: "transparent",
874
+ "&:hover": {
875
+ bg: "backgroundHover"
876
+ }
877
+ }
878
+ },
879
+ text: {
880
+ heading: {
881
+ fontFamily: "heading",
882
+ fontWeight: "heading",
883
+ lineHeight: "heading"
884
+ },
885
+ body: {
886
+ fontFamily: "body",
887
+ fontWeight: "body",
888
+ lineHeight: "body"
889
+ },
890
+ caption: {
891
+ fontSize: 1,
892
+ color: "textSecondary"
893
+ }
894
+ },
895
+ cards: {
896
+ primary: {
897
+ bg: "surface",
898
+ border: "1px solid",
899
+ borderColor: "border",
900
+ borderRadius: 0
901
+ },
902
+ secondary: {
903
+ bg: "backgroundSecondary",
904
+ border: "1px solid",
905
+ borderColor: "border",
906
+ borderRadius: 0
86
907
  }
908
+ }
909
+ };
910
+ var matrixMinimalTheme = {
911
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
912
+ fonts: {
913
+ body: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
914
+ heading: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
915
+ monospace: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace'
916
+ },
917
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
918
+ fontScale: 1,
919
+ fontWeights: {
920
+ body: 400,
921
+ heading: 500,
922
+ bold: 600,
923
+ light: 300,
924
+ medium: 500,
925
+ semibold: 600
926
+ },
927
+ lineHeights: {
928
+ body: 1.5,
929
+ heading: 1.2,
930
+ tight: 1.3,
931
+ relaxed: 1.7
932
+ },
933
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
934
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
935
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
936
+ shadows: [
937
+ "none",
938
+ "0 1px 2px rgba(0, 0, 0, 0.05)",
939
+ "0 2px 4px rgba(0, 0, 0, 0.1)",
940
+ "0 4px 8px rgba(0, 0, 0, 0.15)",
941
+ "0 8px 16px rgba(0, 0, 0, 0.2)",
942
+ "0 0 20px rgba(0, 216, 53, 0.1)"
943
+ ],
944
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
945
+ colors: {
946
+ text: "#a8a8a8",
947
+ background: "#000000",
948
+ primary: "#b8b8b8",
949
+ secondary: "#909090",
950
+ accent: "#00d835",
951
+ highlight: "rgba(0, 216, 53, 0.1)",
952
+ muted: "#0a0a0a",
953
+ success: "#00d835",
954
+ warning: "#d4a000",
955
+ error: "#d63333",
956
+ info: "#00a8d6",
957
+ border: "rgba(184, 184, 184, 0.1)",
958
+ backgroundSecondary: "#0a0a0a",
959
+ backgroundTertiary: "#111111",
960
+ backgroundLight: "rgba(184, 184, 184, 0.02)",
961
+ backgroundHover: "rgba(0, 216, 53, 0.05)",
962
+ surface: "#050505",
963
+ textSecondary: "#808080",
964
+ textTertiary: "#606060",
965
+ textMuted: "#484848",
966
+ highlightBg: "rgba(0, 216, 53, 0.2)",
967
+ highlightBorder: "rgba(0, 216, 53, 0.4)"
87
968
  },
88
969
  buttons: {
89
970
  primary: {
90
- color: "white",
971
+ color: "black",
91
972
  bg: "primary",
92
973
  borderWidth: 0,
93
974
  "&:hover": {
@@ -101,7 +982,7 @@ var terminalTheme = {
101
982
  borderStyle: "solid",
102
983
  borderColor: "primary",
103
984
  "&:hover": {
104
- bg: "highlight"
985
+ bg: "backgroundHover"
105
986
  }
106
987
  },
107
988
  ghost: {
@@ -133,13 +1014,129 @@ var terminalTheme = {
133
1014
  bg: "surface",
134
1015
  border: "1px solid",
135
1016
  borderColor: "border",
136
- borderRadius: 1
1017
+ borderRadius: 0
137
1018
  },
138
1019
  secondary: {
139
1020
  bg: "backgroundSecondary",
140
1021
  border: "1px solid",
141
1022
  borderColor: "border",
142
- borderRadius: 1
1023
+ borderRadius: 0
1024
+ }
1025
+ }
1026
+ };
1027
+ var slateTheme = {
1028
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
1029
+ fonts: {
1030
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
1031
+ heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
1032
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
1033
+ },
1034
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
1035
+ fontScale: 1,
1036
+ fontWeights: {
1037
+ body: 400,
1038
+ heading: 600,
1039
+ bold: 700,
1040
+ light: 300,
1041
+ medium: 500,
1042
+ semibold: 600
1043
+ },
1044
+ lineHeights: {
1045
+ body: 1.6,
1046
+ heading: 1.3,
1047
+ tight: 1.25,
1048
+ relaxed: 1.75
1049
+ },
1050
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
1051
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
1052
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
1053
+ shadows: [
1054
+ "none",
1055
+ "0 1px 3px 0 rgba(0, 0, 0, 0.2)",
1056
+ "0 4px 6px -1px rgba(0, 0, 0, 0.2)",
1057
+ "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
1058
+ "0 20px 25px -5px rgba(0, 0, 0, 0.25)",
1059
+ "0 25px 50px -12px rgba(0, 0, 0, 0.3)"
1060
+ ],
1061
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
1062
+ colors: {
1063
+ text: "#9ca3af",
1064
+ background: "#1a1c1e",
1065
+ primary: "#d1d5db",
1066
+ secondary: "#6b7280",
1067
+ accent: "#f59e0b",
1068
+ highlight: "rgba(209, 213, 219, 0.15)",
1069
+ muted: "#2d3134",
1070
+ success: "#10b981",
1071
+ warning: "#f59e0b",
1072
+ error: "#ef4444",
1073
+ info: "#3b82f6",
1074
+ border: "rgba(156, 163, 175, 0.15)",
1075
+ backgroundSecondary: "#22252a",
1076
+ backgroundTertiary: "#2d3134",
1077
+ backgroundLight: "rgba(156, 163, 175, 0.05)",
1078
+ backgroundHover: "rgba(156, 163, 175, 0.1)",
1079
+ surface: "#1f2124",
1080
+ textSecondary: "#e5e7eb",
1081
+ textTertiary: "#6b7280",
1082
+ textMuted: "#4b5563",
1083
+ highlightBg: "rgba(245, 158, 11, 0.25)",
1084
+ highlightBorder: "rgba(245, 158, 11, 0.5)"
1085
+ },
1086
+ buttons: {
1087
+ primary: {
1088
+ color: "#1a1c1e",
1089
+ bg: "primary",
1090
+ borderWidth: 0,
1091
+ "&:hover": {
1092
+ bg: "#9ca3af"
1093
+ }
1094
+ },
1095
+ secondary: {
1096
+ color: "#e5e7eb",
1097
+ bg: "secondary",
1098
+ borderWidth: 0,
1099
+ "&:hover": {
1100
+ bg: "#4b5563"
1101
+ }
1102
+ },
1103
+ ghost: {
1104
+ color: "textSecondary",
1105
+ bg: "transparent",
1106
+ "&:hover": {
1107
+ bg: "backgroundHover"
1108
+ }
1109
+ }
1110
+ },
1111
+ text: {
1112
+ heading: {
1113
+ fontFamily: "heading",
1114
+ fontWeight: "heading",
1115
+ lineHeight: "heading",
1116
+ color: "textSecondary"
1117
+ },
1118
+ body: {
1119
+ fontFamily: "body",
1120
+ fontWeight: "body",
1121
+ lineHeight: "body"
1122
+ },
1123
+ caption: {
1124
+ fontSize: 1,
1125
+ color: "textTertiary"
1126
+ }
1127
+ },
1128
+ cards: {
1129
+ primary: {
1130
+ bg: "surface",
1131
+ border: "1px solid",
1132
+ borderColor: "border",
1133
+ borderRadius: 3
1134
+ },
1135
+ secondary: {
1136
+ bg: "backgroundSecondary",
1137
+ border: "1px solid",
1138
+ borderColor: "border",
1139
+ borderRadius: 3
143
1140
  }
144
1141
  }
145
1142
  };
@@ -314,6 +1311,14 @@ const createLucideIcon = (iconName, iconNode) => {
314
1311
  Component.displayName = toPascalCase(iconName);
315
1312
  return Component;
316
1313
  };
1314
+ /**
1315
+ * @license lucide-react v0.552.0 - ISC
1316
+ *
1317
+ * This source code is licensed under the ISC license.
1318
+ * See the LICENSE file in the root directory of this source tree.
1319
+ */
1320
+ const __iconNode$3 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
1321
+ const ChevronDown = createLucideIcon("chevron-down", __iconNode$3);
317
1322
  /**
318
1323
  * @license lucide-react v0.552.0 - ISC
319
1324
  *
@@ -679,6 +1684,18 @@ const ColorPickerInput = ({
679
1684
  }
680
1685
  );
681
1686
  };
1687
+ const THEME_PRESETS = [
1688
+ { name: "terminal", label: "Terminal", theme: terminalTheme },
1689
+ { name: "regal", label: "Regal", theme: regalTheme },
1690
+ { name: "matrix", label: "Matrix", theme: matrixTheme },
1691
+ { name: "matrixMinimal", label: "Matrix Minimal", theme: matrixMinimalTheme },
1692
+ { name: "slate", label: "Slate", theme: slateTheme },
1693
+ { name: "markdown", label: "Markdown", theme: defaultMarkdownTheme },
1694
+ { name: "editor", label: "Editor", theme: defaultEditorTheme },
1695
+ { name: "terminalDefault", label: "Terminal Default", theme: defaultTerminalTheme },
1696
+ { name: "landingPage", label: "Landing Page", theme: landingPageTheme },
1697
+ { name: "landingPageLight", label: "Landing Light", theme: landingPageLightTheme }
1698
+ ];
682
1699
  const HelpContent = () => {
683
1700
  const { theme: theme2 } = useTheme();
684
1701
  return /* @__PURE__ */ jsxs(
@@ -779,9 +1796,28 @@ const COLOR_GROUPS = {
779
1796
  { label: "Info", path: "colors.info" }
780
1797
  ]
781
1798
  };
782
- const ThemeEditorPanelContent = () => {
1799
+ const ThemeEditorPanelContent = ({
1800
+ selectedPreset,
1801
+ onPresetSelect
1802
+ }) => {
1803
+ var _a;
783
1804
  const { theme: theme2 } = useTheme();
784
1805
  const [showHelp, setShowHelp] = useState(false);
1806
+ const [presetDropdownOpen, setPresetDropdownOpen] = useState(false);
1807
+ const presetDropdownRef = useRef(null);
1808
+ useEffect(() => {
1809
+ const handleClickOutside = (event) => {
1810
+ if (presetDropdownRef.current && !presetDropdownRef.current.contains(event.target)) {
1811
+ setPresetDropdownOpen(false);
1812
+ }
1813
+ };
1814
+ document.addEventListener("mousedown", handleClickOutside);
1815
+ return () => document.removeEventListener("mousedown", handleClickOutside);
1816
+ }, []);
1817
+ const handlePresetSelect = (presetName) => {
1818
+ setPresetDropdownOpen(false);
1819
+ onPresetSelect(presetName);
1820
+ };
785
1821
  const handleColorChange = async (path, newValue) => {
786
1822
  console.log(`Update ${path} to ${newValue}`);
787
1823
  };
@@ -837,36 +1873,172 @@ const ThemeEditorPanelContent = () => {
837
1873
  }
838
1874
  )
839
1875
  ] }),
840
- /* @__PURE__ */ jsx(
841
- "button",
842
- {
843
- onClick: () => setShowHelp(!showHelp),
844
- title: "Help",
845
- style: {
846
- padding: "8px",
847
- borderRadius: "6px",
848
- border: `1px solid ${theme2.colors.border}`,
849
- backgroundColor: showHelp ? theme2.colors.backgroundSecondary : theme2.colors.background,
850
- color: theme2.colors.text,
851
- cursor: "pointer",
852
- display: "flex",
853
- alignItems: "center",
854
- justifyContent: "center",
855
- transition: "all 0.15s"
856
- },
857
- onMouseEnter: (e) => {
858
- if (!showHelp) {
859
- e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
1876
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1877
+ /* @__PURE__ */ jsxs("div", { ref: presetDropdownRef, style: { position: "relative" }, children: [
1878
+ /* @__PURE__ */ jsxs(
1879
+ "button",
1880
+ {
1881
+ onClick: () => setPresetDropdownOpen(!presetDropdownOpen),
1882
+ style: {
1883
+ padding: "8px 12px",
1884
+ borderRadius: "6px",
1885
+ border: `1px solid ${theme2.colors.border}`,
1886
+ backgroundColor: presetDropdownOpen ? theme2.colors.backgroundSecondary : theme2.colors.background,
1887
+ color: theme2.colors.text,
1888
+ cursor: "pointer",
1889
+ display: "flex",
1890
+ alignItems: "center",
1891
+ gap: "8px",
1892
+ fontSize: theme2.fontSizes[1],
1893
+ fontFamily: theme2.fonts.body,
1894
+ transition: "all 0.15s",
1895
+ minWidth: "140px",
1896
+ justifyContent: "space-between"
1897
+ },
1898
+ onMouseEnter: (e) => {
1899
+ if (!presetDropdownOpen) {
1900
+ e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
1901
+ }
1902
+ },
1903
+ onMouseLeave: (e) => {
1904
+ if (!presetDropdownOpen) {
1905
+ e.currentTarget.style.backgroundColor = theme2.colors.background;
1906
+ }
1907
+ },
1908
+ children: [
1909
+ /* @__PURE__ */ jsx("span", { children: ((_a = THEME_PRESETS.find((p2) => p2.name === selectedPreset)) == null ? void 0 : _a.label) || "Select Preset" }),
1910
+ /* @__PURE__ */ jsx(
1911
+ ChevronDown,
1912
+ {
1913
+ size: 16,
1914
+ style: {
1915
+ transform: presetDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
1916
+ transition: "transform 0.15s"
1917
+ }
1918
+ }
1919
+ )
1920
+ ]
860
1921
  }
861
- },
862
- onMouseLeave: (e) => {
863
- if (!showHelp) {
864
- e.currentTarget.style.backgroundColor = theme2.colors.background;
1922
+ ),
1923
+ presetDropdownOpen && /* @__PURE__ */ jsx(
1924
+ "div",
1925
+ {
1926
+ style: {
1927
+ position: "absolute",
1928
+ top: "100%",
1929
+ right: 0,
1930
+ marginTop: "4px",
1931
+ backgroundColor: theme2.colors.background,
1932
+ border: `1px solid ${theme2.colors.border}`,
1933
+ borderRadius: "6px",
1934
+ boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
1935
+ zIndex: 1e3,
1936
+ minWidth: "160px",
1937
+ overflow: "hidden"
1938
+ },
1939
+ children: THEME_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
1940
+ "button",
1941
+ {
1942
+ onClick: () => handlePresetSelect(preset.name),
1943
+ style: {
1944
+ width: "100%",
1945
+ padding: "10px 14px",
1946
+ border: "none",
1947
+ backgroundColor: selectedPreset === preset.name ? theme2.colors.backgroundSecondary : "transparent",
1948
+ color: theme2.colors.text,
1949
+ cursor: "pointer",
1950
+ textAlign: "left",
1951
+ fontSize: theme2.fontSizes[1],
1952
+ fontFamily: theme2.fonts.body,
1953
+ display: "flex",
1954
+ alignItems: "center",
1955
+ gap: "10px",
1956
+ transition: "background-color 0.1s"
1957
+ },
1958
+ onMouseEnter: (e) => {
1959
+ e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
1960
+ },
1961
+ onMouseLeave: (e) => {
1962
+ e.currentTarget.style.backgroundColor = selectedPreset === preset.name ? theme2.colors.backgroundSecondary : "transparent";
1963
+ },
1964
+ children: [
1965
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "3px" }, children: [
1966
+ /* @__PURE__ */ jsx(
1967
+ "span",
1968
+ {
1969
+ style: {
1970
+ width: "10px",
1971
+ height: "10px",
1972
+ borderRadius: "50%",
1973
+ backgroundColor: preset.theme.colors.primary,
1974
+ border: `1px solid ${theme2.colors.border}`
1975
+ }
1976
+ }
1977
+ ),
1978
+ /* @__PURE__ */ jsx(
1979
+ "span",
1980
+ {
1981
+ style: {
1982
+ width: "10px",
1983
+ height: "10px",
1984
+ borderRadius: "50%",
1985
+ backgroundColor: preset.theme.colors.background,
1986
+ border: `1px solid ${theme2.colors.border}`
1987
+ }
1988
+ }
1989
+ ),
1990
+ /* @__PURE__ */ jsx(
1991
+ "span",
1992
+ {
1993
+ style: {
1994
+ width: "10px",
1995
+ height: "10px",
1996
+ borderRadius: "50%",
1997
+ backgroundColor: preset.theme.colors.accent,
1998
+ border: `1px solid ${theme2.colors.border}`
1999
+ }
2000
+ }
2001
+ )
2002
+ ] }),
2003
+ /* @__PURE__ */ jsx("span", { children: preset.label })
2004
+ ]
2005
+ },
2006
+ preset.name
2007
+ ))
865
2008
  }
866
- },
867
- children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 18 })
868
- }
869
- )
2009
+ )
2010
+ ] }),
2011
+ /* @__PURE__ */ jsx(
2012
+ "button",
2013
+ {
2014
+ onClick: () => setShowHelp(!showHelp),
2015
+ title: "Help",
2016
+ style: {
2017
+ padding: "8px",
2018
+ borderRadius: "6px",
2019
+ border: `1px solid ${theme2.colors.border}`,
2020
+ backgroundColor: showHelp ? theme2.colors.backgroundSecondary : theme2.colors.background,
2021
+ color: theme2.colors.text,
2022
+ cursor: "pointer",
2023
+ display: "flex",
2024
+ alignItems: "center",
2025
+ justifyContent: "center",
2026
+ transition: "all 0.15s"
2027
+ },
2028
+ onMouseEnter: (e) => {
2029
+ if (!showHelp) {
2030
+ e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
2031
+ }
2032
+ },
2033
+ onMouseLeave: (e) => {
2034
+ if (!showHelp) {
2035
+ e.currentTarget.style.backgroundColor = theme2.colors.background;
2036
+ }
2037
+ },
2038
+ children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 18 })
2039
+ }
2040
+ )
2041
+ ] })
870
2042
  ] })
871
2043
  }
872
2044
  ),
@@ -929,7 +2101,17 @@ const ThemeEditorPanelContent = () => {
929
2101
  );
930
2102
  };
931
2103
  const ThemeEditorPanel = (props) => {
932
- return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ThemeEditorPanelContent, { ...props }) });
2104
+ var _a;
2105
+ const [selectedPreset, setSelectedPreset] = useState("terminal");
2106
+ const currentTheme = ((_a = THEME_PRESETS.find((p2) => p2.name === selectedPreset)) == null ? void 0 : _a.theme) ?? terminalTheme;
2107
+ return /* @__PURE__ */ jsx(ThemeProvider, { theme: currentTheme, children: /* @__PURE__ */ jsx(
2108
+ ThemeEditorPanelContent,
2109
+ {
2110
+ ...props,
2111
+ selectedPreset,
2112
+ onPresetSelect: setSelectedPreset
2113
+ }
2114
+ ) });
933
2115
  };
934
2116
  const setThemeColorTool = {
935
2117
  name: "set_theme_color",