@khanglvm/relay 0.15.0 → 0.16.1

package/src/ui/blocks.css

@@ -648,26 +648,37 @@
 }
 .blk-imagewrap .blk-img {
   display: block;
-  max-width: 100%;
+  width: 100%;
+  max-width: none;
   height: auto;
+  -webkit-user-drag: none;
+  user-select: none;
   border-radius: 6px;
   object-fit: contain;
   object-position: left top;
 }
+.blk-imgstage {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  line-height: 0;
+}
 /* In full-screen a per-block height must never keep the image small — that
    height only shapes the inline preview; the detail view needs every pixel.
    (Belt-and-suspenders alongside the viewer's reapply() on full-screen toggle.) */
 .blk-imagewrap.blk-full .blk-img { max-height: none !important; }
 
 /* ---------- viewer controls (full-screen) ---------- */
-/* The full-screen button lives in a reserved strip ABOVE the visual (user
-   feedback: never overlay the content). padding-top reserves the strip;
-   the bar is a full-width transparent row with the button at the right. */
-.blk-viewer { position: relative; padding-top: 34px; }
+/* The controls participate in layout above the visual and use native sticky
+   positioning. The previous JS counter-translation chased scrollTop one event
+   behind the compositor, which made the bar visibly trail trackpad scrolling. */
+.blk-viewer { position: relative; }
 .blk-tools {
-  position: absolute; top: 4px; left: 4px; right: 4px; height: 26px;
+  position: sticky; top: 0; left: 0; width: 100%; height: 34px;
   display: flex; gap: 2px; align-items: center; justify-content: flex-end;
-  z-index: 5;
+  box-sizing: border-box; padding: 4px;
+  background: var(--bg-sunken); border-bottom: 1px solid var(--border);
+  z-index: 16;
 }
 .blk-tools button {
   background: var(--card); border: 1px solid var(--border); color: var(--fg-2);
@@ -693,6 +704,7 @@ body.blk-full-open { overflow: hidden; }
 /* detach the toolbar from the scrolling content and fix it to the viewport top */
 .blk-full > .blk-tools {
   position: fixed; top: 0; left: 0; right: 0; height: 44px;
+  width: auto;
   margin: 0; padding: 0 12px;
   background: var(--card); border-bottom: 1px solid var(--border);
   z-index: 51;
@@ -727,6 +739,7 @@ body.blk-full-open { overflow: hidden; }
 .blk-plantuml.blk-full > svg,
 .blk-plantuml.blk-full > .blk-plantuml-img,
 .blk-imagewrap.blk-full > .blk-img { margin: auto; }
+.blk-imagewrap.blk-full > .blk-imgstage { margin: auto; max-width: none; }
 
 /* Small frame on charts + mermaid so they read as a deliberate card, matching
    the graphviz/plantuml/image blocks (already framed). Scoped to the inner
@@ -746,6 +759,9 @@ body.blk-full-open { overflow: hidden; }
    dragging. During an active drag the inner svg/img/canvas ignore the pointer
    so hover pins/cursors don't flicker and the whole surface shows "grabbing". */
 .blk-pannable { cursor: grab; }
+.blk-has-regions.blk-pannable { cursor: crosshair; }
+body.blk-space-pan .blk-has-regions.blk-pannable,
+body.blk-space-pan .blk-has-regions.blk-pannable * { cursor: grab !important; }
 .blk-panning { cursor: grabbing; user-select: none; }
 .blk-panning svg,
 .blk-panning img,
@@ -778,6 +794,19 @@ body.blk-full-open { overflow: hidden; }
   background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
 }
 .blk-tools .tool-comment.has-comment:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
+.blk-tools .tool-region {
+  display: inline-flex; align-items: center; gap: 5px;
+}
+.blk-tools .tool-region svg { display: block; }
+.blk-tools .tool-region.is-active {
+  background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
+}
+.blk-tools .tool-region.is-active:hover {
+  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg);
+}
+@media (max-width: 520px) {
+  .blk-tools .tool-region-label { display: none; }
+}
 
 /* code blocks reuse the viewer toolbar (comment + full-screen); the pre keeps
    its own card, the wrapper only hosts the toolbar strip */
@@ -836,7 +865,7 @@ body.blk-full-open { overflow: hidden; }
 .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;
+  cursor: crosshair;
 }
 .cmp-img { display: block; width: 100%; height: auto; }
 .cmp-before { position: absolute; inset: 0; width: 50%; overflow: hidden; }
@@ -844,6 +873,7 @@ body.blk-full-open { overflow: hidden; }
 .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);
+  cursor: ew-resize;
 }
 .cmp-handle-grip {
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
@@ -898,7 +928,7 @@ body.blk-full-open { overflow: hidden; }
   20% { box-shadow: 0 0 0 3px var(--accent); }
 }
 
-/* ---------- image coordinate pins (block.pins) ---------- */
+/* ---------- image point + area comments ---------- */
 .blk-img-pinnable { cursor: crosshair; }
 .blk-imgpins { position: absolute; inset: 0; pointer-events: none; }
 .blk-imgpin {
@@ -912,3 +942,54 @@ body.blk-full-open { overflow: hidden; }
   display: grid; place-items: center;
 }
 .blk-imgpin:hover { filter: brightness(1.08); }
+.blk-region-layer { position: absolute; inset: 0; pointer-events: none; }
+.blk-region-selection,
+.blk-imgregion {
+  position: absolute;
+  border: 2px solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.75) inset;
+  border-radius: 5px;
+}
+.blk-region-selection { display: none; z-index: 7; }
+.blk-imgregion {
+  z-index: 6;
+  pointer-events: auto;
+  cursor: pointer;
+  color: var(--accent-fg);
+  padding: 0;
+  min-width: 10px;
+  min-height: 10px;
+  appearance: none;
+}
+.blk-imgregion-badge {
+  position: absolute; top: -11px; right: -11px;
+  min-width: 24px; height: 22px; padding: 0 6px;
+  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
+  border: 2px solid #fff; border-radius: 999px;
+  background: var(--accent); color: #fff;
+  font: 600 0.68rem/1 var(--sans);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  pointer-events: none;
+}
+.blk-imgregion-badge svg { width: 10px; height: 10px; }
+.blk-imgregion-count { min-width: 0.7em; text-align: center; }
+.blk-imgregion-provisional {
+  z-index: 8;
+  border-style: dashed;
+  background: color-mix(in srgb, var(--card) 34%, var(--accent) 20%);
+}
+.blk-imgregion-provisional .blk-imgregion-badge { opacity: 0.9; }
+.blk-region-mode,
+.blk-region-mode * { cursor: crosshair !important; }
+.blk-region-mode { touch-action: none; }
+.blk-region-arming { cursor: crosshair !important; }
+.blk-region-selecting { cursor: crosshair !important; touch-action: none; }
+.blk-region-status {
+  position: absolute; left: 50%; bottom: 12px; z-index: 9;
+  transform: translateX(-50%);
+  padding: 6px 10px; border-radius: 8px;
+  background: rgba(28,27,25,0.86); color: #fff;
+  font: 500 0.74rem/1.2 var(--sans);
+  pointer-events: none;
+}