mesurer 0.0.11 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # mesurer
2
2
 
3
+ ## 0.1.0
4
+
5
+ - add screenshot region selection with clipboard copy and local download support
6
+ - add Chrome extension visible-tab capture integration
7
+ - add configurable screenshot copy and download settings
8
+ - rename the public `Measurer` component and props type to `Mesurer` and `MesurerProps`
9
+ - improve extension isolation, persistence, settings, guides, rulers, and visual inspection workflows
10
+
3
11
  ## 0.0.11
4
12
 
5
13
  - keep guides, select, and rulers on screen while Settings is open so styles can be edited live
package/PRIVACY.md ADDED
@@ -0,0 +1,63 @@
1
+ # Privacy Policy
2
+
3
+ ## Mesurer
4
+
5
+ Mesurer is a lightweight tool to measure distances, check alignment, and display visual guides directly on web pages in the browser.
6
+
7
+ ## Data Collection
8
+
9
+ Mesurer does not collect, store, or transmit personal data.
10
+
11
+ Mesurer does not collect:
12
+
13
+ - personally identifiable information
14
+ - authentication credentials
15
+ - financial or health information
16
+ - web history
17
+ - user activity analytics
18
+ - website content for external processing
19
+
20
+ ## Permissions
21
+
22
+ ### activeTab
23
+
24
+ Used only when the user explicitly activates the extension, to run Mesurer on the current tab.
25
+
26
+ ### scripting
27
+
28
+ Used to inject the extension script into the active page to render measurement overlays and guides.
29
+
30
+ ### storage
31
+
32
+ Used to store Mesurer settings and page workspaces locally in Chrome. This data stays in the
33
+ browser and is not sent to Mesurer servers.
34
+
35
+ ### clipboardWrite
36
+
37
+ Used when the user chooses to copy a selected screenshot or sampled color to the clipboard.
38
+
39
+ ## Screenshot Capture
40
+
41
+ Screenshot captures are initiated by the user and contain only the selected region of the
42
+ currently visible tab. In the Chrome extension, capture is performed locally through Chrome's
43
+ visible-tab capture API. In a React integration without the extension, Chrome may show its native
44
+ tab-sharing prompt through `getDisplayMedia()`.
45
+
46
+ Screenshots are copied to the local clipboard or downloaded locally according to the user's
47
+ settings. Mesurer does not upload or externally process screenshots.
48
+
49
+ ## Remote Code
50
+
51
+ Mesurer does not use remote code.
52
+
53
+ All JavaScript/Wasm executed by the extension is packaged with the extension bundle.
54
+
55
+ ## Data Sharing
56
+
57
+ Mesurer does not sell or transfer user data to third parties.
58
+
59
+ ## Contact
60
+
61
+ For questions, open an issue on GitHub:
62
+
63
+ https://github.com/ibelick/mesurer/issues
package/README.md CHANGED
@@ -5,10 +5,19 @@
5
5
 
6
6
  <br>
7
7
 
