@happy-nut/monacori 0.1.10 → 0.1.12
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/README.md +3 -22
- package/dist/app-main.js +67 -11
- package/dist/commands.js +57 -216
- package/dist/diff.js +33 -18
- package/dist/git.d.ts +1 -0
- package/dist/git.js +9 -0
- package/dist/i18n.js +10 -0
- package/dist/render.d.ts +1 -1
- package/dist/render.js +11 -2
- package/dist/util.js +13 -3
- package/dist/viewer.client.js +346 -37
- package/dist/viewer.css +94 -26
- package/package.json +1 -1
package/dist/viewer.css
CHANGED
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
--token-number: #6897bb;
|
|
20
20
|
--token-literal: #cc7832;
|
|
21
21
|
--token-tag: #e8bf6a;
|
|
22
|
+
--token-function: #ffc66d;
|
|
23
|
+
--token-type: #4ec9b0;
|
|
24
|
+
--token-decorator: #bbb529;
|
|
22
25
|
--d2h-bg-color: var(--panel);
|
|
23
26
|
--d2h-border-color: var(--border);
|
|
24
27
|
--d2h-dim-color: var(--muted);
|
|
@@ -34,6 +37,33 @@
|
|
|
34
37
|
--d2h-info-bg-color: var(--line);
|
|
35
38
|
--d2h-info-color: var(--muted);
|
|
36
39
|
}
|
|
40
|
+
/* Light theme. Everything (chrome, diff2html, syntax tokens) reads these var()s, so overriding the
|
|
41
|
+
palette flips the whole UI — no per-rule light styles needed. Toggled in Settings → General, which
|
|
42
|
+
sets data-theme="light" on <html>. Palette follows GitHub Light for familiarity. */
|
|
43
|
+
:root[data-theme="light"] {
|
|
44
|
+
color-scheme: light;
|
|
45
|
+
--bg: #ffffff;
|
|
46
|
+
--panel: #f6f8fa;
|
|
47
|
+
--text: #1f2328;
|
|
48
|
+
--muted: #6e7781;
|
|
49
|
+
--border: #d0d7de;
|
|
50
|
+
--line: #eef1f4;
|
|
51
|
+
--add: #e6ffec;
|
|
52
|
+
--del: #ffebe9;
|
|
53
|
+
--add-strong: #abf2bc;
|
|
54
|
+
--del-strong: #ffc1bc;
|
|
55
|
+
--active: #0969da;
|
|
56
|
+
--sidebar: #f0f2f5;
|
|
57
|
+
--token-comment: #6e7781;
|
|
58
|
+
--token-keyword: #cf222e;
|
|
59
|
+
--token-string: #0a3069;
|
|
60
|
+
--token-number: #0550ae;
|
|
61
|
+
--token-literal: #cf222e;
|
|
62
|
+
--token-tag: #116329;
|
|
63
|
+
--token-function: #8250df;
|
|
64
|
+
--token-type: #953800;
|
|
65
|
+
--token-decorator: #6639ba;
|
|
66
|
+
}
|
|
37
67
|
* { box-sizing: border-box; }
|
|
38
68
|
html, body { margin: 0; min-height: 100%; }
|
|
39
69
|
/* Reserve the scrollbar gutter so collapsing/expanding a file does not shift the layout. */
|
|
@@ -41,13 +71,17 @@ html { scrollbar-gutter: stable; }
|
|
|
41
71
|
body {
|
|
42
72
|
display: grid;
|
|
43
73
|
grid-template-columns: var(--sidebar-width, 280px) minmax(0, 1fr);
|
|
74
|
+
/* Row 1 = content, row 2 = the integrated terminal. The terminal is a real grid row (not a fixed
|
|
75
|
+
overlay), so content shrinks above it and the caret can never scroll behind it. When the terminal
|
|
76
|
+
is .hidden (display:none) the auto row collapses to 0 and content fills the viewport. */
|
|
77
|
+
grid-template-rows: minmax(0, 1fr) auto;
|
|
78
|
+
height: 100vh;
|
|
44
79
|
background: var(--bg);
|
|
45
80
|
color: var(--text);
|
|
46
81
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
47
82
|
}
|
|
48
83
|
.sidebar {
|
|
49
|
-
|
|
50
|
-
top: 0;
|
|
84
|
+
grid-row: 1 / -1; /* full height, left of both the content and terminal rows */
|
|
51
85
|
height: 100vh;
|
|
52
86
|
display: flex;
|
|
53
87
|
flex-direction: column;
|
|
@@ -142,6 +176,11 @@ body {
|
|
|
142
176
|
font-size: 11px;
|
|
143
177
|
color: var(--muted);
|
|
144
178
|
}
|
|
179
|
+
/* Background-work (indexing) progress, pinned as a thin bar flush at the very bottom of the sidebar,
|
|
180
|
+
right under the version footer. Hidden when idle; the bar fills left-to-right as work completes. */
|
|
181
|
+
.footer-progress { flex: none; height: 2px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
|
|
182
|
+
.footer-progress.hidden { display: none; }
|
|
183
|
+
.footer-progress-bar { height: 100%; width: 0; background: var(--active); transition: width 0.18s ease; }
|
|
145
184
|
.sidebar-footer .app-version { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
146
185
|
.app-update-flag { color: var(--active); font-weight: 600; cursor: pointer; white-space: nowrap; }
|
|
147
186
|
.settings-btn {
|
|
@@ -311,7 +350,7 @@ body {
|
|
|
311
350
|
.d2h-icon { fill: var(--muted); }
|
|
312
351
|
.d2h-tag { border-color: var(--border); }
|
|
313
352
|
.d2h-files-diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
314
|
-
.d2h-file-side-diff { min-width: 0; width: 100%; overflow-x: auto; }
|
|
353
|
+
.d2h-file-side-diff { position: relative; min-width: 0; width: 100%; overflow-x: auto; } /* relative: the line-number cells are position:absolute, so they must scroll WITH this column inside .diff2html-container instead of staying pinned to the viewport */
|
|
315
354
|
.d2h-file-side-diff:first-child { border-right: 1px solid var(--border); }
|
|
316
355
|
.d2h-code-wrapper { width: 100%; }
|
|
317
356
|
.d2h-diff-table {
|
|
@@ -526,15 +565,19 @@ summary.tree-focus { background: var(--bg); }
|
|
|
526
565
|
.status-deleted { background: var(--del); color: #cf222e; }
|
|
527
566
|
.status-renamed { background: #fff8c5; color: #9a6700; }
|
|
528
567
|
.status-source { background: var(--line); color: var(--muted); }
|
|
529
|
-
.content { min-width: 0; padding: 0; display: flex; flex-direction: column; min-height:
|
|
568
|
+
.content { min-width: 0; padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; grid-column: 2; grid-row: 1; }
|
|
530
569
|
/* Pin the diff's horizontal scrollbar to the viewport bottom instead of letting it float
|
|
531
570
|
mid-screen when a file's diff is short: fill the content column vertically so the last
|
|
532
571
|
file's diff body extends all the way down. */
|
|
533
572
|
#diff-view:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
|
|
534
|
-
#diff-view .diff2html-container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
|
|
573
|
+
#diff-view .diff2html-container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
|
|
574
|
+
/* Source view mirrors the diff view: fill the content column so the source-body (its last child, after
|
|
575
|
+
the tabs + toolbar) reaches the bottom even for short files, instead of floating at the top. */
|
|
576
|
+
#source-viewer:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
|
|
535
577
|
.diff2html-container .d2h-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
|
|
536
|
-
|
|
537
|
-
|
|
578
|
+
/* (removed last-file flex-fill) It forced the wrapper to the container height + overflow:hidden, which
|
|
579
|
+
froze the diff's vertical scroll — and froze the absolute line numbers at "1". The diff column now
|
|
580
|
+
scrolls naturally inside .diff2html-container. */
|
|
538
581
|
/* Slimmer scrollbars — the default overlay bars read as chunky on the dark UI. */
|
|
539
582
|
::-webkit-scrollbar { width: 9px; height: 9px; }
|
|
540
583
|
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 32%, transparent); border-radius: 5px; }
|
|
@@ -576,9 +619,10 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
576
619
|
color: var(--muted);
|
|
577
620
|
font-size: 12px;
|
|
578
621
|
}
|
|
622
|
+
.review-status:empty { display: none; }
|
|
579
623
|
.toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
|
|
580
624
|
.empty { padding: 24px; color: var(--muted); }
|
|
581
|
-
.source-viewer { min-height:
|
|
625
|
+
.source-viewer { min-height: 0; } /* grid sizes this; a 100vh min would overflow the content row */
|
|
582
626
|
.source-toolbar { margin-bottom: 0; }
|
|
583
627
|
.source-file-meta {
|
|
584
628
|
display: flex;
|
|
@@ -639,10 +683,13 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
639
683
|
.source-tab-close:hover { background: var(--line); color: var(--text); }
|
|
640
684
|
.source-body {
|
|
641
685
|
border: 1px solid var(--border);
|
|
642
|
-
border-radius: 8px;
|
|
643
686
|
overflow: auto;
|
|
644
687
|
background: var(--panel);
|
|
645
688
|
user-select: text;
|
|
689
|
+
/* Square edges flush to the chrome (no rounded corners), and fill the content column so a short
|
|
690
|
+
file still reaches the bottom instead of floating at the top — IntelliJ-style. */
|
|
691
|
+
flex: 1 1 auto;
|
|
692
|
+
min-height: 0;
|
|
646
693
|
}
|
|
647
694
|
/* Extend the line-number gutter (and its divider) to the bottom of the panel so it never stops at the
|
|
648
695
|
last line with an empty strip + cut-off border below it — one continuous gutter. The .num cell is 58px
|
|
@@ -658,14 +705,14 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
658
705
|
#boot-overlay {
|
|
659
706
|
position: fixed; inset: 0; z-index: 200;
|
|
660
707
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
|
|
661
|
-
background:
|
|
708
|
+
background: var(--bg); color: var(--muted);
|
|
662
709
|
font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
663
710
|
transition: opacity 0.22s ease;
|
|
664
711
|
}
|
|
665
712
|
#boot-overlay.hide { opacity: 0; pointer-events: none; }
|
|
666
713
|
.boot-spinner {
|
|
667
714
|
width: 34px; height: 34px;
|
|
668
|
-
border: 3px solid
|
|
715
|
+
border: 3px solid color-mix(in srgb, var(--muted) 28%, transparent); border-top-color: var(--active); border-radius: 50%;
|
|
669
716
|
animation: boot-spin 0.8s linear infinite;
|
|
670
717
|
}
|
|
671
718
|
@keyframes boot-spin { to { transform: rotate(360deg); } }
|
|
@@ -674,7 +721,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
674
721
|
display: flex;
|
|
675
722
|
align-items: center;
|
|
676
723
|
justify-content: center;
|
|
677
|
-
min-height:
|
|
724
|
+
min-height: 0; /* fills the content row via flex; a 100vh-based min would overflow the grid cell */
|
|
678
725
|
font-size: 13px;
|
|
679
726
|
}
|
|
680
727
|
.source-table {
|
|
@@ -712,7 +759,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
712
759
|
width: 2px;
|
|
713
760
|
height: 1.25em;
|
|
714
761
|
margin: -1px -1px;
|
|
715
|
-
background: #fff
|
|
762
|
+
background: var(--text); /* themed: bright on dark, dark on light — a hardcoded #fff was invisible in light mode */
|
|
716
763
|
vertical-align: text-bottom;
|
|
717
764
|
pointer-events: none;
|
|
718
765
|
animation: cursor-blink 1.06s step-end infinite;
|
|
@@ -766,6 +813,14 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
766
813
|
}
|
|
767
814
|
/* Question vs change-request is a small colored pill on the kind label — no heavy left bar. */
|
|
768
815
|
.mc-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; color: var(--muted); }
|
|
816
|
+
.mc-target { margin-left: auto; font: 11px Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
|
|
817
|
+
/* While composing a comment, the textarea owns the only caret — hide the file's inline caret and the
|
|
818
|
+
cursor-row highlights (diff box-shadow + markdown/csv row tint) so attention stays on the composer. */
|
|
819
|
+
body.mc-composing .code-cursor { display: none; }
|
|
820
|
+
body.mc-composing .mc-diff-cursor-row .d2h-code-side-line { box-shadow: none; }
|
|
821
|
+
body.mc-composing .source-row.cursor-line .md-cell,
|
|
822
|
+
body.mc-composing .source-row.csv-row.cursor-line .csv-cell { background: transparent; }
|
|
823
|
+
body.mc-composing .source-row.cursor-line .num { color: inherit; }
|
|
769
824
|
.mc-kind {
|
|
770
825
|
font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
|
|
771
826
|
padding: 2px 8px; border-radius: 999px;
|
|
@@ -799,8 +854,11 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
799
854
|
.mc-modal-panel { width: min(900px, calc(100vw - 40px)); height: 80vh; max-height: 80vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
|
|
800
855
|
.mc-modal-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 650; }
|
|
801
856
|
.mc-modal-head span { margin-right: auto; }
|
|
802
|
-
.mc-modal-text { width: 100%; height: 100%; box-sizing: border-box; resize: none; border: 0; padding: 12px; background: var(--bg); color: var(--text); font: 12px/1.55 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
857
|
+
.mc-modal-text { width: 100%; height: 100%; box-sizing: border-box; resize: none; border: 0; padding: 12px; background: var(--bg); color: var(--text); caret-color: var(--text); font: 12px/1.55 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
803
858
|
.mc-modal-text:focus { outline: none; }
|
|
859
|
+
.mc-dropdown { position: fixed; z-index: 70; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 4px; }
|
|
860
|
+
.mc-dropdown-item { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; background: transparent; color: var(--text); border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
|
|
861
|
+
.mc-dropdown-item.active, .mc-dropdown-item:hover { background: var(--active); color: #fff; }
|
|
804
862
|
/* Prompt memo: split editor | live Markdown preview inside the standard modal shell. */
|
|
805
863
|
.mc-memo-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: 100%; }
|
|
806
864
|
.mc-memo-edit { height: 100%; border-right: 1px solid var(--border); }
|
|
@@ -813,6 +871,9 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
813
871
|
.tok-number { color: var(--token-number); }
|
|
814
872
|
.tok-literal { color: var(--token-literal); }
|
|
815
873
|
.tok-tag { color: var(--token-tag); font-weight: 650; }
|
|
874
|
+
.tok-function { color: var(--token-function); }
|
|
875
|
+
.tok-type { color: var(--token-type); }
|
|
876
|
+
.tok-decorator { color: var(--token-decorator); font-style: italic; }
|
|
816
877
|
.quick-open {
|
|
817
878
|
position: fixed;
|
|
818
879
|
inset: 0;
|
|
@@ -914,9 +975,10 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
914
975
|
.quick-open-badge { align-self: center; color: var(--muted); font-size: 12px; }
|
|
915
976
|
.quick-open-empty { padding: 28px 14px; color: var(--muted); font-size: 13px; }
|
|
916
977
|
@media (max-width: 900px) {
|
|
917
|
-
body { grid-template-columns: 1fr; }
|
|
918
|
-
.sidebar {
|
|
919
|
-
.content { padding: 16px; }
|
|
978
|
+
body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
|
|
979
|
+
.sidebar { grid-row: 1; grid-column: 1; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
980
|
+
.content { grid-row: 2; grid-column: 1; padding: 16px; }
|
|
981
|
+
.terminal-panel { grid-column: 1; grid-row: 3; }
|
|
920
982
|
.toolbar { margin: -16px -16px 16px; padding: 12px 16px; }
|
|
921
983
|
.d2h-files-diff { grid-template-columns: 1fr; }
|
|
922
984
|
.d2h-file-side-diff:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
@@ -1049,7 +1111,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1049
1111
|
}
|
|
1050
1112
|
.md-cell > :first-child { margin-top: 0; }
|
|
1051
1113
|
.md-cell > :last-child { margin-bottom: 0; }
|
|
1052
|
-
.md-h { line-height: 1.3; margin: 0.25em 0; font-weight: 650; color:
|
|
1114
|
+
.md-h { line-height: 1.3; margin: 0.25em 0; font-weight: 650; color: var(--text); }
|
|
1053
1115
|
.md-h1 { font-size: 1.7em; }
|
|
1054
1116
|
.md-h2 { font-size: 1.4em; }
|
|
1055
1117
|
.md-h3 { font-size: 1.18em; }
|
|
@@ -1058,7 +1120,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1058
1120
|
.md-p { margin: 0.2em 0; }
|
|
1059
1121
|
.md-cell a { color: var(--active); text-decoration: none; }
|
|
1060
1122
|
.md-cell a:hover { text-decoration: underline; }
|
|
1061
|
-
.md-cell strong { color:
|
|
1123
|
+
.md-cell strong { color: var(--text); }
|
|
1062
1124
|
.md-cell del { color: var(--muted); }
|
|
1063
1125
|
.md-cell code {
|
|
1064
1126
|
font: 0.86em Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -1072,6 +1134,14 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1072
1134
|
.md-list li { margin: 0.15em 0; }
|
|
1073
1135
|
.md-hr { border: 0; border-top: 1px solid var(--border); margin: 0.5em 0; }
|
|
1074
1136
|
.md-img { max-width: 100%; border-radius: 6px; }
|
|
1137
|
+
/* Embedded raw HTML in Markdown (README <div>/<img>/<table>/…). Minimal styling so it reads sanely. */
|
|
1138
|
+
.md-html { overflow-x: auto; }
|
|
1139
|
+
.md-html img { max-width: 100%; height: auto; }
|
|
1140
|
+
.md-html table { border-collapse: collapse; margin: 0.3em 0; }
|
|
1141
|
+
.md-html th, .md-html td { border: 1px solid var(--border); padding: 4px 10px; }
|
|
1142
|
+
.md-html h1, .md-html h2, .md-html h3, .md-html h4 { margin: 0.5em 0 0.3em; line-height: 1.3; }
|
|
1143
|
+
.md-html p { margin: 0.3em 0; }
|
|
1144
|
+
.md-html [align="center"] { text-align: center; }
|
|
1075
1145
|
.md-table { border-collapse: collapse; margin: 0.3em 0; font-size: 0.92em; }
|
|
1076
1146
|
.md-table th, .md-table td { border: 1px solid var(--border); padding: 5px 11px; text-align: left; }
|
|
1077
1147
|
.md-table thead th { background: var(--line); }
|
|
@@ -1086,12 +1156,10 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1086
1156
|
/* --- Integrated terminal panel (Electron only): fixed to the content column's bottom, height-resizable.
|
|
1087
1157
|
The active border-top marks it as the merged-prompt send target ("highlighted while it's open"). --- */
|
|
1088
1158
|
.terminal-panel {
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
bottom: 0;
|
|
1159
|
+
grid-column: 2;
|
|
1160
|
+
grid-row: 2;
|
|
1161
|
+
min-height: 0;
|
|
1093
1162
|
height: var(--terminal-height, 320px);
|
|
1094
|
-
z-index: 40;
|
|
1095
1163
|
display: flex;
|
|
1096
1164
|
flex-direction: column;
|
|
1097
1165
|
background: var(--bg);
|
|
@@ -1138,6 +1206,6 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1138
1206
|
body.terminal-send-mode .sidebar,
|
|
1139
1207
|
body.terminal-send-mode .content,
|
|
1140
1208
|
body.terminal-send-mode .sidebar-resizer { opacity: 0.25; pointer-events: none; }
|
|
1141
|
-
/*
|
|
1142
|
-
|
|
1209
|
+
/* The terminal now occupies a real grid row (see body grid-template-rows), so content shrinks above it
|
|
1210
|
+
and nothing scrolls behind it — no padding/scroll-padding hacks needed. */
|
|
1143
1211
|
.terminal-toggle.is-active { color: var(--active); }
|