mesurer 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # mesurer
 
+## 0.2.4
+
+- add CSS and JavaScript motion inspection with playback, scrubbing, and previews
+- improve iframe, nested-element, keyboard, comments, settings, and extension behavior
+
+## 0.2.3
+
+- add GIF export and capability-gated MP4 export
+- improve extension recording previews, shortcuts, menu stacking, and theme support
+
 ## 0.2.2
 
 - improve screen recording stability across browser resizing, first-frame capture, color picker usage, and export duration

package/README.md

@@ -122,7 +122,7 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
 - **X-ray mode** - Reveal element structure without changing the page
 - **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 or MP4 when supported. The Chrome extension records the active tab without a second 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
@@ -133,7 +133,7 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
 
 - React 18+
 - Chromium-based browser. The native screen color picker requires Chromium on Windows or macOS; Linux Chromium builds may not expose the EyeDropper API.
-- Video recording uses the Chrome extension's tab-capture integration for the smoothest active-tab workflow. Without the extension, browser capture permissions and supported export formats depend on the browser.
+- Video recording uses the Chrome extension's tab-capture integration for the smoothest active-tab workflow. Without the extension, browser capture permissions and supported export formats depend on the browser. MP4 requires browser WebCodecs support.
 
 Settings are stored separately from workspace state. The default adapter uses `localStorage`; integrations can provide a `persistence` adapter such as the browser extension's `chrome.storage.local` implementation.
 

package/dist/chunk-DBVWPZ7G.js