8
+ # Mesurer
9
+
8
10
  [![npm version](https://img.shields.io/npm/v/mesurer)](https://www.npmjs.com/package/mesurer)
9
11
  [![downloads](https://img.shields.io/npm/dm/mesurer)](https://www.npmjs.com/package/mesurer)
10
12
 
11
- **[Mesurer](https://mesurer.dev)** is a lightweight measurement and alignment overlay for React apps. Toggle it on, select elements, and measure distances directly in the browser.
13
+ **Visual precision for building with coding agents.**
14
+
15
+ Measure, inspect, and capture exactly what you see in the browser.
16
+
17
+ Mesurer is an open-source UI inspector and visual feedback tool for the browser.
18
+ Use guides, rulers, measurements, color inspection, typography tools, X-ray mode,
19
+ screenshots to understand interfaces and communicate precise
20
+ visual feedback to coding agents.
12
21
 
13
22
  [Full documentation](https://mesurer.dev/)
14
23
 
@@ -21,13 +30,13 @@ npm install mesurer
21
30
  ## Usage
22
31
 
23
32
  ```tsx
24
- import { Measurer } from "mesurer";
33
+ import { Mesurer } from "mesurer";
25
34
 
26
35
  function App() {
27
36
  return (
28
37
  <>
29
38
  <YourApp />
30
- <Measurer />
39
+ <Mesurer />
31
40
  </>
32
41
  );
33
42
  }
@@ -44,6 +53,7 @@ function App() {
44
53
  | `persistKey` | Optional workspace storage key; default workspaces are isolated per browser tab. |
45
54
  | `portalTarget` | Optional element or shadow root used as the overlay portal mount target. |
46
55
  | `persistence` | Optional storage adapter for custom or extension-backed persistence. |
56
+ | `captureVisibleTab` | Optional function supplying a PNG of the visible tab for Screenshot capture. |
47
57
  | `onPersistenceError` | Called when persistence is unavailable or a storage write fails. |
48
58
  | `colorPickerFormats` | Color formats displayed in the picker popover, in display order. |
49
59
  | `colorPickerClickFormat` | Format copied to the clipboard when a color is picked. |
@@ -60,17 +70,18 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
60
70
 
61
71
  | Shortcut | Action |
62
72
  | ---------------------- | ----------------------------------------------------- |
63
- | `M` | Toggle measurer on/off. |
73
+ | `M` | Toggle Mesurer on/off. |
64
74
  | `S` | Toggle Select mode. |
65
75
  | `A` | Toggle Text Inspector mode. |
66
76
  | `P` | Open the native Color picker. |
77
+ | `C` | Drag a region of the visible tab for a screenshot. |
67
78
  | `G` | Toggle Guides mode. |
68
79
  | `X` | Toggle X-ray mode. |
69
80
  | `R` | Toggle pixel rulers along the top and left edges. |
70
81
  | `H` | Set guide orientation to horizontal. |
71
82
  | `V` | Set guide orientation to vertical. |
72
83
  | `Alt` | Temporarily enable option/guide measurement overlays. |
73
- | `Esc` | Close settings or picker; else clear all. |
84
+ | `Esc` | Cancel the current interaction and return to Selection. |
74
85
  | `Backspace` / `Delete` | Remove selected guides. |
75
86
  | `Cmd/Ctrl + Z` | Undo. |
76
87
  | `Cmd/Ctrl + Shift + Z` | Redo. |
@@ -78,21 +89,22 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
78
89
 
79
90
  ## Features
80
91
 
81
- - **Select mode** – Click elements to measure their bounds
82
- - **Guides mode** – Add and drag vertical or horizontal guides
83
- - **Rulers** – Drag guides from pixel rulers along the top and left edges
84
- - **Text Inspector** – Inspect typography styles and pin text details
85
- - **X-ray mode** – Reveal element structure without changing the page
86
- - **Color picker** – Sample rendered colors and copy values in your chosen format
87
- - **Distance overlays** – Hold Alt for quick spacing checks
88
- - **Undo/redo** – Command history for guide and measurement changes
89
- - **Settings** – Configure selection color, guide styles, ruler behavior, formats, and persistence
90
- - **Workspace controls** – Restore defaults or clear guides and measurements
92
+ - **Select mode** - Click elements to measure their bounds
93
+ - **Guides mode** - Add and drag vertical or horizontal guides
94
+ - **Rulers** - Drag guides from pixel rulers along the top and left edges
95
+ - **Text Inspector** - Inspect typography styles and pin text details
96
+ - **X-ray mode** - Reveal element structure without changing the page
97
+ - **Color picker** - Sample rendered colors and copy values in your chosen format
98
+ - **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.
99
+ - **Distance overlays** - Hold Alt for quick spacing checks
100
+ - **Undo/redo** - Command history for guide and measurement changes
101
+ - **Settings** - Configure selection color, guide styles, ruler behavior, formats, and persistence
102
+ - **Workspace controls** - Restore defaults or clear guides and measurements
91
103
 
92
104
  ## Requirements
93
105
 
94
106
  - React 18+
95
- - Chromium-based browser for the native color picker
107
+ - Chromium-based browser for the native color picker and screenshot capture
96
108
 
97
109
  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.
98
110