mesurer 0.0.11 → 0.1.1

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/PRIVACY.md +63 -0
  3. package/README.md +47 -20
  4. package/dist/index.cjs +11986 -4697
  5. package/dist/index.d.cts +70 -7
  6. package/dist/index.d.ts +70 -7
  7. package/dist/index.js +11719 -4402
  8. package/dist/styles.css +1 -1165
  9. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # mesurer
2
2
 
3
+ ## 0.1.1
4
+
5
+ - add grouped Select & Inspect and Annotate toolbars
6
+ - add arrows, freehand pen strokes, and text annotations
7
+ - add annotation selection, transforms, persistence, and undo/redo
8
+ - add arrow and text configuration props
9
+ - improve keyboard shortcuts and Escape behavior
10
+
11
+ ## 0.1.0
12
+
13
+ - add screenshot region selection with clipboard copy and local download support
14
+ - add Chrome extension visible-tab capture integration
15
+ - add configurable screenshot copy and download settings
16
+ - rename the public `Measurer` component and props type to `Mesurer` and `MesurerProps`
17
+ - improve extension isolation, persistence, settings, guides, rulers, and visual inspection workflows
18
+
3
19
  ## 0.0.11
4
20
 
5
21
  - 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
+ **Inspect, annotate, and give feedback on any live interface.**
14
+
15
+ Mesurer runs directly where you build. Share feedback with your agents and your team.
16
+
17
+ Mesurer is an open-source UI inspector and visual feedback tool for the browser.
18
+ Use guides, rulers, measurements, arrows, freehand pen strokes, text annotations,
19
+ color inspection, typography tools, X-ray mode, and 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
  }
@@ -39,20 +48,27 @@ function App() {
39
48
  | ----------------------- | ----------------------------------------------------------------------------- |
40
49
  | `highlightColor` | Base color for selection/hover overlays (defaults to `oklch(0.62 0.18 255)`). |
41
50
  | `guideColor` | Base color for guides (defaults to `oklch(0.63 0.26 29.23)`). |
51
+ | `arrowColor` | Base color for arrows (defaults to `oklch(0.63 0.26 29.23)`). |
52
+ | `guideHighlightEnabled` | Highlights guides when they are hovered or selected. Default `true`. |
42
53
  | `hoverHighlightEnabled` | Disables hover highlight and deselects on click when `false`. |
54
+ | `layoutDetailsEnabled` | Shows gap and padding under selected dimensions. Default `true`. |
43
55
  | `persistOnReload` | Persists workspace state across reloads when `true`. |
44
56
  | `persistKey` | Optional workspace storage key; default workspaces are isolated per browser tab. |
45
57
  | `portalTarget` | Optional element or shadow root used as the overlay portal mount target. |
46
58
  | `persistence` | Optional storage adapter for custom or extension-backed persistence. |
59
+ | `captureVisibleTab` | Optional function supplying a PNG of the visible tab for Screenshot capture. |
47
60
  | `onPersistenceError` | Called when persistence is unavailable or a storage write fails. |
48
61
  | `colorPickerFormats` | Color formats displayed in the picker popover, in display order. |
49
62
  | `colorPickerClickFormat` | Format copied to the clipboard when a color is picked. |
50
63
  | `snapEnabled` | Snap selection to nearby elements. Default `true`. |
51
64
  | `snapGuidesEnabled` | Snap guides to other guides. Default `true`. |
65
+ | `snapArrowsEnabled` | Snap arrow endpoints to nearby elements. Default `true`. |
66
+ | `arrowClickToPlace` | Place arrows with clicks instead of drag gestures. Default `false`. |
52
67
  | `selectNewGuideEnabled` | Highlight a guide when it is placed. Default `true`. |
53
68
  | `multiMeasureEnabled` | Keep previous measurements visible. Default `false`. |
54
69
  | `guideStyle` | Guide opacity, width, pattern, dash length, and gap. |
55
70
  | `rulerSettings` | Ruler opacity and edge reveal. |
71
+ | `textStyle` | Default text annotation font and color. |
56
72
 
57
73
  Props are the defaults. Saved settings override them; **Use defaults** restores the props.
58
74
 
@@ -60,39 +76,50 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
60
76
 
61
77
  | Shortcut | Action |
62
78
  | ---------------------- | ----------------------------------------------------- |
63
- | `M` | Toggle measurer on/off. |
64
- | `S` | Toggle Select mode. |
65
- | `A` | Toggle Text Inspector mode. |
66
- | `P` | Open the native Color picker. |
79
+ | `M` | Toggle Mesurer on/off. |
80
+ | `I` | Toggle Inspect mode. |
81
+ | `S` | Toggle Select mode for annotations. |
82
+ | `A` | Toggle Typography mode. |
83
+ | `D` | Toggle Arrows mode. |
84
+ | `N` | Toggle Pen mode. |
85
+ | `T` | Toggle Text mode. |
86
+ | `1` | Switch to the Select & Inspect tools. |
87
+ | `2` | Switch to the Annotate tools. |
88
+ | `P` | Open the native color sampler. |
89
+ | `C` | Drag a region of the visible tab for a screenshot. |
67
90
  | `G` | Toggle Guides mode. |
68
91
  | `X` | Toggle X-ray mode. |
69
92
  | `R` | Toggle pixel rulers along the top and left edges. |
70
93
  | `H` | Set guide orientation to horizontal. |
71
94
  | `V` | Set guide orientation to vertical. |
72
95
  | `Alt` | Temporarily enable option/guide measurement overlays. |
73
- | `Esc` | Close settings or picker; else clear all. |
74
- | `Backspace` / `Delete` | Remove selected guides. |
96
+ | `Esc` | Close an open panel, cancel the current interaction, or deselect the tool; press twice to exit Mesurer completely. |
97
+ | `Backspace` / `Delete` | Remove selected guides, arrows, pen strokes, or text. |
75
98
  | `Cmd/Ctrl + Z` | Undo. |
76
99
  | `Cmd/Ctrl + Shift + Z` | Redo. |
100
+ | `Cmd/Ctrl + A` | Select all annotations. |
77
101
  | `Cmd/Ctrl + ,` | Open Settings. |
78
102
 
79
103
  ## Features
80
104
 
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
105
+ - **Inspect mode** - Click elements to measure their bounds
106
+ - **Annotation tools** - Draw arrows, freehand pen strokes, and text notes
107
+ - **Annotation selection** - Select, move, resize, rotate, delete, and multi-select annotations
108
+ - **Guides mode** - Add and drag vertical or horizontal guides
109
+ - **Rulers** - Drag guides from pixel rulers along the top and left edges
110
+ - **Typography** - Inspect typography styles and pin text details
111
+ - **X-ray mode** - Reveal element structure without changing the page
112
+ - **Sample color** - Sample rendered colors and copy values in your chosen format
113
+ - **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.
114
+ - **Distance overlays** - Hold Alt for quick spacing checks
115
+ - **Undo/redo** - Command history for guides, measurements, arrows, pen strokes, and text annotations
116
+ - **Settings** - Configure selection, guide, ruler, arrow, text, color, format, and persistence behavior
117
+ - **Workspace controls** - Restore defaults or clear guides, measurements, and annotations
91
118
 
92
119
  ## Requirements
93
120
 
94
121
  - React 18+
95
- - Chromium-based browser for the native color picker
122
+ - Chromium-based browser. The native screen color picker requires Chromium on Windows or macOS; Linux Chromium builds may not expose the EyeDropper API.
96
123
 
97
124
  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
125