@huydao/karrot 0.1.5 → 0.1.7

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.
@@ -0,0 +1,698 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --bg: #fbfaf7;
4
+ --surface: #ffffff;
5
+ --surface-soft: #f5f3ee;
6
+ --text: #17231f;
7
+ --muted: #5e6965;
8
+ --muted-strong: #3c4743;
9
+ --line: #e3ded4;
10
+ --line-strong: #cfc7ba;
11
+ --green: #12352b;
12
+ --green-2: #1f6a50;
13
+ --orange: #f28c38;
14
+ --orange-soft: #fff0df;
15
+ --code: #101915;
16
+ --code-text: #e9f5ed;
17
+ --shadow: 0 20px 50px rgba(23, 35, 31, 0.09);
18
+ --radius: 8px;
19
+ --header-height: 68px;
20
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
21
+ }
22
+
23
+ * {
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ html {
28
+ scroll-behavior: smooth;
29
+ scroll-padding-top: calc(var(--header-height) + 22px);
30
+ }
31
+
32
+ body {
33
+ margin: 0;
34
+ background: var(--bg);
35
+ color: var(--text);
36
+ font-size: 16px;
37
+ line-height: 1.6;
38
+ }
39
+
40
+ a {
41
+ color: inherit;
42
+ text-decoration: none;
43
+ }
44
+
45
+ img,
46
+ svg {
47
+ display: block;
48
+ }
49
+
50
+ .site-header {
51
+ position: sticky;
52
+ top: 0;
53
+ z-index: 40;
54
+ height: var(--header-height);
55
+ border-bottom: 1px solid rgba(227, 222, 212, 0.9);
56
+ background: rgba(251, 250, 247, 0.92);
57
+ backdrop-filter: blur(18px);
58
+ }
59
+
60
+ .site-header__inner {
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: space-between;
64
+ width: min(1180px, calc(100% - 40px));
65
+ height: 100%;
66
+ margin: 0 auto;
67
+ gap: 18px;
68
+ }
69
+
70
+ .brand {
71
+ display: inline-flex;
72
+ align-items: center;
73
+ gap: 10px;
74
+ font-weight: 760;
75
+ letter-spacing: 0;
76
+ }
77
+
78
+ .brand img {
79
+ width: 34px;
80
+ height: 34px;
81
+ border-radius: 8px;
82
+ }
83
+
84
+ .brand small {
85
+ display: block;
86
+ margin-top: -4px;
87
+ color: var(--muted);
88
+ font-size: 11px;
89
+ font-weight: 650;
90
+ text-transform: uppercase;
91
+ }
92
+
93
+ .top-nav {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 8px;
97
+ color: var(--muted-strong);
98
+ font-size: 14px;
99
+ font-weight: 650;
100
+ }
101
+
102
+ .top-nav a,
103
+ .mobile-nav-toggle {
104
+ display: inline-flex;
105
+ align-items: center;
106
+ min-height: 36px;
107
+ padding: 7px 10px;
108
+ border-radius: var(--radius);
109
+ }
110
+
111
+ .top-nav a:hover,
112
+ .top-nav a.is-active,
113
+ .mobile-nav-toggle:hover {
114
+ background: var(--surface-soft);
115
+ color: var(--text);
116
+ }
117
+
118
+ .mobile-nav-toggle {
119
+ display: none;
120
+ border: 1px solid var(--line);
121
+ background: var(--surface);
122
+ color: var(--text);
123
+ font: inherit;
124
+ cursor: pointer;
125
+ }
126
+
127
+ .hero {
128
+ width: min(1180px, calc(100% - 40px));
129
+ margin: 0 auto;
130
+ padding: 72px 0 48px;
131
+ }
132
+
133
+ .hero-grid {
134
+ display: grid;
135
+ grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
136
+ gap: 48px;
137
+ align-items: center;
138
+ }
139
+
140
+ .eyebrow {
141
+ display: inline-flex;
142
+ align-items: center;
143
+ gap: 8px;
144
+ color: var(--green-2);
145
+ font-size: 13px;
146
+ font-weight: 760;
147
+ text-transform: uppercase;
148
+ }
149
+
150
+ .eyebrow::before {
151
+ width: 8px;
152
+ height: 8px;
153
+ border-radius: 999px;
154
+ background: var(--orange);
155
+ content: "";
156
+ }
157
+
158
+ h1,
159
+ h2,
160
+ h3 {
161
+ margin: 0;
162
+ color: var(--text);
163
+ line-height: 1.08;
164
+ letter-spacing: 0;
165
+ }
166
+
167
+ h1 {
168
+ max-width: 780px;
169
+ margin-top: 16px;
170
+ font-size: clamp(42px, 6vw, 76px);
171
+ }
172
+
173
+ h2 {
174
+ font-size: 32px;
175
+ }
176
+
177
+ h3 {
178
+ font-size: 20px;
179
+ }
180
+
181
+ p {
182
+ margin: 0;
183
+ }
184
+
185
+ .lead {
186
+ max-width: 710px;
187
+ margin-top: 22px;
188
+ color: var(--muted-strong);
189
+ font-size: 20px;
190
+ }
191
+
192
+ .hero-actions {
193
+ display: flex;
194
+ flex-wrap: wrap;
195
+ gap: 12px;
196
+ margin-top: 32px;
197
+ }
198
+
199
+ .button {
200
+ display: inline-flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ min-height: 44px;
204
+ padding: 10px 16px;
205
+ border: 1px solid var(--line-strong);
206
+ border-radius: var(--radius);
207
+ background: var(--surface);
208
+ color: var(--text);
209
+ font-weight: 760;
210
+ }
211
+
212
+ .button:hover {
213
+ border-color: var(--green-2);
214
+ box-shadow: 0 8px 24px rgba(23, 35, 31, 0.09);
215
+ }
216
+
217
+ .button--primary {
218
+ border-color: var(--green);
219
+ background: var(--green);
220
+ color: #fffdf8;
221
+ }
222
+
223
+ .button--primary:hover {
224
+ background: #1a4437;
225
+ }
226
+
227
+ .hero-panel {
228
+ overflow: hidden;
229
+ border: 1px solid var(--line);
230
+ border-radius: 12px;
231
+ background: var(--surface);
232
+ box-shadow: var(--shadow);
233
+ }
234
+
235
+ .panel-bar {
236
+ display: flex;
237
+ align-items: center;
238
+ gap: 6px;
239
+ padding: 14px 16px;
240
+ border-bottom: 1px solid var(--line);
241
+ background: var(--surface-soft);
242
+ }
243
+
244
+ .dot {
245
+ width: 10px;
246
+ height: 10px;
247
+ border-radius: 999px;
248
+ background: var(--line-strong);
249
+ }
250
+
251
+ .dot:nth-child(1) {
252
+ background: #ec6a5e;
253
+ }
254
+
255
+ .dot:nth-child(2) {
256
+ background: #f3bd4f;
257
+ }
258
+
259
+ .dot:nth-child(3) {
260
+ background: #61c554;
261
+ }
262
+
263
+ .terminal {
264
+ padding: 20px;
265
+ background: var(--code);
266
+ color: var(--code-text);
267
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
268
+ font-size: 13px;
269
+ line-height: 1.65;
270
+ overflow-x: auto;
271
+ }
272
+
273
+ .terminal .muted {
274
+ color: #92a79b;
275
+ }
276
+
277
+ .section {
278
+ width: min(1180px, calc(100% - 40px));
279
+ margin: 0 auto;
280
+ padding: 50px 0;
281
+ }
282
+
283
+ .section-header {
284
+ display: flex;
285
+ align-items: end;
286
+ justify-content: space-between;
287
+ gap: 24px;
288
+ margin-bottom: 22px;
289
+ }
290
+
291
+ .section-header p {
292
+ max-width: 620px;
293
+ color: var(--muted);
294
+ }
295
+
296
+ .feature-grid {
297
+ display: grid;
298
+ grid-template-columns: repeat(3, minmax(0, 1fr));
299
+ gap: 14px;
300
+ }
301
+
302
+ .feature-card,
303
+ .quick-card,
304
+ .callout {
305
+ min-width: 0;
306
+ border: 1px solid var(--line);
307
+ border-radius: var(--radius);
308
+ background: var(--surface);
309
+ }
310
+
311
+ .feature-card {
312
+ min-height: 180px;
313
+ padding: 22px;
314
+ }
315
+
316
+ .feature-card span {
317
+ display: inline-flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+ width: 34px;
321
+ height: 34px;
322
+ margin-bottom: 18px;
323
+ border-radius: var(--radius);
324
+ background: var(--orange-soft);
325
+ color: var(--green);
326
+ font-weight: 800;
327
+ }
328
+
329
+ .feature-card p {
330
+ margin-top: 10px;
331
+ color: var(--muted);
332
+ }
333
+
334
+ .quick-grid {
335
+ display: grid;
336
+ grid-template-columns: 0.9fr 1.1fr;
337
+ gap: 18px;
338
+ }
339
+
340
+ .feature-grid > *,
341
+ .quick-grid > * {
342
+ min-width: 0;
343
+ }
344
+
345
+ .quick-card {
346
+ padding: 24px;
347
+ }
348
+
349
+ .quick-card p {
350
+ margin-top: 10px;
351
+ color: var(--muted);
352
+ }
353
+
354
+ .footer {
355
+ margin-top: 36px;
356
+ border-top: 1px solid var(--line);
357
+ background: var(--surface);
358
+ }
359
+
360
+ .footer__inner {
361
+ display: flex;
362
+ justify-content: space-between;
363
+ gap: 18px;
364
+ width: min(1180px, calc(100% - 40px));
365
+ margin: 0 auto;
366
+ padding: 30px 0;
367
+ color: var(--muted);
368
+ font-size: 14px;
369
+ }
370
+
371
+ .footer a {
372
+ color: var(--green-2);
373
+ font-weight: 700;
374
+ }
375
+
376
+ .docs-shell {
377
+ display: grid;
378
+ grid-template-columns: 260px minmax(0, 1fr) 220px;
379
+ gap: 32px;
380
+ width: min(1320px, calc(100% - 40px));
381
+ margin: 0 auto;
382
+ }
383
+
384
+ .docs-sidebar,
385
+ .docs-toc {
386
+ position: sticky;
387
+ top: calc(var(--header-height) + 18px);
388
+ height: calc(100vh - var(--header-height) - 32px);
389
+ overflow: auto;
390
+ }
391
+
392
+ .docs-sidebar {
393
+ padding: 24px 0 30px;
394
+ border-right: 1px solid var(--line);
395
+ }
396
+
397
+ .docs-sidebar__title,
398
+ .toc-title {
399
+ margin-bottom: 12px;
400
+ color: var(--muted);
401
+ font-size: 12px;
402
+ font-weight: 800;
403
+ text-transform: uppercase;
404
+ }
405
+
406
+ .sidebar-group {
407
+ margin-bottom: 22px;
408
+ }
409
+
410
+ .sidebar-group strong {
411
+ display: block;
412
+ margin-bottom: 6px;
413
+ color: var(--text);
414
+ font-size: 13px;
415
+ }
416
+
417
+ .sidebar-group a,
418
+ .toc-list a {
419
+ display: block;
420
+ border-radius: var(--radius);
421
+ color: var(--muted-strong);
422
+ font-size: 14px;
423
+ }
424
+
425
+ .sidebar-group a {
426
+ margin-right: 16px;
427
+ padding: 6px 10px;
428
+ }
429
+
430
+ .sidebar-group a:hover,
431
+ .sidebar-group a.is-active,
432
+ .toc-list a:hover,
433
+ .toc-list a.is-active {
434
+ background: var(--surface-soft);
435
+ color: var(--green-2);
436
+ }
437
+
438
+ .docs-content {
439
+ min-width: 0;
440
+ padding: 42px 0 80px;
441
+ }
442
+
443
+ .docs-hero {
444
+ padding-bottom: 28px;
445
+ border-bottom: 1px solid var(--line);
446
+ }
447
+
448
+ .docs-hero h1 {
449
+ max-width: 850px;
450
+ font-size: clamp(38px, 4vw, 58px);
451
+ }
452
+
453
+ .docs-hero p {
454
+ max-width: 760px;
455
+ margin-top: 16px;
456
+ color: var(--muted-strong);
457
+ font-size: 19px;
458
+ }
459
+
460
+ .docs-content section {
461
+ padding: 38px 0;
462
+ border-bottom: 1px solid var(--line);
463
+ }
464
+
465
+ .docs-content section:last-child {
466
+ border-bottom: 0;
467
+ }
468
+
469
+ .docs-content h2 {
470
+ position: relative;
471
+ margin-bottom: 14px;
472
+ }
473
+
474
+ .docs-content h3 {
475
+ margin: 28px 0 10px;
476
+ }
477
+
478
+ .docs-content p,
479
+ .docs-content li {
480
+ color: var(--muted-strong);
481
+ }
482
+
483
+ .docs-content ul,
484
+ .docs-content ol {
485
+ padding-left: 22px;
486
+ }
487
+
488
+ .docs-content li + li {
489
+ margin-top: 6px;
490
+ }
491
+
492
+ .heading-anchor {
493
+ margin-left: 8px;
494
+ color: var(--line-strong);
495
+ font-size: 0.72em;
496
+ opacity: 0;
497
+ }
498
+
499
+ h2:hover .heading-anchor,
500
+ h3:hover .heading-anchor {
501
+ opacity: 1;
502
+ }
503
+
504
+ .callout {
505
+ margin: 20px 0;
506
+ padding: 16px 18px;
507
+ border-left: 4px solid var(--orange);
508
+ }
509
+
510
+ .callout strong {
511
+ display: block;
512
+ margin-bottom: 4px;
513
+ }
514
+
515
+ .callout p {
516
+ color: var(--muted-strong);
517
+ }
518
+
519
+ .code-block {
520
+ position: relative;
521
+ max-width: 100%;
522
+ min-width: 0;
523
+ margin: 18px 0;
524
+ }
525
+
526
+ pre {
527
+ max-width: 100%;
528
+ margin: 0;
529
+ padding: 18px;
530
+ overflow-x: auto;
531
+ border-radius: var(--radius);
532
+ background: var(--code);
533
+ color: var(--code-text);
534
+ font-size: 13px;
535
+ line-height: 1.6;
536
+ }
537
+
538
+ code {
539
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
540
+ }
541
+
542
+ :not(pre) > code {
543
+ padding: 2px 5px;
544
+ border-radius: 5px;
545
+ background: var(--surface-soft);
546
+ color: var(--green);
547
+ font-size: 0.92em;
548
+ }
549
+
550
+ .copy-button {
551
+ position: absolute;
552
+ top: 10px;
553
+ right: 10px;
554
+ z-index: 2;
555
+ border: 1px solid rgba(255, 255, 255, 0.18);
556
+ border-radius: 6px;
557
+ background: rgba(255, 255, 255, 0.1);
558
+ color: #fff;
559
+ cursor: pointer;
560
+ font: inherit;
561
+ font-size: 12px;
562
+ font-weight: 760;
563
+ padding: 5px 8px;
564
+ }
565
+
566
+ .copy-button:hover {
567
+ background: rgba(255, 255, 255, 0.18);
568
+ }
569
+
570
+ .docs-toc {
571
+ padding: 42px 0 30px;
572
+ }
573
+
574
+ .toc-list {
575
+ margin: 0;
576
+ padding: 0;
577
+ list-style: none;
578
+ }
579
+
580
+ .toc-list a {
581
+ padding: 6px 8px;
582
+ }
583
+
584
+ .sidebar-backdrop {
585
+ display: none;
586
+ }
587
+
588
+ @media (max-width: 1080px) {
589
+ .hero-grid,
590
+ .quick-grid {
591
+ grid-template-columns: 1fr;
592
+ }
593
+
594
+ .feature-grid {
595
+ grid-template-columns: repeat(2, minmax(0, 1fr));
596
+ }
597
+
598
+ .docs-shell {
599
+ grid-template-columns: 240px minmax(0, 1fr);
600
+ }
601
+
602
+ .docs-toc {
603
+ display: none;
604
+ }
605
+ }
606
+
607
+ @media (max-width: 760px) {
608
+ :root {
609
+ --header-height: 62px;
610
+ }
611
+
612
+ .site-header__inner,
613
+ .hero,
614
+ .section,
615
+ .footer__inner,
616
+ .docs-shell {
617
+ width: min(100% - 28px, 1180px);
618
+ }
619
+
620
+ .top-nav {
621
+ display: none;
622
+ }
623
+
624
+ .mobile-nav-toggle {
625
+ display: inline-flex;
626
+ }
627
+
628
+ .hero {
629
+ padding: 46px 0 28px;
630
+ }
631
+
632
+ h1 {
633
+ font-size: 42px;
634
+ }
635
+
636
+ .lead {
637
+ font-size: 18px;
638
+ }
639
+
640
+ .feature-grid {
641
+ grid-template-columns: 1fr;
642
+ }
643
+
644
+ .section-header {
645
+ align-items: start;
646
+ flex-direction: column;
647
+ }
648
+
649
+ .footer__inner {
650
+ flex-direction: column;
651
+ }
652
+
653
+ .docs-shell {
654
+ display: block;
655
+ }
656
+
657
+ .docs-sidebar {
658
+ position: fixed;
659
+ inset: var(--header-height) auto 0 0;
660
+ z-index: 50;
661
+ width: min(86vw, 320px);
662
+ height: auto;
663
+ padding: 22px 18px 40px;
664
+ border-right: 1px solid var(--line);
665
+ background: var(--surface);
666
+ box-shadow: var(--shadow);
667
+ transform: translateX(-105%);
668
+ transition: transform 180ms ease;
669
+ }
670
+
671
+ .nav-open .docs-sidebar {
672
+ transform: translateX(0);
673
+ }
674
+
675
+ .sidebar-backdrop {
676
+ position: fixed;
677
+ inset: var(--header-height) 0 0;
678
+ z-index: 45;
679
+ display: none;
680
+ background: rgba(18, 53, 43, 0.24);
681
+ }
682
+
683
+ .nav-open .sidebar-backdrop {
684
+ display: block;
685
+ }
686
+
687
+ .docs-content {
688
+ padding-top: 32px;
689
+ }
690
+
691
+ .docs-hero h1 {
692
+ font-size: 38px;
693
+ }
694
+
695
+ pre {
696
+ padding-top: 42px;
697
+ }
698
+ }
package/site/check.js ADDED
@@ -0,0 +1,43 @@
1
+ const fs = require('node:fs');
2
+ const path = require('node:path');
3
+
4
+ const root = __dirname;
5
+ const requiredFiles = [
6
+ 'index.html',
7
+ 'docs/index.html',
8
+ 'assets/styles.css',
9
+ 'assets/app.js',
10
+ 'assets/karrot-mark.svg',
11
+ ];
12
+
13
+ const failures = [];
14
+
15
+ for (const file of requiredFiles) {
16
+ const filePath = path.join(root, file);
17
+
18
+ if (!fs.existsSync(filePath)) {
19
+ failures.push(`Missing ${file}`);
20
+ }
21
+ }
22
+
23
+ const landing = fs.readFileSync(path.join(root, 'index.html'), 'utf8');
24
+ const docs = fs.readFileSync(path.join(root, 'docs/index.html'), 'utf8');
25
+
26
+ [
27
+ ['landing docs link', landing.includes('href="docs/index.html"')],
28
+ ['docs stylesheet link', docs.includes('href="../assets/styles.css"')],
29
+ ['docs toc target', docs.includes('data-toc')],
30
+ ['existing session docs', docs.includes('initialThreadId')],
31
+ ['adapter import', docs.includes("@huydao/karrot/adapters/ag-ui")],
32
+ ].forEach(([label, passed]) => {
33
+ if (!passed) {
34
+ failures.push(`Failed check: ${label}`);
35
+ }
36
+ });
37
+
38
+ if (failures.length > 0) {
39
+ console.error(failures.join('\n'));
40
+ process.exitCode = 1;
41
+ } else {
42
+ console.log('Karrot static site check passed.');
43
+ }