mesurer 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # mesurer
 
+## 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
+- add Auto-hide in Settings, off by default: a docked toolbar tucks to a thin tab and comes back on hover or as the pointer nears its edge
+- improve internal structure and dark mode colors
+
 ## 0.2.4
 
 - add CSS and JavaScript motion inspection with playback, scrubbing, and previews

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.                       |
@@ -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,6 +121,7 @@ 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.

package/dist/{chunk-DBVWPZ7G.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-J4EOWLWH.js");
+  const encoder = await import("./screen-recording-gif-4B4R3ZBM.js");
   return encoder.encodeGifClip(ownerDocument, sourceUrl, startTime, endTime, scale);
 }