mesurer 0.1.0 → 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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +31 -16
  3. package/dist/index.cjs +8260 -2736
  4. package/dist/index.d.cts +61 -6
  5. package/dist/index.d.ts +61 -6
  6. package/dist/index.js +8235 -2688
  7. package/dist/styles.css +1 -1
  8. package/package.json +16 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 0.1.0
4
12
 
5
13
  - add screenshot region selection with clipboard copy and local download support
package/README.md CHANGED
@@ -10,13 +10,13 @@
10
10
  [![npm version](https://img.shields.io/npm/v/mesurer)](https://www.npmjs.com/package/mesurer)
11
11
  [![downloads](https://img.shields.io/npm/dm/mesurer)](https://www.npmjs.com/package/mesurer)
12
12
 
13
- **Visual precision for building with coding agents.**
13
+ **Inspect, annotate, and give feedback on any live interface.**
14
14
 
15
- Measure, inspect, and capture exactly what you see in the browser.
15
+ Mesurer runs directly where you build. Share feedback with your agents and your team.
16
16
 
17
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
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
20
  visual feedback to coding agents.
21
21
 
22
22
  [Full documentation](https://mesurer.dev/)
@@ -48,7 +48,10 @@ function App() {
48
48
  | ----------------------- | ----------------------------------------------------------------------------- |
49
49
  | `highlightColor` | Base color for selection/hover overlays (defaults to `oklch(0.62 0.18 255)`). |
50
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`. |
51
53
  | `hoverHighlightEnabled` | Disables hover highlight and deselects on click when `false`. |
54
+ | `layoutDetailsEnabled` | Shows gap and padding under selected dimensions. Default `true`. |
52
55
  | `persistOnReload` | Persists workspace state across reloads when `true`. |
53
56
  | `persistKey` | Optional workspace storage key; default workspaces are isolated per browser tab. |
54
57
  | `portalTarget` | Optional element or shadow root used as the overlay portal mount target. |
@@ -59,10 +62,13 @@ function App() {
59
62
  | `colorPickerClickFormat` | Format copied to the clipboard when a color is picked. |
60
63
  | `snapEnabled` | Snap selection to nearby elements. Default `true`. |
61
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`. |
62
67
  | `selectNewGuideEnabled` | Highlight a guide when it is placed. Default `true`. |
63
68
  | `multiMeasureEnabled` | Keep previous measurements visible. Default `false`. |
64
69
  | `guideStyle` | Guide opacity, width, pattern, dash length, and gap. |
65
70
  | `rulerSettings` | Ruler opacity and edge reveal. |
71
+ | `textStyle` | Default text annotation font and color. |
66
72
 
67
73
  Props are the defaults. Saved settings override them; **Use defaults** restores the props.
68
74
 
@@ -71,9 +77,15 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
71
77
  | Shortcut | Action |
72
78
  | ---------------------- | ----------------------------------------------------- |
73
79
  | `M` | Toggle Mesurer on/off. |
74
- | `S` | Toggle Select mode. |
75
- | `A` | Toggle Text Inspector mode. |
76
- | `P` | Open the native Color picker. |
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. |
77
89
  | `C` | Drag a region of the visible tab for a screenshot. |
78
90
  | `G` | Toggle Guides mode. |
79
91
  | `X` | Toggle X-ray mode. |
@@ -81,30 +93,33 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
81
93
  | `H` | Set guide orientation to horizontal. |
82
94
  | `V` | Set guide orientation to vertical. |
83
95
  | `Alt` | Temporarily enable option/guide measurement overlays. |
84
- | `Esc` | Cancel the current interaction and return to Selection. |
85
- | `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. |
86
98
  | `Cmd/Ctrl + Z` | Undo. |
87
99
  | `Cmd/Ctrl + Shift + Z` | Redo. |
100
+ | `Cmd/Ctrl + A` | Select all annotations. |
88
101
  | `Cmd/Ctrl + ,` | Open Settings. |
89
102
 
90
103
  ## Features
91
104
 
92
- - **Select mode** - Click elements to measure their bounds
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
93
108
  - **Guides mode** - Add and drag vertical or horizontal guides
94
109
  - **Rulers** - Drag guides from pixel rulers along the top and left edges
95
- - **Text Inspector** - Inspect typography styles and pin text details
110
+ - **Typography** - Inspect typography styles and pin text details
96
111
  - **X-ray mode** - Reveal element structure without changing the page
97
- - **Color picker** - Sample rendered colors and copy values in your chosen format
112
+ - **Sample color** - Sample rendered colors and copy values in your chosen format
98
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.
99
114
  - **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
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
103
118
 
104
119
  ## Requirements
105
120
 
106
121
  - React 18+
107
- - Chromium-based browser for the native color picker and screenshot capture
122
+ - Chromium-based browser. The native screen color picker requires Chromium on Windows or macOS; Linux Chromium builds may not expose the EyeDropper API.
108
123
 
109
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.
110
125