@happy-nut/monacori 0.1.3 → 0.1.5

package/dist/viewer.css

@@ -465,14 +465,16 @@ td.d2h-del:not(.d2h-code-side-linenumber) { color: #d8e0e8; }
 }
 .tree-dir summary::-webkit-details-marker { display: none; }
 .tree-dir summary:hover { background: var(--bg); }
-.tree-dir:not([open]) .folder-icon { transform: rotate(-90deg); }
 .folder-icon {
   display: inline-grid;
   place-items: center;
-  font-size: 9px;
   color: var(--muted);
-  transition: transform 120ms ease;
 }
+.folder-icon .folder-ic { width: 14px; height: 14px; display: block; }
+/* Closed vs open folder glyph (replaces the old rotated "v" chevron). */
+.tree-dir > summary .fi-open { display: none; }
+.tree-dir[open] > summary .fi-closed { display: none; }
+.tree-dir[open] > summary .fi-open { display: block; }
 .file-link.tree-file { padding-left: calc(8px + (var(--depth) * 14px)); }
 .tree-focus { box-shadow: inset 0 0 0 1px var(--active); border-radius: 6px; }
 summary.tree-focus { background: var(--bg); }
@@ -524,7 +526,20 @@ summary.tree-focus { background: var(--bg); }
 .status-deleted { background: var(--del); color: #cf222e; }
 .status-renamed { background: #fff8c5; color: #9a6700; }
 .status-source { background: var(--line); color: var(--muted); }
-.content { min-width: 0; padding: 0; }
+.content { min-width: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; }
+/* Pin the diff's horizontal scrollbar to the viewport bottom instead of letting it float
+   mid-screen when a file's diff is short: fill the content column vertically so the last
+   file's diff body extends all the way down. */
+#diff-view:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
+#diff-view .diff2html-container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
+.diff2html-container .d2h-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
+.diff2html-container .d2h-file-wrapper:last-child { flex: 1 1 auto; }
+.diff2html-container .d2h-file-wrapper:last-child .d2h-files-diff { height: 100%; }
+/* Slimmer scrollbars — the default overlay bars read as chunky on the dark UI. */
+::-webkit-scrollbar { width: 9px; height: 9px; }
+::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 32%, transparent); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 52%, transparent); }
+::-webkit-scrollbar-track { background: transparent; }
 .toolbar {
   position: sticky;
   top: 0;
@@ -629,6 +644,31 @@ h1 { margin: 0; font-size: 18px; }
   background: var(--panel);
   user-select: text;
 }
+/* Extend the line-number gutter (and its divider) to the bottom of the panel so it never stops at the
+   last line with an empty strip + cut-off border below it — one continuous gutter. The .num cell is 58px
+   wide + 8px padding each side + 1px border ≈ 75px; the gradient mirrors that. (pre-wrap = no h-scroll, so
+   a fixed background stays aligned.) */
+.source-body:not(.empty):not(.image-body) {
+  background-image: linear-gradient(to right, var(--line) 0 74px, var(--border) 74px 75px, var(--panel) 75px);
+  background-repeat: no-repeat;
+}
+/* Boot overlay: painted the instant the review HTML loads, removed once the renderer's bootstrap has drawn
+   the diff/tree — so there's no blank screen between the startup spinner and first render. Mirrors
+   app-main's LOADING_HTML spinner exactly so the hand-off from the loading screen is seamless. */
+#boot-overlay {
+  position: fixed; inset: 0; z-index: 200;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
+  background: #2b2b2b; color: #9aa4af;
+  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  transition: opacity 0.22s ease;
+}
+#boot-overlay.hide { opacity: 0; pointer-events: none; }
+.boot-spinner {
+  width: 34px; height: 34px;
+  border: 3px solid #3a3a3a; border-top-color: #4a9eff; border-radius: 50%;
+  animation: boot-spin 0.8s linear infinite;
+}
+@keyframes boot-spin { to { transform: rotate(360deg); } }
 /* Empty state ("Select a file…") centered in the available space, not top-left. */
 .source-body.empty {
   display: flex;
@@ -688,7 +728,8 @@ h1 { margin: 0; font-size: 18px; }
 .source-row.md-row.cursor-line .num,
 .source-row.csv-row.cursor-line .num { color: var(--active); }
 .num {
-  width: 58px;
+  width: 75px;
+  box-sizing: border-box; /* fixed 75px total so the .source-body gutter gradient lines up exactly (no bleed) */
   user-select: none;
   text-align: right;
   color: var(--muted);
@@ -760,6 +801,12 @@ h1 { margin: 0; font-size: 18px; }
 .mc-modal-head span { margin-right: auto; }
 .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; }
 .mc-modal-text:focus { outline: none; }
+/* Prompt memo: split editor | live Markdown preview inside the standard modal shell. */
+.mc-memo-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: 100%; }
+.mc-memo-edit { height: 100%; border-right: 1px solid var(--border); }
+.mc-memo-preview { height: 100%; overflow: auto; padding: 12px 16px; background: var(--panel); color: var(--text); }
+.mc-memo-preview > :first-child { margin-top: 0; }
+.mc-memo-empty { color: var(--muted); font-size: 12px; font-style: italic; }
 .tok-comment { color: var(--token-comment); font-style: italic; }
 .tok-keyword { color: var(--token-keyword); font-weight: 650; }
 .tok-string { color: var(--token-string); }
@@ -1074,9 +1121,11 @@ h1 { margin: 0; font-size: 18px; }
 .terminal-pane-label[contenteditable="true"] { color: var(--text); background: var(--bg); outline: none; }
 .terminal-pane.is-active .terminal-pane-label { color: var(--text); }
 .terminal-pane-host { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 4px 0 4px 8px; }
-.terminal-pane.is-active { box-shadow: inset 2px 0 0 var(--active); }
+/* No border on the active pane — the inactive panes dim back instead, so the focused one stands out
+   cleanly without an outline. Only applies with 2+ panes (a lone pane is never dimmed; see setActive). */
+.terminal-pane { transition: opacity 120ms ease; }
+.terminal-panel:not(.send-mode) .terminal-pane.is-inactive { opacity: 0.4; }
 /* Pane-pick mode (merged "Send to terminal"): chosen pane ringed + full opacity, the rest dimmed. */
-.terminal-panel.send-mode .terminal-pane { transition: opacity 120ms ease; }
 .terminal-pane.is-dimmed { opacity: 0.3; }
 .terminal-pane.is-send-target { box-shadow: inset 0 0 0 2px var(--active); opacity: 1; position: relative; }
 /* Faint ⏎ hint floating over the chosen pane; it vanishes the instant Enter exits send mode. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happy-nut/monacori",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Validation control plane for AI-generated code changes.",
   "type": "module",
   "repository": {