thurview 0.5.1 → 0.7.0

package/dist/ui/app.css

@@ -854,7 +854,48 @@ kbd {
   font-size: 12.5px;
 }
 
-/* Map */
+/* Map. The tab opens with what it is for, because a reader who has to guess
+   reads it once and never returns. */
+.map-intro {
+  max-width: 72ch;
+  margin-bottom: 18px;
+}
+.map-intro h2 {
+  font-family: var(--font-mono);
+  font-size: 15px;
+  margin: 0 0 5px;
+}
+.map-intro p {
+  margin: 0;
+  color: var(--fg2);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.map-route {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 12px;
+}
+.map-group {
+  margin-bottom: 22px;
+}
+.map-group h3,
+.map-edges h3 {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin: 0 0 10px;
+}
+.map-note {
+  font-size: 12px;
+  margin-bottom: 10px;
+}
 .map-layout {
   display: flex;
   height: 100%;
@@ -929,22 +970,41 @@ kbd {
   font-size: 12.5px;
   color: var(--fg2);
 }
-.map-node .children {
+.map-node .meta {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--muted);
-  margin-top: 8px;
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+}
+.map-node .meta .warn-text {
+  color: var(--warn);
+}
+.map-node .meta button.drill {
+  padding: 3px 8px;
+  font-size: 11px;
 }
 .map-node.added {
   border-color: var(--ok);
 }
 .map-node.removed {
   border-color: var(--del);
-  opacity: 0.7;
 }
 .map-node.changed {
   border-color: var(--warn);
 }
+/* Untouched parts stay on the board - they are the context that makes the
+   change readable - but they must not compete with it for attention. */
+.map-node.quiet {
+  opacity: 0.6;
+  background: transparent;
+}
+.map-node.quiet:hover {
+  opacity: 1;
+}
 .map-node .status {
   position: absolute;
   top: 8px;
@@ -955,17 +1015,43 @@ kbd {
   font-size: 13px;
 }
 .map-edges .edge {
-  padding: 5px 0;
+  padding: 5px 0 5px 10px;
   border-top: 1px solid var(--line);
+  border-left: 2px solid transparent;
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   font-family: var(--font-mono);
   font-size: 12px;
 }
+/* A link into a changed part is the seam a reviewer has to check; one between
+   two untouched parts is only there to place it. */
+.map-edges .edge.hot {
+  border-left-color: var(--warn);
+}
+.map-edges .edge:not(.hot) {
+  opacity: 0.6;
+}
 .map-edges .edge b {
   cursor: pointer;
   color: var(--link);
 }
+.map-side .neighbours {
+  font-size: 12px;
+}
+.map-side .neighbour {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  border-top: 1px solid var(--line);
+}
+.map-side .neighbour .nb {
+  font-family: var(--font-mono);
+  color: var(--link);
+  cursor: pointer;
+}
 .map-side .file {
   font-family: var(--font-mono);
   font-size: 12px;
@@ -1341,6 +1427,118 @@ kbd {
   font-family: var(--font-mono);
   font-size: 13px;
 }
+/* An empty state that explains itself runs to a paragraph, and a paragraph the
+   width of the viewport is unreadable. */
+.empty-state p {
+  max-width: 62ch;
+  margin: 0 auto 8px;
+  line-height: 1.6;
+}
+
+/* ---- Interface delta ----
+   Above the document, because "what does this let us do now" is the reader's
+   first question and today they reconstruct it from the diff. Derived at
+   publish, so the empty state carries as much weight as a removal: a refactor
+   says so in the verdict line rather than showing an empty box. Removed rows
+   read first and warmest, changed next, added last. */
+.ifd {
+  max-width: 1200px;
+  margin: 20px auto 0;
+  padding: 0 24px;
+}
+.ifd .block-actions {
+  position: static;
+  opacity: 1;
+}
+.ifd-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius) var(--radius) 0 0;
+  font-size: 12px;
+}
+.ifd-head .t {
+  font-family: var(--font-display);
+  font-weight: 600;
+  text-transform: var(--heading-transform);
+  color: var(--fg);
+}
+.ifd-head .spacer {
+  flex: 1;
+}
+.ifd-head .heading-toggle {
+  margin-left: 0;
+}
+.ifd-body {
+  border: 1px solid var(--line);
+  border-top: 0;
+  border-radius: 0 0 var(--radius) var(--radius);
+  background: var(--bg-code);
+  padding: 4px 0 8px;
+}
+.ifd-body > button {
+  margin: 4px 12px;
+}
+.ifd-verdict {
+  margin: 8px 12px;
+  color: var(--fg2);
+  font-size: 13px;
+}
+.ifd-entry {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 7px 12px;
+  border-top: 1px solid var(--line2);
+  cursor: pointer;
+}
+.ifd-entry:hover {
+  background: var(--bg3);
+}
+.ifd-entry > .badge {
+  flex: 0 0 auto;
+  min-width: 66px;
+  justify-content: center;
+}
+.ifd-removed {
+  background: var(--del-bg);
+}
+.ifd-added {
+  background: var(--add-bg);
+}
+.ifd-what {
+  flex: 1;
+  min-width: 0;
+}
+.ifd-name {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  color: var(--fg);
+  overflow-wrap: anywhere;
+}
+.ifd-was {
+  font-size: 12px;
+  color: var(--muted);
+  text-decoration: line-through;
+  overflow-wrap: anywhere;
+}
+.ifd-cap {
+  font-size: 12.5px;
+  color: var(--fg2);
+  margin-top: 3px;
+}
+.ifd-where {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  color: var(--muted);
+}
 
 /* ---- Small screens ----
    One column below 900px: the table-of-contents rail, the split diff and the
@@ -1382,6 +1580,14 @@ kbd {
     padding: 5px 7px;
   }
 
+  .ifd {
+    padding: 0 14px;
+  }
+  /* the path is the first thing to go: the declaration is what the reader needs */
+  .ifd-where {
+    display: none;
+  }
+
   /* The rail is dropped rather than squeezed; headings stay reachable by scrolling. */
   .doc-layout {
     grid-template-columns: minmax(0, 1fr);