@@ -0,0 +1,272 @@
+// core/screen-recording-webm.ts
+var EBML_ID = 440786851;
+var SEGMENT_ID = 408125543;
+var INFO_ID = 357149030;
+var TIMECODE_SCALE_ID = 2807729;
+var DURATION_ID = 17545;
+var CLUSTER_ID = 524531317;
+var MASTER_IDS = /* @__PURE__ */ new Set([EBML_ID, SEGMENT_ID, INFO_ID]);
+var readElementId = (bytes, offset) => {
+  const first = bytes[offset];
+  if (first === void 0 || first === 0) return null;
+  let length = 1;
+  let mask = 128;
+  while (length <= 4 && (first & mask) === 0) {
+    mask >>= 1;
+    length += 1;
+  }
+  if (offset + length > bytes.length) return null;
+  let id = 0;
+  for (let index = 0; index < length; index += 1) id = id * 256 + bytes[offset + index];
+  return { length, id };
+};
+var readElementSize = (bytes, offset) => {
+  const first = bytes[offset];
+  if (first === void 0 || first === 0) return null;
+  let length = 1;
+  let mask = 128;
+  while (length <= 8 && (first & mask) === 0) {
+    mask >>= 1;
+    length += 1;
+  }
+  if (offset + length > bytes.length) return null;
+  const marker = mask - 1;
+  let unknown = (first & marker) === marker;
+  let value = first & marker;
+  for (let index = 1; index < length; index += 1) {
+    const byte = bytes[offset + index];
+    if (byte !== 255) unknown = false;
+    value = value * 256 + byte;
+  }
+  return { length, value, unknown };
+};
+var readUint = (bytes, offset, size) => {
+  let value = 0;
+  for (let index = 0; index < size; index += 1) value = value * 256 + bytes[offset + index];
+  return value;
+};
+function writeWebmDuration(bytes, durationSeconds) {
+  if (!(durationSeconds > 0)) return false;
+  let timecodeScale = 1e6;
+  let durationOffset = -1;
+  let durationSize = 0;
+  const walk = (start, end, inInfo) => {
+    let cursor = start;
+    while (cursor + 2 < end && durationOffset < 0) {
+      const id = readElementId(bytes, cursor);
+      if (!id) return;
+      cursor += id.length;
+      const size = readElementSize(bytes, cursor);
+      if (!size) return;
+      cursor += size.length;
+      const dataStart = cursor;
+      if (id.id === CLUSTER_ID) return;
+      if (id.id === TIMECODE_SCALE_ID && !size.unknown && size.value > 0 && size.value <= 8) {
+        timecodeScale = readUint(bytes, dataStart, size.value);
+      }
+      if (id.id === DURATION_ID && inInfo && !size.unknown && (size.value === 4 || size.value === 8)) {
+        durationOffset = dataStart;
+        durationSize = size.value;
+        return;
+      }
+      const dataEnd = size.unknown ? end : dataStart + size.value;
+      if (size.unknown || MASTER_IDS.has(id.id)) {
+        walk(dataStart, dataEnd, inInfo || id.id === INFO_ID);
+        if (durationOffset >= 0) return;
+      }
+      if (size.unknown) return;
+      cursor = dataEnd;
+    }
+  };
+  walk(0, bytes.length, false);
+  if (durationOffset < 0 || timecodeScale <= 0) return false;
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const current = durationSize === 8 ? view.getFloat64(durationOffset) : view.getFloat32(durationOffset);
+  const next = durationSeconds * (1e9 / timecodeScale);
+  if (Number.isFinite(current) && current >= next - 1e9 / timecodeScale * 0.05) return false;
+  if (durationSize === 8) view.setFloat64(durationOffset, next);
+  else view.setFloat32(durationOffset, next);
+  return true;
+}
+async function correctWebmDuration(blob, durationSeconds) {
+  if (!(durationSeconds > 0) || !blob.type.includes("webm")) return blob;
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  if (!writeWebmDuration(bytes, durationSeconds)) return blob;
+  return new Blob([bytes], { type: blob.type || "video/webm" });
+}
+
+// core/screen-recording-export.ts
+function resolveRecordingDuration(mediaDuration, elapsedSeconds) {
+  const media = Number.isFinite(mediaDuration) && mediaDuration > 0 ? mediaDuration : 0;
+  const elapsed = Number.isFinite(elapsedSeconds) && elapsedSeconds > 0 ? elapsedSeconds : 0;
+  if (media <= 0 && elapsed <= 0) return 0.1;
+  if (media <= 0) return Math.max(elapsed, 0.1);
+  if (elapsed <= 0) return media;
+  if (media < elapsed * 0.9) return elapsed;
+  return Math.min(media, elapsed);
+}
+function isFullClipExport(startTime, endTime, duration, tolerance = 0.05) {
+  return startTime <= tolerance && endTime >= duration - tolerance;
+}
+async function readBlobVideoDuration(blob, ownerDocument) {
+  const url = URL.createObjectURL(blob);
+  const video = ownerDocument.createElement("video");
+  video.preload = "metadata";
+  video.muted = true;
+  try {
+    return await new Promise((resolve, reject) => {
+      video.onloadedmetadata = () => {
+        resolve(video.duration);
+      };
+      video.onerror = () => reject(new Error("Could not read recording"));
+      video.src = url;
+    });
+  } finally {
+    URL.revokeObjectURL(url);
+    video.removeAttribute("src");
+  }
+}
+async function seekVideoElement(video, time) {
+  const target = Math.max(0, time);
+  if (target <= 0 && video.readyState >= 1) {
+    video.currentTime = 0;
+    return;
+  }
+  await new Promise((resolve, reject) => {
+    const onSeeked = () => resolve();
+    const onError = () => reject(new Error("Could not seek recording"));
+    video.addEventListener("seeked", onSeeked, { once: true });
+    video.addEventListener("error", onError, { once: true });
+    if (video.readyState < 1) {
+      video.addEventListener(
+        "loadedmetadata",
+        () => {
+          video.currentTime = target;
+        },
+        { once: true }
+      );
+    } else {
+      video.currentTime = target;
+    }
+  });
+}
+async function requestDisplayMediaStream(ownerWindow) {
+  const fallback = {
+    audio: false,
+    video: true
+  };
+  const chromium = {
+    audio: false,
+    video: { displaySurface: "browser" },
+    preferCurrentTab: true,
+    selfBrowserSurface: "include"
+  };
+  try {
+    return await ownerWindow.navigator.mediaDevices.getDisplayMedia(chromium);
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "AbortError") throw error;
+    return await ownerWindow.navigator.mediaDevices.getDisplayMedia(fallback);
+  }
+}
+async function reencodeVideoClip(ownerDocument, ownerWindow, sourceUrl, startTime, endTime, scale, mimeType) {
+  const source = ownerDocument.createElement("video");
+  source.muted = true;
+  source.playsInline = true;
+  source.src = sourceUrl;
+  source.preload = "auto";
+  await new Promise((resolve, reject) => {
+    const ready = () => source.videoWidth > 0 && source.videoHeight > 0;
+    const finish = () => {
+      if (!ready()) return;
+      resolve();
+    };
+    source.onloadedmetadata = finish;
+    source.onloadeddata = finish;
+    source.onresize = finish;
+    source.onerror = () => reject(new Error("Could not trim recording"));
+    if (ready()) resolve();
+  });
+  await seekVideoElement(source, startTime);
+  if (source.videoWidth <= 0 || source.videoHeight <= 0) {
+    await new Promise((resolve) => {
+      if (typeof source.requestVideoFrameCallback === "function") {
+        source.requestVideoFrameCallback(() => resolve());
+        return;
+      }
+      ownerWindow.requestAnimationFrame(() => resolve());
+    });
+  }
+  const canvas = ownerDocument.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(source.videoWidth * scale));
+  canvas.height = Math.max(1, Math.round(source.videoHeight * scale));
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Could not trim recording");
+  const stream = canvas.captureStream(30);
+  const captureTrack = stream.getVideoTracks()[0];
+  const requestFrame = captureTrack && "requestFrame" in captureTrack ? captureTrack.requestFrame : void 0;
+  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+  const chunks = [];
+  return await new Promise((resolve, reject) => {
+    let stopped = false;
+    const onTimeUpdate = () => {
+      if (source.currentTime >= endTime) finish();
+    };
+    const finish = () => {
+      if (stopped) return;
+      stopped = true;
+      source.removeEventListener("timeupdate", onTimeUpdate);
+      source.pause();
+      try {
+        recorder.stop();
+      } catch {
+        reject(new Error("Could not trim recording"));
+      }
+    };
+    const drawFrame = () => {
+      if (stopped) return;
+      context.drawImage(source, 0, 0, canvas.width, canvas.height);
+      requestFrame?.call(captureTrack);
+      if (source.currentTime >= endTime || source.ended) {
+        finish();
+        return;
+      }
+      if (typeof source.requestVideoFrameCallback === "function") {
+        source.requestVideoFrameCallback(() => drawFrame());
+      } else {
+        ownerWindow.requestAnimationFrame(drawFrame);
+      }
+    };
+    recorder.ondataavailable = (event) => {
+      if (event.data.size > 0) chunks.push(event.data);
+    };
+    recorder.onstop = () => {
+      const recorded = new Blob(chunks, { type: recorder.mimeType || mimeType || "video/webm" });
+      void correctWebmDuration(recorded, Math.max(0.1, endTime - startTime)).then(resolve, reject);
+    };
+    recorder.onerror = () => reject(new Error("Could not trim recording"));
+    source.addEventListener("timeupdate", onTimeUpdate);
+    recorder.start(100);
+    void source.play().then(
+      () => drawFrame(),
+      () => {
+        source.removeEventListener("timeupdate", onTimeUpdate);
+        reject(new Error("Could not trim recording"));
+      }
+    );
+  });
+}
+async function encodeGifClip(ownerDocument, sourceUrl, startTime, endTime, scale) {
+  const encoder = await import("./screen-recording-gif-J4EOWLWH.js");
+  return encoder.encodeGifClip(ownerDocument, sourceUrl, startTime, endTime, scale);
+}
+
+export {
+  correctWebmDuration,
+  resolveRecordingDuration,
+  isFullClipExport,
+  readBlobVideoDuration,
+  seekVideoElement,
+  requestDisplayMediaStream,
+  reencodeVideoClip,
+  encodeGifClip
+};