@happy-nut/monacori 0.1.11 → 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 +54 -215
- package/dist/diff.js +22 -9
- 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 +87 -25
- 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,18 +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; }
|
|
535
574
|
/* Source view mirrors the diff view: fill the content column so the source-body (its last child, after
|
|
536
575
|
the tabs + toolbar) reaches the bottom even for short files, instead of floating at the top. */
|
|
537
576
|
#source-viewer:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
|
|
538
577
|
.diff2html-container .d2h-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
|
|
539
|
-
|
|
540
|
-
|
|
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. */
|
|
541
581
|
/* Slimmer scrollbars — the default overlay bars read as chunky on the dark UI. */
|
|
542
582
|
::-webkit-scrollbar { width: 9px; height: 9px; }
|
|
543
583
|
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 32%, transparent); border-radius: 5px; }
|
|
@@ -579,9 +619,10 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
579
619
|
color: var(--muted);
|
|
580
620
|
font-size: 12px;
|
|
581
621
|
}
|
|
622
|
+
.review-status:empty { display: none; }
|
|
582
623
|
.toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
|
|
583
624
|
.empty { padding: 24px; color: var(--muted); }
|
|
584
|
-
.source-viewer { min-height:
|
|
625
|
+
.source-viewer { min-height: 0; } /* grid sizes this; a 100vh min would overflow the content row */
|
|
585
626
|
.source-toolbar { margin-bottom: 0; }
|
|
586
627
|
.source-file-meta {
|
|
587
628
|
display: flex;
|
|
@@ -664,14 +705,14 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
664
705
|
#boot-overlay {
|
|
665
706
|
position: fixed; inset: 0; z-index: 200;
|
|
666
707
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
|
|
667
|
-
background:
|
|
708
|
+
background: var(--bg); color: var(--muted);
|
|
668
709
|
font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
669
710
|
transition: opacity 0.22s ease;
|
|
670
711
|
}
|
|
671
712
|
#boot-overlay.hide { opacity: 0; pointer-events: none; }
|
|
672
713
|
.boot-spinner {
|
|
673
714
|
width: 34px; height: 34px;
|
|
674
|
-
border: 3px solid
|
|
715
|
+
border: 3px solid color-mix(in srgb, var(--muted) 28%, transparent); border-top-color: var(--active); border-radius: 50%;
|
|
675
716
|
animation: boot-spin 0.8s linear infinite;
|
|
676
717
|
}
|
|
677
718
|
@keyframes boot-spin { to { transform: rotate(360deg); } }
|
|
@@ -680,7 +721,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
680
721
|
display: flex;
|
|
681
722
|
align-items: center;
|
|
682
723
|
justify-content: center;
|
|
683
|
-
min-height:
|
|
724
|
+
min-height: 0; /* fills the content row via flex; a 100vh-based min would overflow the grid cell */
|
|
684
725
|
font-size: 13px;
|
|
685
726
|
}
|
|
686
727
|
.source-table {
|
|
@@ -718,7 +759,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
718
759
|
width: 2px;
|
|
719
760
|
height: 1.25em;
|
|
720
761
|
margin: -1px -1px;
|
|
721
|
-
background: #fff
|
|
762
|
+
background: var(--text); /* themed: bright on dark, dark on light — a hardcoded #fff was invisible in light mode */
|
|
722
763
|
vertical-align: text-bottom;
|
|
723
764
|
pointer-events: none;
|
|
724
765
|
animation: cursor-blink 1.06s step-end infinite;
|
|
@@ -772,6 +813,14 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
772
813
|
}
|
|
773
814
|
/* Question vs change-request is a small colored pill on the kind label — no heavy left bar. */
|
|
774
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; }
|
|
775
824
|
.mc-kind {
|
|
776
825
|
font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
|
|
777
826
|
padding: 2px 8px; border-radius: 999px;
|
|
@@ -805,8 +854,11 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
805
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; }
|
|
806
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; }
|
|
807
856
|
.mc-modal-head span { margin-right: auto; }
|
|
808
|
-
.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; }
|
|
809
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; }
|
|
810
862
|
/* Prompt memo: split editor | live Markdown preview inside the standard modal shell. */
|
|
811
863
|
.mc-memo-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: 100%; }
|
|
812
864
|
.mc-memo-edit { height: 100%; border-right: 1px solid var(--border); }
|
|
@@ -819,6 +871,9 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
819
871
|
.tok-number { color: var(--token-number); }
|
|
820
872
|
.tok-literal { color: var(--token-literal); }
|
|
821
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; }
|
|
822
877
|
.quick-open {
|
|
823
878
|
position: fixed;
|
|
824
879
|
inset: 0;
|
|
@@ -920,9 +975,10 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
920
975
|
.quick-open-badge { align-self: center; color: var(--muted); font-size: 12px; }
|
|
921
976
|
.quick-open-empty { padding: 28px 14px; color: var(--muted); font-size: 13px; }
|
|
922
977
|
@media (max-width: 900px) {
|
|
923
|
-
body { grid-template-columns: 1fr; }
|
|
924
|
-
.sidebar {
|
|
925
|
-
.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; }
|
|
926
982
|
.toolbar { margin: -16px -16px 16px; padding: 12px 16px; }
|
|
927
983
|
.d2h-files-diff { grid-template-columns: 1fr; }
|
|
928
984
|
.d2h-file-side-diff:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
@@ -1055,7 +1111,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1055
1111
|
}
|
|
1056
1112
|
.md-cell > :first-child { margin-top: 0; }
|
|
1057
1113
|
.md-cell > :last-child { margin-bottom: 0; }
|
|
1058
|
-
.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); }
|
|
1059
1115
|
.md-h1 { font-size: 1.7em; }
|
|
1060
1116
|
.md-h2 { font-size: 1.4em; }
|
|
1061
1117
|
.md-h3 { font-size: 1.18em; }
|
|
@@ -1064,7 +1120,7 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1064
1120
|
.md-p { margin: 0.2em 0; }
|
|
1065
1121
|
.md-cell a { color: var(--active); text-decoration: none; }
|
|
1066
1122
|
.md-cell a:hover { text-decoration: underline; }
|
|
1067
|
-
.md-cell strong { color:
|
|
1123
|
+
.md-cell strong { color: var(--text); }
|
|
1068
1124
|
.md-cell del { color: var(--muted); }
|
|
1069
1125
|
.md-cell code {
|
|
1070
1126
|
font: 0.86em Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -1078,6 +1134,14 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1078
1134
|
.md-list li { margin: 0.15em 0; }
|
|
1079
1135
|
.md-hr { border: 0; border-top: 1px solid var(--border); margin: 0.5em 0; }
|
|
1080
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; }
|
|
1081
1145
|
.md-table { border-collapse: collapse; margin: 0.3em 0; font-size: 0.92em; }
|
|
1082
1146
|
.md-table th, .md-table td { border: 1px solid var(--border); padding: 5px 11px; text-align: left; }
|
|
1083
1147
|
.md-table thead th { background: var(--line); }
|
|
@@ -1092,12 +1156,10 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1092
1156
|
/* --- Integrated terminal panel (Electron only): fixed to the content column's bottom, height-resizable.
|
|
1093
1157
|
The active border-top marks it as the merged-prompt send target ("highlighted while it's open"). --- */
|
|
1094
1158
|
.terminal-panel {
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
bottom: 0;
|
|
1159
|
+
grid-column: 2;
|
|
1160
|
+
grid-row: 2;
|
|
1161
|
+
min-height: 0;
|
|
1099
1162
|
height: var(--terminal-height, 320px);
|
|
1100
|
-
z-index: 40;
|
|
1101
1163
|
display: flex;
|
|
1102
1164
|
flex-direction: column;
|
|
1103
1165
|
background: var(--bg);
|
|
@@ -1144,6 +1206,6 @@ h1 { margin: 0; font-size: 18px; }
|
|
|
1144
1206
|
body.terminal-send-mode .sidebar,
|
|
1145
1207
|
body.terminal-send-mode .content,
|
|
1146
1208
|
body.terminal-send-mode .sidebar-resizer { opacity: 0.25; pointer-events: none; }
|
|
1147
|
-
/*
|
|
1148
|
-
|
|
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. */
|
|
1149
1211
|
.terminal-toggle.is-active { color: var(--active); }
|