mesurer 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # mesurer
 
+## 0.2.7
+
+- add a pens tray to the pen tool: pick ink or marker, set each one's width and colour, and find each as it was left
+- add an eraser to the pen tool that rubs out only the part of a stroke it passes over
+- make ink strokes smooth, with a width that changes with how fast or hard you draw
+
+## 0.2.6
+
+- add responsive previews (`B`): the page at several screen sizes side by side, with Inspect, Comments, Guides, and X-ray working in each
+- add comments inside previews, copied grouped by URL and viewport
+- change `M` to toggle Comments, not Mesurer on/off
+- change Persist to on by default
+- fix motion card scope, stuck trimmed video exports, and page shortcuts firing while typing in the extension
+
 ## 0.2.5
 
 - add a toolbar dock that snaps to the edges and corners of the screen, with a vertical layout on the left and right; choose Free in Settings to keep the toolbar floating

package/README.md

@@ -52,13 +52,13 @@ function App() {
 | `guideHighlightEnabled` | Highlights guides when they are hovered or selected. Default `true`.          |
 | `hoverHighlightEnabled` | Disables hover highlight and deselects on click when `false`.                 |
 | `layoutDetailsEnabled`  | Shows gap and padding under selected dimensions. Default `true`.              |
-| `persistOnReload`       | Persists workspace state across reloads when `true`.                          |
+| `persistOnReload`       | Persists workspace state across reloads; defaults to `true`.                  |
 | `shortcutsEnabled`      | Enables global keyboard shortcuts when `true`. Default `true`.                |
 | `persistKey`            | Optional workspace storage key; default workspaces are isolated per browser tab. |
 | `portalTarget`          | Optional element or shadow root used as the overlay portal mount target.      |
 | `persistence`           | Optional storage adapter for custom or extension-backed persistence.           |
 | `captureVisibleTab`      | Optional function supplying a PNG of the visible tab for Screenshot capture.  |
-| `features`               | Enable or disable `screenshot`, `rulers`, and `settings`; each defaults to `true`. |
+| `features`               | Enable or disable `screenshot`, `rulers`, `settings`, and `responsive`; each defaults to `true`. |
 | `onPersistenceError`    | Called when persistence is unavailable or a storage write fails.              |
 | `colorPickerFormats`     | Color formats displayed in the picker popover, in display order.             |
 | `colorPickerClickFormat` | Format copied to the clipboard when a color is picked.                       |
@@ -70,7 +70,7 @@ function App() {
 | `multiMeasureEnabled`    | Keep previous measurements visible. Default `false`.                         |
 | `guideStyle`             | Guide opacity, width, pattern, dash length, and gap.                         |
 | `rulerSettings`          | Ruler opacity and edge reveal.                                               |
-| `textStyle`              | Default text annotation font and color.                                      |
+| `textStyle`              | Font, color, and background new text notes start with.                       |
 
 Props are the defaults. Saved settings override them; **Use defaults** restores the props.
 
@@ -78,7 +78,7 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
 
 | Shortcut               | Action                                                |
 | ---------------------- | ----------------------------------------------------- |
-| `M`                    | Toggle Mesurer on/off.                                |
+| `M`                    | Toggle Comments mode.                                 |
 | `I`                    | Toggle Inspect mode.                                  |
 | `S`                    | Toggle Select mode for annotations.                   |
 | `A`                    | Toggle Typography mode.                               |
@@ -93,6 +93,7 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
 | `G`                    | Toggle Guides mode.                                   |
 | `X`                    | Toggle X-ray mode.                                    |
 | `R`                    | Toggle pixel rulers along the top and left edges.     |
+| `B`                    | Preview the page at other screen sizes.               |
 | `H`                    | Set guide orientation to horizontal.                  |
 | `V`                    | Set guide orientation to vertical.                    |
 | `Alt`                  | Temporarily enable option/guide measurement overlays. |
@@ -120,13 +121,14 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
 - **Rulers** - Drag guides from pixel rulers along the top and left edges
 - **Typography** - Inspect typography styles and pin text details
 - **X-ray mode** - Reveal element structure without changing the page
+- **Responsive** - Preview the page at several screen sizes side by side, from named devices or its own breakpoints
 - **Sample color** - Sample rendered colors and copy values in your chosen format
 - **Screenshot** - Drag a region of the visible tab and copy or download it. In a React integration without the extension, the browser may show a tab-sharing prompt.
 - **Video recording** - Drag a region of the visible tab, record up to 60 seconds, trim the result, and export it as WebM, GIF, or MP4 when supported. The Chrome extension records the active tab without a second sharing prompt.
 - **Distance overlays** - Hold Alt for quick spacing checks
 - **Undo/redo** - Command history for guides, measurements, arrows, pen strokes, and text annotations
 - **Comments** - Pin threads to live elements, add replies, move targets, search threads, and copy structured feedback for agents
-- **Settings** - Configure selection, guide, ruler, arrow, text, color, format, and persistence behavior
+- **Settings** - Configure selection, guide, ruler, arrow, color, format, and persistence behavior
 - **Workspace controls** - Persist page workspaces, restore defaults, clear annotations, and minimize Mesurer to a single toolbar button
 
 ## Requirements

package/dist/{chunk-BFNKUAED.js → chunk-6DU6M3Z4.js}

@@ -215,6 +215,7 @@ async function reencodeVideoClip(ownerDocument, ownerWindow, sourceUrl, startTim
       if (stopped) return;
       stopped = true;
       source.removeEventListener("timeupdate", onTimeUpdate);
+      source.removeEventListener("ended", finish);
       source.pause();
       try {
         recorder.stop();
@@ -245,18 +246,20 @@ async function reencodeVideoClip(ownerDocument, ownerWindow, sourceUrl, startTim
     };
     recorder.onerror = () => reject(new Error("Could not trim recording"));
     source.addEventListener("timeupdate", onTimeUpdate);
+    source.addEventListener("ended", finish);
     recorder.start(100);
     void source.play().then(
       () => drawFrame(),
       () => {
         source.removeEventListener("timeupdate", onTimeUpdate);
+        source.removeEventListener("ended", finish);
         reject(new Error("Could not trim recording"));
       }
     );
   });
 }
 async function encodeGifClip(ownerDocument, sourceUrl, startTime, endTime, scale) {
-  const encoder = await import("./screen-recording-gif-WG5J6DEP.js");
+  const encoder = await import("./screen-recording-gif-4B4R3ZBM.js");
   return encoder.encodeGifClip(ownerDocument, sourceUrl, startTime, endTime, scale);
 }
 

package/dist/chunk-R2UAUDQP.js

@@ -0,0 +1,345 @@
+// core/review/ephemeral-url.ts
+var bytesToBase64 = (bytes) => {
+  let binary = "";
+  const chunkSize = 32768;
+  for (let index = 0; index < bytes.length; index += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(index, index + chunkSize));
+  }
+  return btoa(binary);
+};
+var blobToDataUrl = async (blob) => {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  return `data:${blob.type || "image/png"};base64,${bytesToBase64(bytes)}`;
+};
+var encodePayload = (payload) => bytesToBase64(new TextEncoder().encode(JSON.stringify(payload)));
+var transformAnnotation = (annotation, origin, scale) => {
+  const point = (value) => ({ x: (value.x - origin.x) * scale, y: (value.y - origin.y) * scale });
+  const rect = (value) => ({
+    left: (value.left - origin.x) * scale,
+    top: (value.top - origin.y) * scale,
+    width: value.width * scale,
+    height: value.height * scale
+  });
+  if (annotation.type === "arrow") return { ...annotation, start: point(annotation.start), end: point(annotation.end), ...annotation.control ? { control: point(annotation.control) } : {} };
+  if (annotation.type === "pen") return { ...annotation, points: annotation.points.map(point) };
+  if (annotation.type === "rectangle") return { ...annotation, rect: rect(annotation.rect) };
+  if (annotation.type === "text") return { ...annotation, x: (annotation.x - origin.x) * scale, y: (annotation.y - origin.y) * scale, ...annotation.boxWidth ? { boxWidth: annotation.boxWidth * scale } : {} };
+  if (annotation.type === "guide") return { ...annotation, position: (annotation.position - (annotation.orientation === "vertical" ? origin.x : origin.y)) * scale };
+  if (annotation.kind === "element") return { ...annotation, rect: rect(annotation.rect) };
+  return {
+    ...annotation,
+    rectA: rect(annotation.rectA),
+    rectB: rect(annotation.rectB),
+    connectors: annotation.connectors.map((connector) => ({ ...connector, x1: (connector.x1 - origin.x) * scale, x2: (connector.x2 - origin.x) * scale, y1: (connector.y1 - origin.y) * scale, y2: (connector.y2 - origin.y) * scale })),
+    ...annotation.horizontal ? { horizontal: { ...annotation.horizontal, x1: (annotation.horizontal.x1 - origin.x) * scale, x2: (annotation.horizontal.x2 - origin.x) * scale, y: (annotation.horizontal.y - origin.y) * scale } } : {},
+    ...annotation.vertical ? { vertical: { ...annotation.vertical, x: (annotation.vertical.x - origin.x) * scale, y1: (annotation.vertical.y1 - origin.y) * scale, y2: (annotation.vertical.y2 - origin.y) * scale } } : {}
+  };
+};
+var createViewerHtml = (encodedPayload) => `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mesurer review</title>
+  <style>
+    :root { color-scheme: light; font-family: ui-sans-serif, system-ui, sans-serif; }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: #f4f4f5; color: #18181b; }
+    header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: rgba(255,255,255,.94); border-bottom: 1px solid #e4e4e7; backdrop-filter: blur(10px); }
+    header strong { font-size: 14px; }
+    header span { color: #71717a; font-size: 12px; }
+    main { padding: 24px; }
+    .stage { position: relative; width: min(100%, 1440px); margin: 0 auto; overflow: hidden; background: white; box-shadow: 0 12px 40px rgba(24,24,27,.12); }
+    .stage img { display: block; width: 100%; height: auto; }
+    .stage .live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: white; pointer-events: none; }
+    .annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+    .layout-guides { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
+    .layout-guide { position: absolute; display: grid; pointer-events: none; }
+    .layout-guide > i { display: block; background: var(--guide-color); opacity: var(--guide-opacity); }
+    .text-annotations { position: absolute; inset: 0; pointer-events: none; }
+    .annotation-text { position: absolute; white-space: pre-wrap; pointer-events: none; transform-origin: center center; }
+    .comments { position: absolute; inset: 0; pointer-events: none; }
+    .comment-pin { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); border: 2px solid white; border-radius: 999px; background: #0d99ff; color: white; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; font: 700 11px ui-monospace, monospace; }
+    .comment-card { position: absolute; z-index: 1; width: 240px; padding: 10px; border: 1px solid #d4d4d8; border-radius: 8px; background: white; box-shadow: 0 8px 24px rgba(24,24,27,.16); pointer-events: auto; font-size: 12px; }
+    .comment-card[hidden] { display: none; }
+    .comment-card strong { display: block; margin-bottom: 6px; }
+    .comment-card p { margin: 0 0 8px; white-space: pre-wrap; }
+    .comment-card small { color: #71717a; }
+    .comment-message { margin-top: 10px; }
+    .comment-message header { position: static; padding: 0; border: 0; background: transparent; font-size: 11px; }
+    .comment-reply { display: flex; gap: 6px; margin-top: 12px; }
+    .comment-reply textarea { min-width: 0; flex: 1; resize: vertical; border: 1px solid #d4d4d8; border-radius: 6px; padding: 6px; font: inherit; font-size: 12px; }
+    .comment-reply button { align-self: end; border: 0; border-radius: 6px; padding: 7px 9px; background: #18181b; color: white; cursor: pointer; font-size: 11px; }
+    details { width: min(100%, 1440px); margin: 16px auto 0; padding: 12px 16px; border: 1px solid #e4e4e7; border-radius: 8px; background: white; }
+    summary { cursor: pointer; font-size: 13px; font-weight: 600; }
+    pre { max-height: 480px; overflow: auto; white-space: pre-wrap; font: 11px/1.5 ui-monospace, monospace; }
+  </style>
+</head>
+<body>
+  <header><strong id="title">Mesurer review</strong><span id="meta"></span></header>
+  <main>
+    <section class="stage" id="stage"><img id="screenshot" alt="Captured Mesurer review snapshot"><div class="layout-guides" id="layout-guides"></div><svg class="annotations" id="annotations" aria-label="Review annotations"></svg><div class="text-annotations" id="text-annotations"></div><div class="comments" id="comments"></div></section>
+    <details><summary>Review state</summary><pre id="state"></pre></details>
+  </main>
+  <script>
+    (() => {
+      const decode = (value) => {
+        const binary = atob(value);
+        const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+        return JSON.parse(new TextDecoder().decode(bytes));
+      };
+      const payload = decode(${JSON.stringify(encodedPayload)});
+      const state = payload.state;
+      const version = state.versions[state.versions.length - 1];
+      const snapshot = version.snapshot;
+      const screenshot = document.getElementById("screenshot");
+      const annotations = document.getElementById("annotations");
+      const layoutGuides = document.getElementById("layout-guides");
+      const textAnnotations = document.getElementById("text-annotations");
+      const comments = document.getElementById("comments");
+      const title = document.getElementById("title");
+      const meta = document.getElementById("meta");
+      const stateOutput = document.getElementById("state");
+      title.textContent = state.page.title || state.page.url;
+      meta.textContent = "Version " + version.number + " \xB7 " + state.review.comments.length + " comments \xB7 " + state.review.annotations.length + " annotations";
+      screenshot.src = payload.screenshotDataUrl;
+      if (payload.liveSnapshot) {
+        // Over the screenshot, which keeps the stage's size and shows through if this cannot load.
+        const live = document.createElement("iframe");
+        live.className = "live";
+        live.id = "live-snapshot";
+        live.title = "Captured page";
+        live.setAttribute("sandbox", "");
+        live.src = URL.createObjectURL(new Blob([payload.liveSnapshot], { type: "image/svg+xml" }));
+        screenshot.after(live);
+      }
+      stateOutput.textContent = JSON.stringify(state, null, 2);
+      const width = snapshot.viewport.width || 1;
+      const height = snapshot.viewport.height || 1;
+      annotations.setAttribute("viewBox", "0 0 " + width + " " + height);
+      (state.review.workspace?.layoutGuides || []).filter((guide) => guide.visible).forEach((guide) => {
+        const element = document.createElement("div");
+        element.className = "layout-guide";
+        element.style.setProperty("--guide-color", guide.color);
+        element.style.setProperty("--guide-opacity", String(guide.opacity));
+        const horizontal = guide.kind === "rows";
+        const grid = guide.kind === "grid";
+        const size = Math.max(0, guide.size);
+        const dimension = horizontal ? "height" : "width";
+        if (guide.align !== "stretch" && !grid) {
+          element.style[dimension] = Math.min(size, horizontal ? height : width) + "px";
+          element.style[horizontal ? "width" : "height"] = "100%";
+          element.style[horizontal ? "left" : "top"] = "0";
+          element.style[horizontal ? "top" : "left"] = guide.align === "center"
+            ? "calc(50% - " + Math.min(size, horizontal ? height : width) / 2 + "px)"
+            : guide.align === "max"
+              ? "calc(100% - " + Math.min(size, horizontal ? height : width) + "px)"
+              : "0";
+        } else {
+          element.style.inset = "0";
+        }
+        element.style.gap = guide.gutter + "px";
+        if (grid) {
+          element.style.gridTemplateColumns = "repeat(" + guide.count + ", minmax(0, 1fr))";
+          element.style.gridTemplateRows = "repeat(" + guide.count + ", minmax(0, 1fr))";
+        } else if (horizontal) {
+          element.style.gridTemplateRows = "repeat(" + guide.count + ", minmax(0, 1fr))";
+          element.style.gridTemplateColumns = "1fr";
+        } else {
+          element.style.gridTemplateColumns = "repeat(" + guide.count + ", minmax(0, 1fr))";
+          element.style.gridTemplateRows = "1fr";
+        }
+        const cells = grid ? guide.count * guide.count : guide.count;
+        for (let index = 0; index < cells; index += 1) element.append(document.createElement("i"));
+        layoutGuides.append(element);
+      });
+      const svg = (name, attributes) => {
+        const element = document.createElementNS("http://www.w3.org/2000/svg", name);
+        Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, String(value)));
+        return element;
+      };
+       const line = (x1, y1, x2, y2, color, strokeWidth, dash) => {
+         annotations.append(svg("line", { x1, y1, x2, y2, stroke: color || "#0d99ff", "stroke-width": strokeWidth || 2, "stroke-dasharray": dash || "" }));
+       };
+       const midpoint = (start, end) => ({ x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 });
+       const quadraticPoint = (start, node, end, t) => {
+         const control = { x: 2 * node.x - (start.x + end.x) / 2, y: 2 * node.y - (start.y + end.y) / 2 };
+         const mt = 1 - t;
+         return { x: mt * mt * start.x + 2 * mt * t * control.x + t * t * end.x, y: mt * mt * start.y + 2 * mt * t * control.y + t * t * end.y };
+       };
+       const arrowHead = (start, node, end, width) => {
+         const from = quadraticPoint(start, node, end, 0.82);
+         const length = Math.max(12, width * 8);
+         const tangentLength = Math.hypot(end.x - from.x, end.y - from.y) || 1;
+         const tx = (end.x - from.x) / tangentLength;
+         const ty = (end.y - from.y) / tangentLength;
+         const wing = length * 0.5;
+         const nx = -ty;
+         const ny = tx;
+         return (end.x - tx * length + nx * wing) + "," + (end.y - ty * length + ny * wing) + " " + end.x + "," + end.y + " " + (end.x - tx * length - nx * wing) + "," + (end.y - ty * length - ny * wing);
+       };
+       const reviewAnnotations = [...state.review.annotations];
+       state.review.workspace?.heldDistances.forEach((distance) => {
+         if (!reviewAnnotations.some((annotation) => annotation.type === "measurement" && annotation.kind === "distance" && annotation.id === distance.id)) {
+           reviewAnnotations.push({ type: "measurement", kind: "distance", ...distance });
+         }
+       });
+       reviewAnnotations.forEach((annotation) => {
+         if (annotation.type === "arrow") {
+           const control = annotation.control || midpoint(annotation.start, annotation.end);
+           const bezierControl = { x: 2 * control.x - (annotation.start.x + annotation.end.x) / 2, y: 2 * control.y - (annotation.start.y + annotation.end.y) / 2 };
+           if (annotation.control) {
+             annotations.append(svg("path", { d: "M " + annotation.start.x + " " + annotation.start.y + " Q " + bezierControl.x + " " + bezierControl.y + " " + annotation.end.x + " " + annotation.end.y, fill: "none", stroke: annotation.color, "stroke-width": annotation.width, "stroke-linecap": "round" }));
+           } else {
+             line(annotation.start.x, annotation.start.y, annotation.end.x, annotation.end.y, annotation.color, annotation.width);
+           }
+           annotations.append(svg("polyline", { points: arrowHead(annotation.start, control, annotation.end, annotation.width), fill: "none", stroke: annotation.color, "stroke-width": annotation.width, "stroke-linecap": "round", "stroke-linejoin": "round" }));
+        } else if (annotation.type === "pen") {
+          annotations.append(svg("polyline", { points: annotation.points.map((point) => point.x + "," + point.y).join(" "), fill: "none", stroke: annotation.color, "stroke-width": annotation.width, "stroke-linecap": "round", "stroke-linejoin": "round" }));
+        } else if (annotation.type === "text") {
+          const textStyle = annotation.style || state.review.textStyle || { font: "sans-serif", color: "#000000" };
+          const fontFamily = textStyle.font === "handwritten"
+            ? '"Segoe Script", "Bradley Hand", "Apple Chancery", cursive'
+            : textStyle.font === "code"
+              ? 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
+              : textStyle.font === "serif"
+                ? 'ui-serif, Georgia, "Times New Roman", serif'
+                : 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+          const text = document.createElement("div");
+          text.className = "annotation-text";
+          text.textContent = annotation.text;
+          text.style.left = annotation.x + "px";
+          text.style.top = annotation.y + "px";
+          text.style.color = textStyle.color;
+          text.style.fontFamily = fontFamily;
+          text.style.fontSize = (16 * (annotation.scale || 1)) + "px";
+          text.style.lineHeight = (24 * (annotation.scale || 1)) + "px";
+          if (annotation.boxWidth) text.style.width = annotation.boxWidth + "px";
+          if (annotation.rotation) text.style.transform = "rotate(" + annotation.rotation + "deg)";
+          textAnnotations.append(text);
+        } else if (annotation.type === "guide") {
+          if (annotation.orientation === "vertical") line(annotation.position, 0, annotation.position, height, "#0d99ff", 1, "6 4");
+          else line(0, annotation.position, width, annotation.position, "#0d99ff", 1, "6 4");
+        } else if (annotation.type === "rectangle") {
+          annotations.append(svg("rect", { x: annotation.rect.left, y: annotation.rect.top, width: annotation.rect.width, height: annotation.rect.height, fill: "none", stroke: annotation.color, "stroke-width": annotation.width, "stroke-dasharray": "4 3" }));
+        } else if (annotation.kind === "element") {
+          annotations.append(svg("rect", { x: annotation.rect.left, y: annotation.rect.top, width: annotation.rect.width, height: annotation.rect.height, fill: "none", stroke: "#0d99ff", "stroke-width": 2, "stroke-dasharray": "4 3" }));
+        } else {
+          annotation.connectors.forEach((connector) => line(connector.x1, connector.y1, connector.x2, connector.y2, "#0d99ff", 1));
+          if (annotation.horizontal) line(annotation.horizontal.x1, annotation.horizontal.y, annotation.horizontal.x2, annotation.horizontal.y, "#0d99ff", 2);
+          if (annotation.vertical) line(annotation.vertical.x, annotation.vertical.y1, annotation.vertical.x, annotation.vertical.y2, "#0d99ff", 2);
+        }
+      });
+      state.review.comments.forEach((comment, index) => {
+        const pin = document.createElement("button");
+        pin.className = "comment-pin";
+        pin.type = "button";
+        pin.textContent = String(index + 1);
+        pin.style.left = (comment.position.x / width * 100) + "%";
+        pin.style.top = (comment.position.y / height * 100) + "%";
+        pin.setAttribute("aria-label", "Comment " + (index + 1));
+        const card = document.createElement("aside");
+        card.className = "comment-card";
+        card.hidden = true;
+        card.style.left = (comment.position.x / width * 100) + "%";
+        card.style.top = (comment.position.y / height * 100) + "%";
+        const heading = document.createElement("strong");
+        heading.textContent = comment.status === "resolved" ? "Resolved comment" : "Comment";
+        const messages = document.createElement("div");
+        const renderMessages = () => {
+          messages.replaceChildren();
+          const threadMessages = comment.messages.length > 0
+            ? comment.messages
+            : [{ id: "initial", role: "user", text: comment.text, createdAt: comment.createdAt }];
+          threadMessages.forEach((message) => {
+            const item = document.createElement("div");
+            item.className = "comment-message";
+            const meta = document.createElement("header");
+            meta.textContent = "You \xB7 " + new Date(message.createdAt).toLocaleString();
+            const body = document.createElement("p");
+            body.textContent = message.text;
+            item.append(meta, body);
+            messages.append(item);
+          });
+        };
+        renderMessages();
+        const reply = document.createElement("form");
+        reply.className = "comment-reply";
+        const input = document.createElement("textarea");
+        input.rows = 2;
+        input.placeholder = "Reply...";
+        input.setAttribute("aria-label", "Reply to comment");
+        const send = document.createElement("button");
+        send.type = "submit";
+        send.textContent = "Reply";
+        reply.append(input, send);
+        reply.addEventListener("submit", (event) => {
+          event.preventDefault();
+          const text = input.value.trim();
+          if (!text) return;
+          comment.messages.push({ id: "reply-" + Date.now(), role: "user", text, createdAt: Date.now() });
+          comment.text = comment.messages[0]?.text || text;
+          input.value = "";
+          renderMessages();
+        });
+        card.append(heading, messages, reply);
+        pin.addEventListener("click", () => { card.hidden = !card.hidden; });
+        comments.append(pin, card);
+      });
+    })();
+  </script>
+</body>
+</html>`;
+var createEphemeralReviewUrl = async (state, capture, ownerWindow) => {
+  const screenshotDataUrl = await blobToDataUrl(capture.blob);
+  const nextState = {
+    ...state,
+    versions: state.versions.map(
+      (version, index) => index === state.versions.length - 1 ? {
+        ...version,
+        snapshot: {
+          ...version.snapshot,
+          screenshot: {
+            id: `screenshot-${version.id}`,
+            mimeType: capture.mimeType,
+            width: capture.width,
+            height: capture.height
+          },
+          ...capture.cssWidth && capture.cssHeight ? { viewport: { ...version.snapshot.viewport, width: capture.cssWidth, height: capture.cssHeight } } : {}
+        }
+      } : version
+    )
+  };
+  const origin = capture.origin ?? { x: 0, y: 0 };
+  const positionedState = {
+    ...nextState,
+    review: {
+      ...nextState.review,
+      comments: nextState.review.comments.map((comment) => ({
+        ...comment,
+        position: {
+          x: (comment.position.x - origin.x) * (capture.scale ?? 1),
+          y: (comment.position.y - origin.y) * (capture.scale ?? 1)
+        }
+      })),
+      annotations: nextState.review.annotations.map((annotation) => transformAnnotation(annotation, origin, capture.scale ?? 1))
+    }
+  };
+  const payload = encodePayload({
+    state: positionedState,
+    screenshotDataUrl,
+    ...capture.live ? { liveSnapshot: capture.live } : {}
+  });
+  const html = createViewerHtml(payload);
+  const url = URL.createObjectURL(new Blob([html], { type: "text/html" }));
+  return { url, state: positionedState, html };
+};
+var revokeEphemeralReviewUrl = (url, ownerWindow) => {
+  void ownerWindow;
+  URL.revokeObjectURL(url);
+};
+
+export {
+  createEphemeralReviewUrl,
+  revokeEphemeralReviewUrl
+};

package/dist/ephemeral-url-VBGGJ7MW.js

@@ -0,0 +1,8 @@
+import {
+  createEphemeralReviewUrl,
+  revokeEphemeralReviewUrl
+} from "./chunk-R2UAUDQP.js";
+export {
+  createEphemeralReviewUrl,
+  revokeEphemeralReviewUrl
+};