threadnote 0.7.8 → 0.7.9

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,858 @@
1
+ :root {
2
+ color-scheme: dark;
3
+ --bg: #0a0a0d;
4
+ --panel: #14141a;
5
+ --panel-alt: #1c1c24;
6
+ --line: #2a2a35;
7
+ --text: #ececf1;
8
+ --muted: #8a8a96;
9
+ --dim: #5c5c68;
10
+ --accent: #5ee0c5;
11
+ --accent-soft: rgba(94, 224, 197, 0.12);
12
+ --accent-line: rgba(94, 224, 197, 0.35);
13
+ --warn: #ffb86b;
14
+ --warn-soft: rgba(255, 184, 107, 0.14);
15
+ --danger: #ff7a7a;
16
+ --danger-soft: rgba(255, 122, 122, 0.14);
17
+ --ok: #6ee7b7;
18
+ --ok-soft: rgba(110, 231, 183, 0.14);
19
+ --code-bg: #101019;
20
+ --radius: 8px;
21
+ font-family:
22
+ Inter,
23
+ ui-sans-serif,
24
+ system-ui,
25
+ -apple-system,
26
+ BlinkMacSystemFont,
27
+ 'Segoe UI',
28
+ sans-serif;
29
+ }
30
+
31
+ * {
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ html,
36
+ body,
37
+ #root {
38
+ min-height: 100%;
39
+ }
40
+
41
+ body {
42
+ margin: 0;
43
+ background:
44
+ radial-gradient(circle at 18vw 16vh, rgba(94, 224, 197, 0.08), transparent 34rem),
45
+ radial-gradient(circle at 86vw 80vh, rgba(124, 140, 255, 0.06), transparent 38rem), var(--bg);
46
+ background-attachment: fixed;
47
+ background-repeat: no-repeat;
48
+ background-size: 100vw 100vh;
49
+ color: var(--text);
50
+ min-height: 100vh;
51
+ }
52
+
53
+ button,
54
+ input,
55
+ select,
56
+ textarea {
57
+ font: inherit;
58
+ }
59
+
60
+ button {
61
+ border: 1px solid var(--line);
62
+ border-radius: 6px;
63
+ background: var(--panel-alt);
64
+ color: var(--text);
65
+ cursor: pointer;
66
+ line-height: 1.35;
67
+ min-height: 34px;
68
+ padding: 7px 12px;
69
+ }
70
+
71
+ button:hover {
72
+ border-color: var(--accent-line);
73
+ }
74
+
75
+ button:disabled {
76
+ color: var(--muted);
77
+ cursor: not-allowed;
78
+ opacity: 0.65;
79
+ }
80
+
81
+ button.danger {
82
+ background: var(--danger-soft);
83
+ border-color: rgba(255, 122, 122, 0.34);
84
+ color: var(--danger);
85
+ }
86
+
87
+ input,
88
+ select,
89
+ textarea {
90
+ border: 1px solid var(--line);
91
+ border-radius: 6px;
92
+ background: var(--code-bg);
93
+ color: var(--text);
94
+ line-height: 1.35;
95
+ min-height: 34px;
96
+ padding: 8px 12px;
97
+ width: 100%;
98
+ }
99
+
100
+ textarea {
101
+ line-height: 1.45;
102
+ resize: none;
103
+ }
104
+
105
+ .app {
106
+ display: grid;
107
+ grid-template-columns: var(--sidebar-width, 340px) 10px minmax(0, 1fr);
108
+ height: 100dvh;
109
+ min-height: 0;
110
+ overflow: hidden;
111
+ }
112
+
113
+ .sidebar {
114
+ background: rgba(20, 20, 26, 0.94);
115
+ display: grid;
116
+ grid-template-rows: auto auto auto minmax(0, 1fr);
117
+ min-height: 0;
118
+ min-width: 0;
119
+ overflow: hidden;
120
+ padding: 16px;
121
+ }
122
+
123
+ .sidebar-resizer {
124
+ background: rgba(20, 20, 26, 0.7);
125
+ border-left: 1px solid var(--line);
126
+ border-right: 1px solid var(--line);
127
+ cursor: col-resize;
128
+ min-width: 0;
129
+ position: relative;
130
+ }
131
+
132
+ .sidebar-resizer::before {
133
+ background: var(--dim);
134
+ border-radius: 999px;
135
+ content: '';
136
+ height: 58px;
137
+ left: 50%;
138
+ opacity: 0.55;
139
+ position: absolute;
140
+ top: 50%;
141
+ transform: translate(-50%, -50%);
142
+ transition:
143
+ background 120ms ease,
144
+ opacity 120ms ease;
145
+ width: 2px;
146
+ }
147
+
148
+ .sidebar-resizer:hover::before,
149
+ .sidebar-resizer:focus-visible::before {
150
+ background: var(--accent);
151
+ opacity: 1;
152
+ }
153
+
154
+ .sidebar-resizer:focus-visible {
155
+ outline: 2px solid var(--accent-line);
156
+ outline-offset: -2px;
157
+ }
158
+
159
+ body.is-resizing-sidebar {
160
+ cursor: col-resize;
161
+ user-select: none;
162
+ }
163
+
164
+ body.is-resizing-sidebar * {
165
+ cursor: col-resize !important;
166
+ }
167
+
168
+ .brand,
169
+ .topbar,
170
+ .pane-head,
171
+ .action-row,
172
+ .field-row,
173
+ .search-row,
174
+ .check-row,
175
+ .selection-bar {
176
+ align-items: center;
177
+ display: flex;
178
+ gap: 8px;
179
+ }
180
+
181
+ .select-row {
182
+ align-items: flex-start;
183
+ }
184
+
185
+ .brand {
186
+ justify-content: space-between;
187
+ margin-bottom: 14px;
188
+ }
189
+
190
+ .brand-title {
191
+ align-items: center;
192
+ display: flex;
193
+ gap: 10px;
194
+ min-width: 0;
195
+ }
196
+
197
+ .brand-logo {
198
+ flex: 0 0 auto;
199
+ height: 42px;
200
+ object-fit: contain;
201
+ width: 42px;
202
+ }
203
+
204
+ .brand h1,
205
+ .pane-head h2,
206
+ .form-pane h3,
207
+ .inspector h3,
208
+ .tools h2 {
209
+ letter-spacing: 0;
210
+ margin: 0;
211
+ }
212
+
213
+ .brand h1 {
214
+ font-size: 20px;
215
+ line-height: 1.1;
216
+ }
217
+
218
+ .brand p,
219
+ .uri-line,
220
+ .muted {
221
+ color: var(--muted);
222
+ font-size: 12px;
223
+ margin: 4px 0 0;
224
+ }
225
+
226
+ .icon-button {
227
+ aspect-ratio: 1;
228
+ min-height: 34px;
229
+ padding: 0;
230
+ width: 34px;
231
+ }
232
+
233
+ .check-row {
234
+ color: var(--muted);
235
+ font-size: 13px;
236
+ margin: 10px 0;
237
+ }
238
+
239
+ .check-row input {
240
+ min-height: auto;
241
+ width: auto;
242
+ }
243
+
244
+ .tree {
245
+ min-height: 0;
246
+ overflow: auto;
247
+ padding-right: 3px;
248
+ }
249
+
250
+ .tree details {
251
+ margin: 2px 0;
252
+ }
253
+
254
+ .tree summary,
255
+ .tree-row {
256
+ align-items: center;
257
+ border-radius: 6px;
258
+ display: grid;
259
+ gap: 6px;
260
+ grid-template-columns: 18px minmax(0, 1fr);
261
+ min-height: 28px;
262
+ padding: 2px 4px;
263
+ }
264
+
265
+ .tree summary {
266
+ cursor: pointer;
267
+ grid-template-columns: 14px minmax(0, 1fr);
268
+ list-style: none;
269
+ }
270
+
271
+ .tree summary::-webkit-details-marker {
272
+ display: none;
273
+ }
274
+
275
+ .tree summary::marker {
276
+ content: '';
277
+ }
278
+
279
+ .tree-caret {
280
+ border-bottom: 4px solid transparent;
281
+ border-left: 5px solid var(--muted);
282
+ border-top: 4px solid transparent;
283
+ height: 0;
284
+ justify-self: center;
285
+ transition: transform 120ms ease;
286
+ width: 0;
287
+ }
288
+
289
+ .tree details[open] > summary .tree-caret {
290
+ transform: rotate(90deg);
291
+ }
292
+
293
+ .tree summary:hover,
294
+ .tree summary.is-active,
295
+ .tree-row:hover,
296
+ .tree-row.is-active {
297
+ background: var(--accent-soft);
298
+ }
299
+
300
+ .tree label {
301
+ align-items: center;
302
+ display: flex;
303
+ gap: 6px;
304
+ min-width: 0;
305
+ }
306
+
307
+ .tree input {
308
+ min-height: auto;
309
+ width: auto;
310
+ }
311
+
312
+ .tree-file {
313
+ background: transparent;
314
+ border: 0;
315
+ justify-content: flex-start;
316
+ min-height: 24px;
317
+ min-width: 0;
318
+ padding: 0;
319
+ text-align: left;
320
+ }
321
+
322
+ .tree-name {
323
+ overflow: hidden;
324
+ text-overflow: ellipsis;
325
+ white-space: nowrap;
326
+ }
327
+
328
+ .tree-children {
329
+ margin-left: 15px;
330
+ }
331
+
332
+ .main {
333
+ display: grid;
334
+ grid-template-rows: auto minmax(0, 1fr);
335
+ min-height: 0;
336
+ min-width: 0;
337
+ overflow: hidden;
338
+ }
339
+
340
+ .topbar {
341
+ background: rgba(20, 20, 26, 0.92);
342
+ border-bottom: 1px solid var(--line);
343
+ justify-content: space-between;
344
+ min-height: 58px;
345
+ padding: 10px 14px;
346
+ }
347
+
348
+ .tabs {
349
+ display: flex;
350
+ gap: 4px;
351
+ }
352
+
353
+ .tab {
354
+ background: transparent;
355
+ border-color: transparent;
356
+ }
357
+
358
+ .tab.is-active {
359
+ background: var(--accent-soft);
360
+ border-color: var(--accent-line);
361
+ color: var(--accent);
362
+ }
363
+
364
+ .selection-bar {
365
+ background: var(--panel-alt);
366
+ border: 1px solid var(--line);
367
+ border-radius: 8px;
368
+ padding: 6px;
369
+ }
370
+
371
+ .panel {
372
+ display: none;
373
+ min-height: 0;
374
+ overflow: hidden;
375
+ padding: 14px;
376
+ }
377
+
378
+ .panel.is-active {
379
+ display: block;
380
+ height: 100%;
381
+ }
382
+
383
+ .content-grid,
384
+ .split {
385
+ display: grid;
386
+ gap: 14px;
387
+ grid-template-columns: minmax(0, 1fr) 330px;
388
+ height: 100%;
389
+ min-height: 0;
390
+ }
391
+
392
+ .editor-pane,
393
+ .inspector,
394
+ .form-pane,
395
+ .split > section,
396
+ .doctorPanel {
397
+ background: var(--panel);
398
+ border: 1px solid var(--line);
399
+ border-radius: var(--radius);
400
+ min-width: 0;
401
+ }
402
+
403
+ .editor-pane {
404
+ display: grid;
405
+ grid-template-rows: auto minmax(0, 1fr);
406
+ min-height: 0;
407
+ }
408
+
409
+ .pane-head {
410
+ border-bottom: 1px solid var(--line);
411
+ justify-content: space-between;
412
+ min-height: 64px;
413
+ padding: 12px;
414
+ }
415
+
416
+ .pane-head h2 {
417
+ font-size: 18px;
418
+ }
419
+
420
+ .editor-pane .pane-head {
421
+ align-items: flex-start;
422
+ flex-direction: column;
423
+ }
424
+
425
+ .editor-pane .action-row {
426
+ justify-content: flex-start;
427
+ width: 100%;
428
+ }
429
+
430
+ .segmented-control {
431
+ display: inline-flex;
432
+ gap: 0;
433
+ }
434
+
435
+ .segmented-control button {
436
+ border-radius: 0;
437
+ }
438
+
439
+ .segmented-control button:first-child {
440
+ border-radius: 6px 0 0 6px;
441
+ }
442
+
443
+ .segmented-control button:last-child {
444
+ border-left: 0;
445
+ border-radius: 0 6px 6px 0;
446
+ }
447
+
448
+ .segmented-control button.is-active {
449
+ background: var(--accent-soft);
450
+ border-color: var(--accent-line);
451
+ color: var(--accent);
452
+ }
453
+
454
+ .action-row {
455
+ flex-wrap: wrap;
456
+ justify-content: flex-end;
457
+ }
458
+
459
+ .editor-pane textarea {
460
+ border: 0;
461
+ border-radius: 0 0 var(--radius) var(--radius);
462
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
463
+ height: 100%;
464
+ min-height: 420px;
465
+ outline: none;
466
+ padding: 14px;
467
+ }
468
+
469
+ .markdown-viewer {
470
+ color: var(--text);
471
+ line-height: 1.55;
472
+ min-height: 420px;
473
+ overflow: auto;
474
+ padding: 22px;
475
+ }
476
+
477
+ .markdown-viewer > :first-child {
478
+ margin-top: 0;
479
+ }
480
+
481
+ .markdown-viewer > :last-child {
482
+ margin-bottom: 0;
483
+ }
484
+
485
+ .markdown-viewer h1,
486
+ .markdown-viewer h2,
487
+ .markdown-viewer h3,
488
+ .markdown-viewer h4 {
489
+ line-height: 1.2;
490
+ margin: 22px 0 10px;
491
+ }
492
+
493
+ .markdown-viewer h1 {
494
+ border-bottom: 1px solid var(--line);
495
+ font-size: 26px;
496
+ padding-bottom: 10px;
497
+ }
498
+
499
+ .markdown-viewer h2 {
500
+ font-size: 21px;
501
+ }
502
+
503
+ .markdown-viewer h3 {
504
+ font-size: 17px;
505
+ }
506
+
507
+ .markdown-viewer p,
508
+ .markdown-viewer ul,
509
+ .markdown-viewer ol,
510
+ .markdown-viewer blockquote,
511
+ .markdown-viewer pre,
512
+ .markdown-viewer table {
513
+ margin: 0 0 14px;
514
+ }
515
+
516
+ .markdown-viewer ul,
517
+ .markdown-viewer ol {
518
+ padding-left: 24px;
519
+ }
520
+
521
+ .markdown-viewer li {
522
+ margin: 4px 0;
523
+ }
524
+
525
+ .markdown-viewer a {
526
+ color: var(--accent);
527
+ }
528
+
529
+ .markdown-viewer blockquote {
530
+ border-left: 3px solid var(--accent-line);
531
+ color: var(--muted);
532
+ padding-left: 12px;
533
+ }
534
+
535
+ .markdown-viewer code {
536
+ background: var(--code-bg);
537
+ border: 1px solid var(--line);
538
+ border-radius: 5px;
539
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
540
+ font-size: 0.92em;
541
+ padding: 1px 5px;
542
+ }
543
+
544
+ .markdown-viewer pre {
545
+ background: var(--code-bg);
546
+ border: 1px solid var(--line);
547
+ border-radius: var(--radius);
548
+ overflow: auto;
549
+ padding: 12px;
550
+ }
551
+
552
+ .markdown-viewer pre code {
553
+ background: transparent;
554
+ border: 0;
555
+ padding: 0;
556
+ }
557
+
558
+ .markdown-viewer table {
559
+ border-collapse: collapse;
560
+ display: block;
561
+ overflow: auto;
562
+ width: 100%;
563
+ }
564
+
565
+ .markdown-viewer th,
566
+ .markdown-viewer td {
567
+ border: 1px solid var(--line);
568
+ padding: 7px 9px;
569
+ text-align: left;
570
+ }
571
+
572
+ .markdown-viewer th {
573
+ background: var(--panel-alt);
574
+ }
575
+
576
+ .markdown-viewer input[type='checkbox'] {
577
+ margin-right: 7px;
578
+ min-height: auto;
579
+ width: auto;
580
+ }
581
+
582
+ .markdown-viewer hr {
583
+ border: 0;
584
+ border-top: 1px solid var(--line);
585
+ margin: 18px 0;
586
+ }
587
+
588
+ #memoryContent:focus,
589
+ .editor-pane textarea:focus {
590
+ box-shadow: inset 0 0 0 2px var(--accent-soft);
591
+ }
592
+
593
+ .inspector,
594
+ .form-pane,
595
+ .split > section {
596
+ overflow: auto;
597
+ padding: 16px;
598
+ }
599
+
600
+ .form-pane {
601
+ display: flex;
602
+ flex-direction: column;
603
+ gap: 18px;
604
+ }
605
+
606
+ .form-section {
607
+ display: grid;
608
+ gap: 8px;
609
+ }
610
+
611
+ .form-pane .form-section h3 {
612
+ margin: 0;
613
+ }
614
+
615
+ .button-row {
616
+ display: flex;
617
+ flex-wrap: wrap;
618
+ gap: 8px;
619
+ }
620
+
621
+ .inspector h3,
622
+ .form-pane h3 {
623
+ font-size: 14px;
624
+ margin: 16px 0 8px;
625
+ }
626
+
627
+ .inspector h3:first-child,
628
+ .form-pane h3:first-child {
629
+ margin-top: 0;
630
+ }
631
+
632
+ dl {
633
+ display: grid;
634
+ gap: 7px;
635
+ margin: 0;
636
+ }
637
+
638
+ dt {
639
+ color: var(--muted);
640
+ font-size: 12px;
641
+ }
642
+
643
+ dd {
644
+ margin: 0;
645
+ overflow-wrap: anywhere;
646
+ }
647
+
648
+ .target-fields {
649
+ display: grid;
650
+ gap: 8px;
651
+ margin-bottom: 12px;
652
+ }
653
+
654
+ .select-field {
655
+ display: grid;
656
+ gap: 6px;
657
+ min-width: 0;
658
+ width: 100%;
659
+ }
660
+
661
+ .select-button {
662
+ align-items: center;
663
+ display: flex;
664
+ justify-content: space-between;
665
+ text-align: left;
666
+ width: 100%;
667
+ }
668
+
669
+ .select-chevron {
670
+ border-left: 4px solid transparent;
671
+ border-right: 4px solid transparent;
672
+ border-top: 5px solid var(--text);
673
+ flex: 0 0 auto;
674
+ height: 0;
675
+ margin-left: 10px;
676
+ width: 0;
677
+ }
678
+
679
+ .select-menu {
680
+ background: var(--code-bg);
681
+ border: 1px solid var(--line);
682
+ border-radius: 6px;
683
+ display: grid;
684
+ max-height: 220px;
685
+ overflow: auto;
686
+ padding: 4px;
687
+ }
688
+
689
+ .select-option {
690
+ background: transparent;
691
+ border: 0;
692
+ justify-content: flex-start;
693
+ text-align: left;
694
+ width: 100%;
695
+ }
696
+
697
+ .select-option:hover,
698
+ .select-option.is-selected {
699
+ background: var(--accent-soft);
700
+ color: var(--accent);
701
+ }
702
+
703
+ .inspector textarea {
704
+ height: 220px;
705
+ margin: 8px 0;
706
+ }
707
+
708
+ .list {
709
+ display: grid;
710
+ gap: 8px;
711
+ margin-top: 12px;
712
+ }
713
+
714
+ .list-item,
715
+ .check-item {
716
+ border: 1px solid var(--line);
717
+ border-radius: var(--radius);
718
+ padding: 10px;
719
+ }
720
+
721
+ .list-item {
722
+ background: var(--panel);
723
+ display: block;
724
+ min-height: auto;
725
+ text-align: left;
726
+ width: 100%;
727
+ }
728
+
729
+ .list-item.is-selected {
730
+ border-color: var(--accent);
731
+ background: var(--accent-soft);
732
+ }
733
+
734
+ .list-item strong {
735
+ display: block;
736
+ margin-bottom: 5px;
737
+ }
738
+
739
+ .badge {
740
+ border-radius: 999px;
741
+ display: inline-flex;
742
+ font-size: 12px;
743
+ margin: 2px 4px 2px 0;
744
+ padding: 2px 7px;
745
+ }
746
+
747
+ .badge.ok {
748
+ background: var(--ok-soft);
749
+ color: var(--ok);
750
+ }
751
+
752
+ .badge.warn {
753
+ background: var(--warn-soft);
754
+ color: var(--warn);
755
+ }
756
+
757
+ .badge.fail {
758
+ background: var(--danger-soft);
759
+ color: var(--danger);
760
+ }
761
+
762
+ .checks {
763
+ display: grid;
764
+ gap: 8px;
765
+ margin-top: 12px;
766
+ overflow: auto;
767
+ }
768
+
769
+ .output {
770
+ background: var(--code-bg);
771
+ border-radius: var(--radius);
772
+ border: 1px solid var(--line);
773
+ color: #d6d6e0;
774
+ min-height: 220px;
775
+ overflow: auto;
776
+ padding: 12px;
777
+ white-space: pre-wrap;
778
+ }
779
+
780
+ .doctor-output {
781
+ margin: 12px 0 0;
782
+ min-height: 120px;
783
+ }
784
+
785
+ .uri-list {
786
+ display: grid;
787
+ gap: 6px;
788
+ margin: 12px 0;
789
+ }
790
+
791
+ .uri-list h3 {
792
+ font-size: 14px;
793
+ margin: 0;
794
+ }
795
+
796
+ .uri-button {
797
+ background: var(--panel-alt);
798
+ height: auto;
799
+ justify-content: flex-start;
800
+ line-height: 1.35;
801
+ min-height: 34px;
802
+ overflow-wrap: anywhere;
803
+ padding: 7px 9px;
804
+ text-align: left;
805
+ width: 100%;
806
+ }
807
+
808
+ .toast {
809
+ background: #050508;
810
+ border: 1px solid var(--line);
811
+ border-radius: 8px;
812
+ bottom: 18px;
813
+ color: var(--text);
814
+ left: 50%;
815
+ max-width: min(720px, calc(100vw - 32px));
816
+ padding: 10px 14px;
817
+ position: fixed;
818
+ transform: translateX(-50%);
819
+ z-index: 10;
820
+ }
821
+
822
+ .danger-text {
823
+ color: var(--danger);
824
+ }
825
+
826
+ @media (max-width: 980px) {
827
+ .app,
828
+ .content-grid,
829
+ .split {
830
+ grid-template-columns: 1fr;
831
+ }
832
+
833
+ .app {
834
+ height: auto;
835
+ overflow: visible;
836
+ }
837
+
838
+ .sidebar {
839
+ border-bottom: 1px solid var(--line);
840
+ border-right: 0;
841
+ max-height: 45vh;
842
+ }
843
+
844
+ .sidebar-resizer {
845
+ display: none;
846
+ }
847
+
848
+ .topbar,
849
+ .pane-head {
850
+ align-items: flex-start;
851
+ flex-direction: column;
852
+ }
853
+
854
+ .inspector,
855
+ .form-pane {
856
+ min-height: 260px;
857
+ }
858
+ }