mesurer 0.1.0 → 0.1.2

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 +18 -0
  2. package/README.md +32 -16
  3. package/dist/index.cjs +8895 -2430
  4. package/dist/index.d.cts +64 -7
  5. package/dist/index.d.ts +64 -7
  6. package/dist/index.js +9144 -2657
  7. package/dist/styles.css +1 -1
  8. package/package.json +16 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # mesurer
2
2
 
3
+ ## 0.1.2
4
+
5
+ - add configurable keyboard shortcuts and toolbar minimization
6
+ - improve keyboard shortcut reliability in host-page editors and browser prompts
7
+ - preserve Text-tool typing, paste, IME input, and host-page focus
8
+ - fix annotation deletion with Backspace/Delete after a page editor has focus
9
+ - improve Chrome extension keyboard isolation and focus handoff
10
+ - fix interruptible toolbar motion when switching inspect/annotate or minimizing
11
+ - stretch toolbar separators to the pill edges
12
+
13
+ ## 0.1.1
14
+
15
+ - add grouped Select & Inspect and Annotate toolbars
16
+ - add arrows, freehand pen strokes, and text annotations
17
+ - add annotation selection, transforms, persistence, and undo/redo
18
+ - add arrow and text configuration props
19
+ - improve keyboard shortcuts and Escape behavior
20
+
3
21
  ## 0.1.0
4
22
 
5
23
  - 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,8 +48,12 @@ 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`. |
56
+ | `shortcutsEnabled` | Enables global keyboard shortcuts when `true`. Default `true`. |
53
57
  | `persistKey` | Optional workspace storage key; default workspaces are isolated per browser tab. |
54
58
  | `portalTarget` | Optional element or shadow root used as the overlay portal mount target. |
55
59
  | `persistence` | Optional storage adapter for custom or extension-backed persistence. |
@@ -59,10 +63,13 @@ function App() {
59
63
  | `colorPickerClickFormat` | Format copied to the clipboard when a color is picked. |
60
64
  | `snapEnabled` | Snap selection to nearby elements. Default `true`. |
61
65
  | `snapGuidesEnabled` | Snap guides to other guides. Default `true`. |
66
+ | `snapArrowsEnabled` | Snap arrow endpoints to nearby elements. Default `true`. |
67
+ | `arrowClickToPlace` | Place arrows with clicks instead of drag gestures. Default `false`. |
62
68
  | `selectNewGuideEnabled` | Highlight a guide when it is placed. Default `true`. |
63
69
  | `multiMeasureEnabled` | Keep previous measurements visible. Default `false`. |
64
70
  | `guideStyle` | Guide opacity, width, pattern, dash length, and gap. |
65
71
  | `rulerSettings` | Ruler opacity and edge reveal. |
72
+ | `textStyle` | Default text annotation font and color. |
66
73
 
67
74
  Props are the defaults. Saved settings override them; **Use defaults** restores the props.
68
75
 
@@ -71,9 +78,15 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
71
78
  | Shortcut | Action |
72
79
  | ---------------------- | ----------------------------------------------------- |
73
80
  | `M` | Toggle Mesurer on/off. |
74
- | `S` | Toggle Select mode. |
75
- | `A` | Toggle Text Inspector mode. |
76
- | `P` | Open the native Color picker. |
81
+ | `I` | Toggle Inspect mode. |
82
+ | `S` | Toggle Select mode for annotations. |
83
+ | `A` | Toggle Typography mode. |
84
+ | `D` | Toggle Arrows mode. |
85
+ | `N` | Toggle Pen mode. |
86
+ | `T` | Toggle Text mode. |
87
+ | `1` | Switch to the Select & Inspect tools. |
88
+ | `2` | Switch to the Annotate tools. |
89
+ | `P` | Open the native color sampler. |
77
90
  | `C` | Drag a region of the visible tab for a screenshot. |
78
91
  | `G` | Toggle Guides mode. |
79
92
  | `X` | Toggle X-ray mode. |
@@ -81,30 +94,33 @@ Props are the defaults. Saved settings override them; **Use defaults** restores
81
94
  | `H` | Set guide orientation to horizontal. |
82
95
  | `V` | Set guide orientation to vertical. |
83
96
  | `Alt` | Temporarily enable option/guide measurement overlays. |
84
- | `Esc` | Cancel the current interaction and return to Selection. |
85
- | `Backspace` / `Delete` | Remove selected guides. |
97
+ | `Esc` | Close an open panel, cancel the current interaction, or deselect the tool. Press again to minimize Mesurer. |
98
+ | `Backspace` / `Delete` | Remove selected guides, arrows, pen strokes, or text. |
86
99
  | `Cmd/Ctrl + Z` | Undo. |
87
100
  | `Cmd/Ctrl + Shift + Z` | Redo. |
101
+ | `Cmd/Ctrl + A` | Select all annotations. |
88
102
  | `Cmd/Ctrl + ,` | Open Settings. |
89
103
 
90
104
  ## Features
91
105
 
92
- - **Select mode** - Click elements to measure their bounds
106
+ - **Inspect mode** - Click elements to measure their bounds
107
+ - **Annotation tools** - Draw arrows, freehand pen strokes, and text notes
108
+ - **Annotation selection** - Select, move, resize, rotate, delete, and multi-select annotations
93
109
  - **Guides mode** - Add and drag vertical or horizontal guides
94
110
  - **Rulers** - Drag guides from pixel rulers along the top and left edges
95
- - **Text Inspector** - Inspect typography styles and pin text details
111
+ - **Typography** - Inspect typography styles and pin text details
96
112
  - **X-ray mode** - Reveal element structure without changing the page
97
- - **Color picker** - Sample rendered colors and copy values in your chosen format
113
+ - **Sample color** - Sample rendered colors and copy values in your chosen format
98
114
  - **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
115
  - **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
116
+ - **Undo/redo** - Command history for guides, measurements, arrows, pen strokes, and text annotations
117
+ - **Settings** - Configure selection, guide, ruler, arrow, text, color, format, and persistence behavior
118
+ - **Workspace controls** - Restore defaults or clear guides, measurements, and annotations; minimize Mesurer to a single toolbar button
103
119
 
104
120
  ## Requirements
105
121
 
106
122
  - React 18+
107
- - Chromium-based browser for the native color picker and screenshot capture
123
+ - Chromium-based browser. The native screen color picker requires Chromium on Windows or macOS; Linux Chromium builds may not expose the EyeDropper API.
108
124
 
109
125
  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
126