relic-mcp 0.14.1 → 0.14.2

package/.claude-plugin/marketplace.json

@@ -10,7 +10,7 @@
     {
       "name": "relic",
       "description": "Publish a file from your machine as an encrypted, shareable link. The agent encrypts locally, uploads only ciphertext, and hands back a URL whose fragment holds the key, so the service stores something it cannot read.",
-      "version": "0.14.1",
+      "version": "0.14.2",
       "source": "./",
       "author": {
         "name": "The Bushido Collective",
@@ -21,6 +21,6 @@
     }
   ],
   "metadata": {
-    "version": "0.14.1"
+    "version": "0.14.2"
   }
 }

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "relic",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Publish a file from your machine as an encrypted, shareable link. The agent encrypts locally, uploads only ciphertext, and hands back a URL whose fragment holds the key, so the service stores something it cannot read.",
   "mcpServers": "./mcp-servers.json",
   "author": {

package/dist/cover/cover.js

@@ -20673,9 +20673,9 @@ async function renderFrameCover(kind, source, dialect, root) {
       return;
     if (data.type === "relic:sandbox-ready") {
       if (kind === "html") {
-        iframe.contentWindow?.postMessage({ type: "relic:render", html: codeToSend }, "*");
+        iframe.contentWindow?.postMessage({ type: "relic:render", html: codeToSend, cover: true }, "*");
       } else {
-        iframe.contentWindow?.postMessage({ type: "relic:render-jsx", code: codeToSend }, "*");
+        iframe.contentWindow?.postMessage({ type: "relic:render-jsx", code: codeToSend, cover: true }, "*");
       }
     } else if (data.type === "relic:tree") {
       cleanup();

package/dist/cover/frame.html

@@ -11561,6 +11561,12 @@ function isTrackMarkMessage(data) {
     return true;
   return typeof msg.id === "string" && msg.id.length > 0 && msg.id.length <= 256;
 }
+function isFrameVisibilityMessage(data) {
+  if (typeof data !== "object" || data === null)
+    return false;
+  const msg = data;
+  return msg.type === "relic:frame-visibility" && typeof msg.visible === "boolean";
+}
 function isActiveMarkMessage(data) {
   if (typeof data !== "object" || data === null)
     return false;
@@ -11702,6 +11708,127 @@ function isSetScrollMessage(data) {
   return isFractionMessage(data, "relic:set-scroll");
 }
 
+// ../relic-viewer/src/mark-visibility.ts
+var CONCEALED_ATTRIBUTE = "data-concealed";
+var CONCEALMENT_CSS = `
+[${CONCEALED_ATTRIBUTE}='hidden']:not(mark) { display: none !important; }
+[${CONCEALED_ATTRIBUTE}='offscreen']:not(mark) { opacity: 0 !important; }
+mark[${CONCEALED_ATTRIBUTE}] {
+  background: none !important;
+  border-bottom-color: transparent !important;
+  box-shadow: none !important;
+}
+`;
+function isRendered(el) {
+  if (el.isConnected !== true)
+    return true;
+  const probe = el.checkVisibility;
+  if (typeof probe === "function") {
+    if (!probe.call(el, { checkVisibilityCSS: true, checkOpacity: false })) {
+      return false;
+    }
+  } else {
+    for (let node = el;node; node = node.parentElement) {
+      if (typeof node.hasAttribute === "function" && node.hasAttribute("hidden")) {
+        return false;
+      }
+      if (node.tagName === "DETAILS" && !node.open) {
+        const summary = Array.from(node.children).find((child) => child.tagName === "SUMMARY");
+        if (!summary || !summary.contains(el))
+          return false;
+      }
+      const style = node.style;
+      if (style && (style.display === "none" || style.visibility === "hidden")) {
+        return false;
+      }
+    }
+  }
+  const rects = typeof el.getClientRects === "function" ? el.getClientRects() : undefined;
+  if (rects !== undefined && rects.length === 0)
+    return false;
+  return true;
+}
+function setConcealed(node, concealment) {
+  const current = node.getAttribute(CONCEALED_ATTRIBUTE);
+  if (concealment === undefined) {
+    if (current !== null)
+      node.removeAttribute(CONCEALED_ATTRIBUTE);
+    return;
+  }
+  if (current !== concealment)
+    node.setAttribute(CONCEALED_ATTRIBUTE, concealment);
+}
+function createScrollportWatch(onChange) {
+  const inside = new WeakMap;
+  const observed = new Set;
+  const observer = typeof IntersectionObserver === "function" ? new IntersectionObserver((entries) => {
+    let changed = false;
+    for (const entry of entries) {
+      if (inside.get(entry.target) !== entry.isIntersecting) {
+        inside.set(entry.target, entry.isIntersecting);
+        changed = true;
+      }
+    }
+    if (changed)
+      onChange();
+  }) : undefined;
+  return {
+    sync(elements) {
+      if (observer === undefined)
+        return;
+      const wanted = new Set(elements);
+      for (const el of observed) {
+        if (wanted.has(el))
+          continue;
+        observer.unobserve(el);
+        observed.delete(el);
+        inside.delete(el);
+      }
+      for (const el of wanted) {
+        if (observed.has(el))
+          continue;
+        observer.observe(el);
+        observed.add(el);
+      }
+    },
+    inView(el) {
+      return inside.get(el) !== false;
+    },
+    disconnect() {
+      observer?.disconnect();
+      observed.clear();
+    }
+  };
+}
+function concealMarks(marks, watch, live = true) {
+  watch.sync(marks.map((mark) => mark.node));
+  const merged = new Map;
+  for (const { node, subject } of marks) {
+    const id = node.getAttribute("data-comment-id");
+    if (id === null || id === "")
+      continue;
+    const concealment = !live || !isRendered(subject) ? "hidden" : !watch.inView(node) ? "offscreen" : "shown";
+    setConcealed(node, concealment === "shown" ? undefined : concealment);
+    const previous = merged.get(id);
+    merged.set(id, mergeReason(previous, concealment));
+  }
+  const out = new Map;
+  for (const [id, reason] of merged) {
+    if (reason !== "shown")
+      out.set(id, reason);
+  }
+  return out;
+}
+function mergeReason(previous, next) {
+  if (previous === undefined)
+    return next;
+  if (previous === "shown" || next === "shown")
+    return "shown";
+  if (previous === "hidden" || next === "hidden")
+    return "hidden";
+  return "offscreen";
+}
+
 // ../relic-viewer/src/rendered-tree.ts
 function isRevealChangeMessage(data) {
   if (typeof data !== "object" || data === null)
@@ -12098,19 +12225,35 @@ var FRAME_MARK_CSS = `
   cursor: default !important;
 }
 .relic-image-layer { position: fixed !important; inset: 0 !important; z-index: 2147483646 !important; pointer-events: none !important; }
-.relic-image-control, .relic-image-mark {
+.relic-image-row {
   position: absolute !important; box-sizing: border-box !important;
-  width: 32px !important; height: 32px !important; padding: 0 !important;
+  display: flex !important; align-items: flex-start !important; gap: 10px !important;
+  padding: 6px !important; margin: 0 !important; max-height: 56px !important;
+  overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important;
+  pointer-events: none !important; overscroll-behavior: contain !important;
+}
+.relic-image-row.has-marks { pointer-events: auto !important; }
+.relic-image-mark, .relic-image-control {
+  position: relative !important; box-sizing: border-box !important; flex: 0 0 28px !important;
+  display: flex !important; align-items: center !important; justify-content: center !important;
+  width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important;
   border: 2px solid white !important; border-radius: 50% !important;
-  background: #806026 !important; color: white !important; font: bold 18px sans-serif !important;
+  background: #806026 !important; color: white !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
   cursor: pointer !important; pointer-events: auto !important;
 }
+.relic-image-control {
+  opacity: 0 !important; pointer-events: none !important;
+  transition: opacity 0.12s ease !important;
+}
+.relic-image-control svg, .relic-image-mark svg { display: block !important; width: 14px !important; height: 14px !important; fill: currentColor !important; pointer-events: none !important; }
+.relic-image-control.is-shown, .relic-image-control:focus-visible { opacity: 1 !important; pointer-events: auto !important; }
+.relic-image-mark.is-active, .relic-image-mark.is-paired { outline: 3px solid #806026 !important; outline-offset: 2px !important; }
 .relic-image-control:focus-visible, .relic-image-mark:focus-visible { outline: 3px solid #222 !important; outline-offset: 2px !important; }
-.relic-image-mark.is-active, .relic-image-mark.is-paired { outline: 3px solid #806026 !important; }
 .relic-image-mark.is-resolved { background: #777 !important; }
-.relic-image-mark.is-pending { pointer-events: none !important; opacity: .6 !important; }
+.relic-image-mark.is-pending { pointer-events: none !important; opacity: .6 !important; border-style: dashed !important; }
 .relic-image-outline { position: absolute !important; box-sizing: border-box !important; border: 2px solid #b48c3c !important; pointer-events: none !important; }
-.relic-image-control[hidden] { display: none !important; }
+.relic-image-control[hidden], .relic-image-row[hidden] { display: none !important; }
 .relic-pointing-active, .relic-pointing-active * {
   cursor: crosshair !important;
 }
@@ -12120,7 +12263,7 @@ function ensureFrameStyles(doc) {
     return;
   const style = doc.createElement("style");
   style.id = "relic-frame-styles";
-  style.textContent = FRAME_MARK_CSS;
+  style.textContent = FRAME_MARK_CSS + CONCEALMENT_CSS;
   doc.head?.appendChild(style);
 }
 function markFrameRect(el) {
@@ -12314,6 +12457,42 @@ function documentSize(doc) {
 }
 var frameOwnedNodes = new WeakSet;
 var frameRegionOverlays = new WeakMap;
+var markSubjects = new WeakMap;
+function isFrameOwned(node) {
+  for (let current = node;current; current = current.parentNode) {
+    if (frameOwnedNodes.has(current))
+      return true;
+  }
+  return false;
+}
+function subjectAt(doc, x, y) {
+  const body = doc.body;
+  if (!body || typeof body.getElementsByTagName !== "function")
+    return;
+  const scrollX = doc.defaultView?.scrollX ?? 0;
+  const scrollY = doc.defaultView?.scrollY ?? 0;
+  let best;
+  let bestArea = Number.POSITIVE_INFINITY;
+  for (const el of Array.from(body.getElementsByTagName("*"))) {
+    if (isFrameOwned(el) || typeof el.getBoundingClientRect !== "function") {
+      continue;
+    }
+    const box = el.getBoundingClientRect();
+    if (box.width <= 0 || box.height <= 0)
+      continue;
+    const left = box.left + scrollX;
+    const top = box.top + scrollY;
+    if (x < left || x > left + box.width || y < top || y > top + box.height) {
+      continue;
+    }
+    const area = box.width * box.height;
+    if (area <= bestArea) {
+      best = el;
+      bestArea = area;
+    }
+  }
+  return best;
+}
 function frameOverlay(doc) {
   if (!doc.body)
     return;
@@ -12349,6 +12528,9 @@ function paintFrameRegion(root, rect, id) {
   div.style.width = `${rect.w * docWidth}px`;
   div.style.height = `${rect.h * docHeight}px`;
   wireFrameMark(div, id, doc);
+  const subject = subjectAt(doc, (rect.x + rect.w / 2) * docWidth, (rect.y + rect.h / 2) * docHeight);
+  if (subject)
+    markSubjects.set(div, subject);
   overlay.appendChild(div);
   return div;
 }
@@ -12364,6 +12546,9 @@ function paintFramePin(root, point, id) {
   pin.dataset.commentId = id;
   pin.style.left = `${point.x * layer.docWidth}px`;
   pin.style.top = `${point.y * layer.docHeight}px`;
+  const subject = subjectAt(doc, point.x * layer.docWidth, point.y * layer.docHeight);
+  if (subject)
+    markSubjects.set(pin, subject);
   if (!pending)
     wireFrameMark(pin, id, doc);
   layer.overlay.appendChild(pin);
@@ -12486,13 +12671,29 @@ function applyDocumentScrollFraction(doc, win, fraction) {
   const bounded = Math.min(Math.max(fraction, 0), 1);
   applyDocumentScrollTop(doc, win, bounded * travel);
 }
-function setupImageMarks(doc, win, post, tracked, enabled) {
+var COMMENT_PLUS_PATH = "M256 480c141.4 0 256-107.5 256-240S397.4 0 256 0 0 107.5 0 240c0 54.3 19.2 104.3 51.6 144.5L2.8 476.8c-4.8 9-3.3 20 3.6 27.5s17.8 9.8 27.1 5.8l118.4-50.7C183.7 472.6 218.9 480 256 480zm0-336c13.3 0 24 10.7 24 24l0 48 48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0 0 48c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-48-48 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0 0-48c0-13.3 10.7-24 24-24z";
+var COMMENT_PATH = "M512 240c0 132.5-114.6 240-256 240-37.1 0-72.3-7.4-104.1-20.7L33.5 510.1c-9.4 4-20.2 1.7-27.1-5.8S-2 485.8 2.8 476.8l48.8-92.2C19.2 344.3 0 294.3 0 240 0 107.5 114.6 0 256 0S512 107.5 512 240z";
+function imageCommentIcon(doc, add = false) {
+  const ns = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(ns, "svg");
+  svg.setAttribute("viewBox", "0 0 512 512");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.appendChild(doc.createComment("! Font Awesome Pro 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc."));
+  const path = doc.createElementNS(ns, "path");
+  path.setAttribute("d", add ? COMMENT_PLUS_PATH : COMMENT_PATH);
+  svg.appendChild(path);
+  return svg;
+}
+function setupImageMarks(doc, win, post, tracked, enabled, inParent) {
   const entries = new Map;
   const controls = new Map;
+  const rows = new Map;
   const hashes = new WeakMap;
   let layer;
   let scheduled = false;
   let serial = 0;
+  const pairedIds = new Set;
   let resizeObserver;
   let disposed = false;
   let activeId = null;
@@ -12571,6 +12772,10 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
     return node.tagName.toLowerCase() === "img" ? node : undefined;
   };
   const visible = (img) => {
+    if (!inParent())
+      return;
+    if (!isRendered(img))
+      return;
     if (!img.isConnected || !img.complete || img.naturalWidth === 0 || isOwned(img))
       return;
     const rect = markFrameRect(img);
@@ -12623,6 +12828,7 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
       for (const image of controls.keys())
         resizeObserver?.unobserve(image);
       controls.clear();
+      rows.clear();
       for (const entry of entries.values())
         remove(entry);
     }
@@ -12634,20 +12840,147 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
     return layer;
   };
   const remove = (entry) => {
+    const image = entry.image;
     entry.badge?.remove();
     entry.outline?.remove();
     delete entry.badge;
     delete entry.outline;
     delete entry.image;
     delete entry.declaration;
+    if (image)
+      layoutRow(image);
+  };
+  const reportConcealed = (entry, mark, img) => {
+    const concealment = isRendered(img) ? "offscreen" : "hidden";
+    const key = `concealed:${concealment}`;
+    if (entry.reported === key)
+      return;
+    entry.reported = key;
+    post({
+      type: "relic:frame-image-placement",
+      id: mark.id,
+      requestId: mark.requestId,
+      status: "concealed",
+      concealment
+    });
   };
-  const position = (el, rect, offset = 0) => {
-    const width = Math.min(32, rect.width);
-    const height = Math.min(32, rect.height);
-    el.style.setProperty("width", `${width}px`, "important");
-    el.style.setProperty("height", `${height}px`, "important");
-    el.style.left = `${Math.max(rect.left, rect.left + rect.width - width - offset % 6 * 36)}px`;
-    el.style.top = `${Math.min(rect.top + rect.height - height, rect.top + Math.floor(offset / 6) * 36)}px`;
+  const CONTROL_SIZE = 28;
+  const ROW_GAP = 10;
+  const ROW_PADDING = 6;
+  const layoutRow = (img) => {
+    const row = rows.get(img);
+    const rect = visible(img);
+    if (!row)
+      return;
+    row.hidden = !rect;
+    if (!rect)
+      return;
+    const count = row.children.length;
+    const fullWidth = count * CONTROL_SIZE + (count - 1) * ROW_GAP + ROW_PADDING * 2;
+    const width = Math.min(fullWidth, Math.max(rect.width, 78), win.innerWidth);
+    const roomy = rect.width >= 56 && rect.height >= 56;
+    const right = rect.left + rect.width + (roomy ? -8 : CONTROL_SIZE / 2) + ROW_PADDING;
+    const top = rect.top + (roomy ? 8 : -CONTROL_SIZE / 2) - ROW_PADDING;
+    row.style.width = `${width}px`;
+    row.style.left = `${Math.max(0, Math.min(right - width, win.innerWidth - width))}px`;
+    row.style.top = `${Math.max(0, Math.min(top, win.innerHeight - 56))}px`;
+    row.classList.toggle("has-marks", count > 1);
+    row.style.setProperty("scroll-padding-inline", `${ROW_PADDING}px`);
+  };
+  const revealButton = (row, button) => {
+    const box = button.getBoundingClientRect();
+    const viewport = row.getBoundingClientRect();
+    if (box.left < viewport.left + ROW_PADDING)
+      row.scrollLeft -= viewport.left + ROW_PADDING - box.left;
+    else if (box.right > viewport.right - ROW_PADDING)
+      row.scrollLeft += box.right - viewport.right + ROW_PADDING;
+  };
+  const revealBadge = (entry) => {
+    const row = entry.image && rows.get(entry.image);
+    if (row && entry.badge)
+      revealButton(row, entry.badge);
+  };
+  const reportRows = () => {
+    for (const entry of entries.values()) {
+      if (!entry.badge || !entry.image || entry.declaration !== source(entry.image))
+        continue;
+      const row = rows.get(entry.image);
+      const box = markFrameRect(entry.badge);
+      const clip = row && markFrameRect(row);
+      if (!box || !clip || row?.hidden)
+        continue;
+      const id = entry.mark.id;
+      if (box.left < clip.left + ROW_PADDING - 0.5 || box.left + box.width > clip.left + clip.width - ROW_PADDING + 0.5) {
+        if (entry.reported !== "concealed:offscreen") {
+          entry.reported = "concealed:offscreen";
+          post({
+            type: "relic:frame-image-placement",
+            id,
+            requestId: entry.mark.requestId,
+            status: "concealed",
+            concealment: "offscreen"
+          });
+        }
+        continue;
+      }
+      entry.reported = "placed";
+      post({
+        type: "relic:frame-image-placement",
+        id,
+        requestId: entry.mark.requestId,
+        status: "placed",
+        rect: box
+      });
+      if (tracked() === id)
+        post({ type: "relic:frame-mark-rect", id, rect: box });
+    }
+  };
+  let rowReportScheduled = false;
+  const scheduleRowReport = () => {
+    if (rowReportScheduled)
+      return;
+    rowReportScheduled = true;
+    queueMicrotask(() => {
+      rowReportScheduled = false;
+      if (!disposed)
+        reportRows();
+    });
+  };
+  let pointer;
+  const updateHover = () => {
+    const always = win.matchMedia?.("(hover: none)").matches ?? false;
+    let target;
+    let targetArea = Number.POSITIVE_INFINITY;
+    if (pointer && !always) {
+      const { x, y } = pointer;
+      const inside = (r) => x >= r.left && x <= r.left + r.width && y >= r.top && y <= r.top + r.height;
+      for (const [img, button] of controls) {
+        if (button.hidden)
+          continue;
+        const rect = visible(img);
+        const box = (rows.get(img) ?? button).getBoundingClientRect();
+        if (!(rect && inside(rect)) && !inside(box))
+          continue;
+        const area = rect ? rect.width * rect.height : 0;
+        if (area <= targetArea) {
+          target = img;
+          targetArea = area;
+        }
+      }
+    }
+    for (const [img, button] of controls)
+      button.classList.toggle("is-shown", always || img === target);
+  };
+  const onPointerMove = (event) => {
+    const { clientX, clientY } = event;
+    pointer = { x: clientX, y: clientY };
+    updateHover();
+  };
+  const onPointerLeave = (event) => {
+    if (event.relatedTarget !== null)
+      return;
+    pointer = undefined;
+    updateHover();
   };
   const schedule = () => {
     if (!enabled)
@@ -12673,9 +13006,10 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
       return;
     const images = Array.from(doc.body.querySelectorAll("img")).filter((img) => !isOwned(img));
     const live = new Set(images);
-    for (const [img, button] of controls) {
+    for (const img of controls.keys()) {
       if (!live.has(img)) {
-        button.remove();
+        rows.get(img)?.remove();
+        rows.delete(img);
         controls.delete(img);
         resizeObserver?.unobserve(img);
       }
@@ -12687,8 +13021,17 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
         button.type = "button";
         button.className = "relic-image-control";
         button.setAttribute("aria-label", "Comment on image");
-        button.textContent = "+";
-        host.appendChild(button);
+        button.appendChild(imageCommentIcon(doc, true));
+        const row = doc.createElement("div");
+        row.className = "relic-image-row";
+        row.appendChild(button);
+        row.addEventListener("scroll", reportRows);
+        button.addEventListener("focus", () => {
+          revealButton(row, button);
+          reportRows();
+        });
+        rows.set(img, row);
+        host.appendChild(row);
         controls.set(img, button);
         resizeObserver?.observe(img);
         const control = button;
@@ -12715,17 +13058,16 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
       }
       const rect = visible(img);
       button.hidden = !rect;
-      if (rect)
-        position(button, rect);
+      layoutRow(img);
     }
-    const positions = new Map;
+    updateHover();
     for (const entry of entries.values()) {
       const mark = entry.mark;
       const generation = ++entry.serial;
       const img = resolve(mark.path);
       const rect = img && visible(img);
       const declaration = img && source(img);
-      if (!img || !rect || !declaration || !/^[0-9a-f]{64}$/.test(mark.source_sha256) || new TextEncoder().encode(JSON.stringify({
+      if (!img || !declaration || !/^[0-9a-f]{64}$/.test(mark.source_sha256) || new TextEncoder().encode(JSON.stringify({
         kind: "image",
         path: mark.path,
         source_sha256: mark.source_sha256
@@ -12739,15 +13081,18 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
         });
         continue;
       }
+      if (!rect) {
+        remove(entry);
+        reportConcealed(entry, mark, img);
+        continue;
+      }
       if (entry.badge && (entry.image !== img || entry.declaration !== declaration))
         remove(entry);
-      const offset = (positions.get(img) ?? 0) + 1;
-      positions.set(img, offset);
       fingerprint(img).then((digest) => {
         if (entries.get(mark.id) !== entry || entry.serial !== generation)
           return;
         const currentRect = visible(img);
-        if (digest !== mark.source_sha256 || source(img) !== declaration || resolve(mark.path) !== img || !currentRect) {
+        if (digest !== mark.source_sha256 || source(img) !== declaration || resolve(mark.path) !== img) {
           remove(entry);
           post({
             type: "relic:frame-image-placement",
@@ -12757,6 +13102,12 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
           });
           return;
         }
+        if (!currentRect) {
+          remove(entry);
+          reportConcealed(entry, mark, img);
+          return;
+        }
+        const created = !entry.badge;
         if (!entry.badge) {
           entry.outline = doc.createElement("div");
           entry.outline.className = "relic-image-outline";
@@ -12766,43 +13117,38 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
           entry.badge.className = "relic-image-mark";
           entry.badge.dataset.commentId = mark.id;
           entry.badge.setAttribute("aria-label", "Open image comment");
-          entry.badge.textContent = "•";
-          if (mark.id === "pending:target")
+          entry.badge.appendChild(imageCommentIcon(doc));
+          if (mark.id === "pending:target") {
             entry.badge.classList.add("is-pending");
+            entry.badge.disabled = true;
+          }
           entry.badge.classList.toggle("is-active", mark.id === activeId);
+          entry.badge.classList.toggle("is-paired", pairedIds.has(mark.id));
           entry.badge.classList.toggle("is-resolved", quietIds.has(mark.id));
-          host.appendChild(entry.badge);
+          rows.get(img)?.insertBefore(entry.badge, controls.get(img) ?? null);
           wireFrameMark(entry.badge, mark.id, doc);
+          entry.badge.addEventListener("focus", () => {
+            revealBadge(entry);
+            reportRows();
+          });
         }
         entry.image = img;
         entry.declaration = declaration;
-        position(entry.badge, currentRect, offset);
         Object.assign(entry.outline.style, {
           left: `${currentRect.left}px`,
           top: `${currentRect.top}px`,
           width: `${currentRect.width}px`,
           height: `${currentRect.height}px`
         });
-        const box = markFrameRect(entry.badge);
-        if (box) {
-          post({
-            type: "relic:frame-image-placement",
-            id: mark.id,
-            requestId: mark.requestId,
-            status: "placed",
-            rect: box
-          });
-          if (tracked() === mark.id)
-            post({ type: "relic:frame-mark-rect", id: mark.id, rect: box });
-        } else {
-          remove(entry);
-          post({
-            type: "relic:frame-image-placement",
-            id: mark.id,
-            requestId: mark.requestId,
-            status: "unavailable"
-          });
+        layoutRow(img);
+        if (created) {
+          const row = rows.get(img);
+          if (row)
+            row.scrollLeft = row.scrollWidth;
         }
+        if (created && (mark.id === activeId || mark.id === tracked()))
+          revealBadge(entry);
+        scheduleRowReport();
       }).catch(() => {
         if (entries.get(mark.id) !== entry || entry.serial !== generation)
           return;
@@ -12833,6 +13179,8 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
       characterData: true
     });
   }
+  doc.addEventListener("pointermove", onPointerMove, true);
+  doc.addEventListener("mouseout", onPointerLeave);
   doc.addEventListener("load", schedule, true);
   doc.addEventListener("scroll", schedule, true);
   doc.addEventListener("DOMContentLoaded", schedule);
@@ -12844,6 +13192,8 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
       disposed = true;
       mutationObserver?.disconnect();
       resizeObserver?.disconnect();
+      doc.removeEventListener("pointermove", onPointerMove, true);
+      doc.removeEventListener("mouseout", onPointerLeave);
       doc.removeEventListener("load", schedule, true);
       doc.removeEventListener("scroll", schedule, true);
       doc.removeEventListener("DOMContentLoaded", schedule);
@@ -12851,13 +13201,53 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
       win.removeEventListener?.("scroll", schedule);
       entries.clear();
       controls.clear();
+      rows.clear();
       layer?.remove();
     },
     active(id) {
       activeId = id;
+      for (const entry of entries.values())
+        entry.badge?.classList.toggle("is-active", entry.mark.id === id);
+      const entry = id && entries.get(id);
+      if (entry)
+        revealBadge(entry);
+      reportRows();
+    },
+    rect(id) {
+      const entry = entries.get(id);
+      if (!entry)
+        return;
+      const message = { type: "relic:frame-mark-rect", id };
+      if (!entry.badge || !entry.image || entry.declaration !== source(entry.image))
+        return message;
+      const row = rows.get(entry.image);
+      const box = markFrameRect(entry.badge);
+      const clip = row && markFrameRect(row);
+      if (!visible(entry.image) || !box || !clip || row?.hidden)
+        return {
+          ...message,
+          concealed: isRendered(entry.image) ? "offscreen" : "hidden"
+        };
+      if (box.left < clip.left + ROW_PADDING - 0.5 || box.left + box.width > clip.left + clip.width - ROW_PADDING + 0.5)
+        return { ...message, concealed: "offscreen" };
+      return { ...message, rect: box };
+    },
+    repaint() {
+      if (!enabled || disposed)
+        return;
+      refresh();
     },
     quiet(ids) {
       quietIds = new Set(ids);
+      for (const entry of entries.values())
+        entry.badge?.classList.toggle("is-resolved", quietIds.has(entry.mark.id));
+    },
+    pair(id, active) {
+      if (active)
+        pairedIds.add(id);
+      else
+        pairedIds.delete(id);
+      entries.get(id)?.badge?.classList.toggle("is-paired", active);
     },
     paint(mark) {
       if (!enabled) {
@@ -12900,6 +13290,7 @@ function setupImageMarks(doc, win, post, tracked, enabled) {
           if (entries.get(id) !== entry || digest !== entry.mark.source_sha256 || source(img) !== declaration || resolve(entry.mark.path) !== img || !img.isConnected)
             return;
           img.scrollIntoView({ behavior: "smooth", block: "center" });
+          revealBadge(entry);
           schedule();
         }).catch(() => {});
       }
@@ -12924,8 +13315,51 @@ function setupFrameInteraction(doc, win, postOutward, imageControlsEnabled = tru
   let selectionLive = false;
   let trackedId = null;
   let trackRaf;
-  const imageMarks = setupImageMarks(doc, win, postOutward, () => trackedId, imageControlsEnabled);
+  let parentVisible = true;
+  let concealScheduled = false;
+  let concealedIds = new Map;
+  let trackedConcealment;
+  const conceal = () => {
+    concealScheduled = false;
+    if (!doc.body || typeof doc.body.querySelectorAll !== "function")
+      return;
+    const marks = [];
+    const overlay = frameRegionOverlays.get(doc);
+    if (overlay) {
+      for (const node of Array.from(overlay.querySelectorAll("[data-comment-id]"))) {
+        marks.push({ node, subject: markSubjects.get(node) ?? node });
+      }
+    }
+    for (const node of Array.from(doc.body.querySelectorAll("mark.relic-text-mark[data-comment-id]"))) {
+      marks.push({ node, subject: node });
+    }
+    concealedIds = concealMarks(marks, watch, parentVisible);
+    const next = trackedId === null ? undefined : concealedIds.get(trackedId);
+    if (next !== trackedConcealment) {
+      trackedConcealment = next;
+      reportTracked();
+    }
+  };
+  const scheduleConceal = () => {
+    if (concealScheduled)
+      return;
+    concealScheduled = true;
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(conceal);
+    } else {
+      setTimeout(conceal, 0);
+    }
+  };
+  const watch = createScrollportWatch(scheduleConceal);
+  const imageMarks = setupImageMarks(doc, win, postOutward, () => trackedId, imageControlsEnabled, () => parentVisible);
   const reportMarkRect = (document2, id) => {
+    const image = imageMarks.rect(id);
+    if (image)
+      return image;
+    const concealed = concealedIds.get(id);
+    if (concealed !== undefined) {
+      return { type: "relic:frame-mark-rect", id, concealed };
+    }
     if (!document2.body) {
       return { type: "relic:frame-mark-rect", id };
     }
@@ -13007,6 +13441,7 @@ function setupFrameInteraction(doc, win, postOutward, imageControlsEnabled = tru
     postOutward(report);
   };
   const scheduleTrackReport = () => {
+    scheduleConceal();
     if (trackedId === null)
       return;
     if (typeof requestAnimationFrame === "function") {
@@ -13047,6 +13482,18 @@ function setupFrameInteraction(doc, win, postOutward, imageControlsEnabled = tru
     });
     win.addEventListener("resize", () => scheduleTrackReport());
   }
+  if (typeof doc.addEventListener === "function") {
+    doc.addEventListener("scroll", scheduleConceal, true);
+    doc.addEventListener("toggle", scheduleConceal, true);
+  }
+  const markObserver = typeof MutationObserver === "function" && doc.nodeType === 9 ? new MutationObserver(scheduleConceal) : undefined;
+  markObserver?.observe(doc, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["class", "hidden", "open", "style"]
+  });
+  scheduleConceal();
   doc.addEventListener("click", (event) => {
     let node = event.target;
     if (node?.nodeType !== 1)
@@ -13073,7 +13520,7 @@ function setupFrameInteraction(doc, win, postOutward, imageControlsEnabled = tru
     if (!armed)
       return;
     const target = event.target;
-    if (typeof target?.closest === "function" && target.closest(".relic-region-mark, .relic-pin-mark, .relic-image-control, .relic-image-mark") !== null) {
+    if (typeof target?.closest === "function" && target.closest(".relic-region-mark, .relic-pin-mark, .relic-image-row") !== null) {
       return;
     }
     event.preventDefault?.();
@@ -13319,6 +13766,7 @@ function setupFrameInteraction(doc, win, postOutward, imageControlsEnabled = tru
       }
     },
     onPairMark(id, active) {
+      imageMarks.pair(id, active);
       if (!doc.body)
         return;
       const targets = doc.body.querySelectorAll(`[data-comment-id="${id}"]`);
@@ -13387,28 +13835,44 @@ function setupFrameInteraction(doc, win, postOutward, imageControlsEnabled = tru
         suppressScroll = false;
       }, 50);
     },
+    onFrameVisibility(visible) {
+      parentVisible = visible;
+      imageMarks.repaint();
+      conceal();
+    },
     dispose() {
       imageMarks.dispose();
+      if (typeof doc.removeEventListener === "function") {
+        doc.removeEventListener("scroll", scheduleConceal, true);
+        doc.removeEventListener("toggle", scheduleConceal, true);
+      }
+      watch.disconnect();
+      markObserver?.disconnect();
     }
   };
 }
 function createSandboxHandler(write, writeJsx, annotate = () => {}, interaction) {
   let rendered = false;
   let annotated = false;
+  let cover = false;
   return (data) => {
     if (!rendered) {
       if (isRenderMessage(data)) {
         rendered = true;
-        write(data.html);
+        cover = data.cover === true;
+        write(data.html, !cover);
         return true;
       }
       if (isRenderJsxMessage(data)) {
         rendered = true;
+        cover = data.cover === true;
         writeJsx(data.code);
         return true;
       }
       return false;
     }
+    if (cover)
+      return false;
     if (!annotated && isAnnotateMessage(data)) {
       annotated = true;
       annotate(data.marks, data.anchors);
@@ -13440,6 +13904,10 @@ function createSandboxHandler(write, writeJsx, annotate = () => {}, interaction)
       interaction?.onTrackMark?.(data.id);
       return true;
     }
+    if (isFrameVisibilityMessage(data)) {
+      interaction?.onFrameVisibility?.(data.visible);
+      return true;
+    }
     if (isActiveMarkMessage(data)) {
       interaction?.onActiveMark?.(data.id);
       return true;
@@ -13818,10 +14286,10 @@ if (typeof window !== "undefined" && typeof document !== "undefined") {
   };
   installSandboxContainment(window, document);
   let interaction;
-  const handle = createSandboxHandler((html) => {
+  const handle = createSandboxHandler((html, imageControlsEnabled) => {
     document.open();
     installSandboxContainment(window, document);
-    initInteraction(true);
+    initInteraction(imageControlsEnabled);
     document.write(sanitizeFrameHtml(html));
     document.close();
     listen();
@@ -13845,7 +14313,9 @@ if (typeof window !== "undefined" && typeof document !== "undefined") {
     onRevealMark: (msg) => interaction?.onRevealMark(msg),
     onPairMark: (id, active) => interaction?.onPairMark(id, active),
     onTrackMark: (id) => interaction?.onTrackMark?.(id),
+    onFrameVisibility: (visible) => interaction?.onFrameVisibility?.(visible),
     onActiveMark: (id) => interaction?.onActiveMark?.(id),
+    onQuietMarks: (ids) => interaction?.onQuietMarks?.(ids),
     onRevealChange: (changeId, top) => interaction?.onRevealChange?.(changeId, top),
     onSetScroll: (fraction) => interaction?.onSetScroll?.(fraction)
   });

package/dist/cover/styles.css

@@ -6205,3 +6205,23 @@ canvas.relic-page {
   background: var(--diff-added);
   border-left: 2px solid var(--patina);
 }
+
+/* A mark the viewer does not draw. A hidden overlay leaves layout, because its
+   thing has no box. An offscreen overlay is made transparent and keeps its box
+   and hit testing: reveal measures both after a scroll, before the observer
+   has caught up. A text mark keeps its words and loses only its decoration.
+   The frame carries the same rules in CONCEALMENT_CSS (mark-visibility.ts),
+   because it cannot read this sheet. */
+[data-concealed='hidden']:not(mark) {
+  display: none !important;
+}
+
+[data-concealed='offscreen']:not(mark) {
+  opacity: 0 !important;
+}
+
+mark[data-concealed] {
+  background: none !important;
+  border-bottom-color: transparent !important;
+  box-shadow: none !important;
+}

package/dist/relic-mcp.js

@@ -36993,7 +36993,7 @@ var DESCRIBE_TOOL_DEFINITION = {
     additionalProperties: false
   }
 };
-var SERVER_VERSION = "0.14.1";
+var SERVER_VERSION = "0.14.2";
 var SERVER_INFO = {
   name: "relic",
   title: "Relic",

package/mcp-servers.json

@@ -4,10 +4,10 @@
     "command": "npx",
     "args": [
       "-y",
-      "relic-mcp@0.14.1"
+      "relic-mcp@0.14.2"
     ],
     "env": {
-      "RELIC_CLIENT_NAME": "relic-plugin/0.14.1"
+      "RELIC_CLIENT_NAME": "relic-plugin/0.14.2"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relic-mcp",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Publish a file as an encrypted relic. The key is generated on your machine and never sent to the service.",
   "license": "MIT",
   "type": "module",

package/prebuilds/darwin-arm64/build-info.json

@@ -19,7 +19,7 @@
   },
   "nodeApiVersion": 8,
   "schemaVersion": 3,
-  "sourceSha256": "7a509ea5074aaf9f22c201ded3db3a811205c2f132d2c1331860d91981b59140",
+  "sourceSha256": "4848f49a1af80a1da9be79d16a5555efe709e76e91a34146015874b34e752921",
   "target": "darwin-arm64",
   "toolchain": {
     "binaryDeploymentTarget": "15.0",

package/prebuilds/darwin-x64/build-info.json

@@ -19,7 +19,7 @@
   },
   "nodeApiVersion": 8,
   "schemaVersion": 3,
-  "sourceSha256": "7a509ea5074aaf9f22c201ded3db3a811205c2f132d2c1331860d91981b59140",
+  "sourceSha256": "4848f49a1af80a1da9be79d16a5555efe709e76e91a34146015874b34e752921",
   "target": "darwin-x64",
   "toolchain": {
     "binaryDeploymentTarget": "15.0",

package/prebuilds/linux-arm64-gnu/build-info.json

@@ -20,7 +20,7 @@
   },
   "nodeApiVersion": 8,
   "schemaVersion": 3,
-  "sourceSha256": "7a509ea5074aaf9f22c201ded3db3a811205c2f132d2c1331860d91981b59140",
+  "sourceSha256": "4848f49a1af80a1da9be79d16a5555efe709e76e91a34146015874b34e752921",
   "target": "linux-arm64-gnu",
   "toolchain": {
     "compilerPath": "/opt/rh/gcc-toolset-14/root/usr/bin/gcc",

package/prebuilds/linux-x64-gnu/build-info.json

@@ -20,7 +20,7 @@
   },
   "nodeApiVersion": 8,
   "schemaVersion": 3,
-  "sourceSha256": "7a509ea5074aaf9f22c201ded3db3a811205c2f132d2c1331860d91981b59140",
+  "sourceSha256": "4848f49a1af80a1da9be79d16a5555efe709e76e91a34146015874b34e752921",
   "target": "linux-x64-gnu",
   "toolchain": {
     "compilerPath": "/opt/rh/gcc-toolset-14/root/usr/bin/gcc",