@khanglvm/relay 0.12.2 → 0.13.0

package/src/ui/blocks.css

@@ -33,6 +33,7 @@
 .blk-markdown .md h2 { font-size: 1.2rem; }
 .blk-markdown .md h3 { font-size: 1.05rem; }
 .blk-markdown .md p { margin: 10px 0; }
+.blk-markdown .md img.md-img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
 .blk-markdown .md a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms var(--ease); }
 .blk-markdown .md a:hover { border-bottom-color: var(--accent); }
 .blk-markdown .md strong { font-weight: 600; }
@@ -237,6 +238,36 @@
 }
 .blk-difftoggle:hover { color: var(--accent); border-color: var(--accent); }
 
+/* multi-file diff: per-file filename header + a jump bar of file chips */
+.diff-file + .diff-file { margin-top: 6px; }
+.diff-filehead {
+  position: sticky; top: 0; z-index: 1;
+  padding: 5px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.76rem; color: var(--fg-2);
+  background: var(--card); border-bottom: 1px solid var(--border);
+}
+.diff-files {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  padding: 8px 0;
+}
+.diff-file-chip {
+  cursor: pointer; font: inherit; font-size: 0.72rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--fg-2); background: var(--bg-sunken);
+  border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px;
+  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  transition: color 150ms var(--ease), border-color 150ms var(--ease);
+}
+.diff-file-chip:hover { color: var(--accent); border-color: var(--accent); }
+
+/* clickable line-number gutter: hover a number to comment on that line */
+.blk-gutter-c { padding: 14px 0; }
+.blk-gutter-c .blk-gutterline {
+  padding: 0 10px 0 14px; cursor: pointer; position: relative;
+  transition: background 120ms var(--ease), color 120ms var(--ease);
+}
+.blk-gutter-c .blk-gutterline:hover { background: var(--accent-soft); color: var(--accent); }
+
 /* ---------- video (iframe embed / local stream / direct URL) ---------- */
 .blk-videowrap { margin: 0; }
 .blk-video, .blk-video-embed {
@@ -277,6 +308,23 @@
 .blk-table tbody tr:hover { background: var(--bg-sunken); }
 .blk-table tbody tr:last-child td { border-bottom: 0; }
 
+/* table toolbar: live filter box + CSV export (opt-in via filterable/exportable) */
+.blk-tablebar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.blk-tablefilter {
+  flex: 1; min-width: 0; max-width: 280px;
+  padding: 6px 10px; font: inherit; font-size: 0.85rem;
+  background: var(--bg-sunken); color: var(--fg);
+  border: 1px solid var(--border); border-radius: 8px;
+}
+.blk-tablefilter:focus { outline: none; border-color: var(--accent); }
+.blk-tableexport {
+  flex: none; padding: 6px 12px; font: inherit; font-size: 0.8rem; cursor: pointer;
+  background: var(--card); color: var(--fg-2);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  transition: border-color 150ms var(--ease), color 150ms var(--ease);
+}
+.blk-tableexport:hover { border-color: var(--accent); color: var(--accent); }
+
 /* ---------- chart ---------- */
 /* NO height here: renderChart always sets the inline height, and this class
    also lands on the outer .blk.blk-chart dispatch wrapper — a CSS height
@@ -316,7 +364,7 @@
 /* ---------- mermaid ---------- */
 .blk-mermaid {
   overflow: auto;
-  max-height: 1200px;
+  max-height: 800px;
   text-align: center;
 }
 .blk-mermaid svg {
@@ -392,7 +440,7 @@
 /* ---------- graphviz (offline, vendored Viz.js) ---------- */
 .blk-graphviz {
   overflow: auto;
-  max-height: 1200px;
+  max-height: 800px;
   text-align: center;
   /* graphviz draws on its own white canvas; frame it as a deliberate card so
      it reads intentional in dark mode instead of a stray white rectangle */
@@ -411,7 +459,7 @@
 /* ---------- plantuml (server-rendered image) ---------- */
 .blk-plantuml {
   overflow: auto;
-  max-height: 1200px;
+  max-height: 800px;
   text-align: center;
   background: #fff;
   border: 1px solid var(--border);
@@ -426,7 +474,7 @@
 /* ---------- image ---------- */
 .blk-imagewrap {
   overflow: auto;
-  max-height: 1200px;
+  max-height: 800px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--bg-sunken);
@@ -483,6 +531,13 @@ body.blk-full-open { overflow: hidden; }
   background: var(--card); border-bottom: 1px solid var(--border);
   z-index: 51;
 }
+/* When the comment rail is docked open (≥980px), inset the full-screen overlay
+   AND its toolbar from the right by the rail width — otherwise the overlay slides
+   under the (higher z-index) rail and its close/comment buttons get hidden. */
+@media (min-width: 980px) {
+  body.ann-rail-open .blk-full { right: 340px; }
+  body.ann-rail-open .blk-full > .blk-tools { right: 340px; }
+}
 .blk-chart.blk-full {
   height: 100vh !important; width: auto !important;
   padding: 44px 16px 16px;
@@ -585,3 +640,108 @@ body.blk-full-open { overflow: hidden; }
 .pal-tag.tone-nature { background: #EAF3DE; color: #3B6D11; }
 .pal-tag.tone-bold { background: #FBEAF0; color: #72243E; }
 .pal-tag.tone-digital { background: #EEEDFE; color: #3C3489; }
+
+/* ---------- kpi (stat cards) ---------- */
+.blk-kpi { margin: 4px 0; }
+.kpi-title { font-weight: 600; color: var(--fg-2); margin-bottom: 10px; }
+.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
+.kpi-card {
+  border: 1px solid var(--border); border-radius: 12px;
+  background: var(--card); padding: 14px 16px;
+}
+.kpi-label { color: var(--muted); font-size: 0.82rem; }
+.kpi-value { font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; margin: 4px 0 2px; letter-spacing: -0.02em; }
+.kpi-delta { font-size: 0.85rem; font-weight: 600; color: var(--fg-2); }
+.kpi-delta.kpi-up { color: var(--ok); }
+.kpi-delta.kpi-down { color: var(--danger); }
+.kpi-sub { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
+
+/* ---------- typography (specimens) ---------- */
+.blk-typography { margin: 4px 0; }
+.typo-title { font-weight: 600; color: var(--fg-2); margin-bottom: 10px; }
+.typo-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
+.typo-row:last-child { border-bottom: 0; }
+.typo-meta { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
+.typo-sample { color: var(--fg); font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
+
+/* ---------- compare (before/after slider) ---------- */
+.blk-comparewrap { margin: 4px 0; }
+.cmp-frame {
+  position: relative; overflow: hidden; user-select: none; touch-action: none;
+  border: 1px solid var(--border); border-radius: 12px; line-height: 0;
+  cursor: ew-resize;
+}
+.cmp-img { display: block; width: 100%; height: auto; }
+.cmp-before { position: absolute; inset: 0; width: 50%; overflow: hidden; }
+.cmp-before .cmp-img-before { position: absolute; left: 0; top: 0; height: 100%; max-width: none; }
+.cmp-handle {
+  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
+  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); transform: translateX(-1px);
+}
+.cmp-handle-grip {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: 30px; height: 30px; border-radius: 50%;
+  background: #fff; color: #333; box-shadow: 0 1px 4px rgba(0,0,0,0.35);
+  display: grid; place-items: center; font-size: 13px; cursor: ew-resize;
+}
+.cmp-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cmp-tag {
+  position: absolute; bottom: 10px; padding: 3px 8px; border-radius: 6px;
+  font-size: 0.72rem; line-height: 1.4; color: #fff; background: rgba(0,0,0,0.55);
+  pointer-events: none;
+}
+.cmp-tag-before { left: 10px; }
+.cmp-tag-after { right: 10px; }
+
+/* ---------- reference links (open a visual in a modal) ---------- */
+.rly-reflink {
+  display: inline-flex; align-items: center; gap: 0.3em;
+  color: var(--accent); cursor: pointer; text-decoration: none;
+  border-bottom: 1px solid transparent; border-radius: 4px;
+  transition: border-color 150ms var(--ease);
+}
+.rly-reflink:hover { border-bottom-color: var(--accent); }
+.rly-reflink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.rly-reflink-ico {
+  flex: none; width: 0.85em; height: 0.85em;
+  border: 1.6px solid currentColor; border-radius: 50%;
+  position: relative;
+}
+.rly-reflink-ico::after {
+  content: ''; position: absolute; width: 0.42em; height: 1.6px;
+  background: currentColor; right: -0.28em; bottom: 0.02em;
+  transform: rotate(45deg); transform-origin: left center;
+}
+/* floating "↩ Back" pill shown after a reference jumps to a non-modal block */
+.rly-refback {
+  position: fixed; left: 18px; bottom: 18px; z-index: 60;
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px; font: inherit; font-size: 0.85rem; font-weight: 500;
+  color: var(--accent-fg); background: var(--accent);
+  border: 0; border-radius: 999px; cursor: pointer;
+  box-shadow: var(--shadow-lift);
+  animation: rly-refback-in 180ms var(--ease);
+}
+.rly-refback:hover { filter: brightness(1.06); }
+@keyframes rly-refback-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+/* brief highlight when a reference jumps to a non-modal block */
+.rly-refflash { animation: rly-refflash 1.2s var(--ease); }
+@keyframes rly-refflash {
+  0%, 100% { box-shadow: 0 0 0 0 transparent; }
+  20% { box-shadow: 0 0 0 3px var(--accent); }
+}
+
+/* ---------- image coordinate pins (block.pins) ---------- */
+.blk-img-pinnable { cursor: crosshair; }
+.blk-imgpins { position: absolute; inset: 0; pointer-events: none; }
+.blk-imgpin {
+  position: absolute; transform: translate(-50%, -50%);
+  min-width: 22px; height: 22px; padding: 0 6px;
+  border-radius: 11px; border: 2px solid #fff;
+  background: var(--accent); color: #fff;
+  font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1;
+  cursor: pointer; pointer-events: auto;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
+  display: grid; place-items: center;
+}
+.blk-imgpin:hover { filter: brightness(1.08); }