mesurer 0.0.8 → 0.0.10

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 +22 -0
  2. package/README.md +30 -5
  3. package/dist/index.cjs +4283 -686
  4. package/dist/index.d.cts +169 -2
  5. package/dist/index.d.ts +169 -2
  6. package/dist/index.js +4258 -667
  7. package/dist/styles.css +518 -0
  8. package/package.json +5 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # mesurer
2
2
 
3
+ ## 0.0.10
4
+
5
+ - add a color picker with hex, rgb, hsl, and oklch output
6
+ - add Settings for colors, guide styles, rulers, snap, and persistence
7
+ - persist settings across tabs; optionally keep the workspace across reloads
8
+ - isolate workspaces per tab and sync settings in the Chrome extension
9
+ - expose settings as `Measurer` props for React embeds
10
+ - style guides with weight, dashed/dotted patterns, and opacity
11
+
12
+ ## 0.0.9
13
+
14
+ - add persistent pixel rulers along the top and left edges
15
+ - create and drag guides directly from rulers
16
+ - show live guide values with masked ruler labels
17
+ - select and drag guides across tool modes
18
+ - prevent page text selection while dragging guides
19
+ - add X-ray inspection mode
20
+ - improve Text Inspector behavior and toolbar interactions
21
+ - update toolbar and marketing-site feature icons
22
+ - Thanks to [@alecramos-sudo](https://github.com/alecramos-sudo) for [adding the Aa text-style inspector mode to the overlay toolbar](https://github.com/ibelick/mesurer/pull/8).
23
+ - Thanks to [@Romariin](https://github.com/Romariin) for [keeping guides visible without blocking page clicks](https://github.com/ibelick/mesurer/pull/12).
24
+
3
25
  ## 0.0.8
4
26
 
5
27
  - restore precise element targeting with top-layer extension host
package/README.md CHANGED
@@ -40,8 +40,21 @@ function App() {
40
40
  | `highlightColor` | Base color for selection/hover overlays (defaults to `oklch(0.62 0.18 255)`). |
41
41
  | `guideColor` | Base color for guides (defaults to `oklch(0.63 0.26 29.23)`). |
42
42
  | `hoverHighlightEnabled` | Disables hover highlight and deselects on click when `false`. |
43
- | `persistOnReload` | Persists state in `localStorage` as `mesurer-state` when `true`. |
43
+ | `persistOnReload` | Persists workspace state across reloads when `true`. |
44
+ | `persistKey` | Optional workspace storage key; default workspaces are isolated per browser tab. |
44
45
  | `portalTarget` | Optional element or shadow root used as the overlay portal mount target. |
46
+ | `persistence` | Optional storage adapter for custom or extension-backed persistence. |
47
+ | `onPersistenceError` | Called when persistence is unavailable or a storage write fails. |
48
+ | `colorPickerFormats` | Color formats displayed in the picker popover, in display order. |
49
+ | `colorPickerClickFormat` | Format copied to the clipboard when a color is picked. |
50
+ | `snapEnabled` | Snap selection to nearby elements. Default `true`. |
51
+ | `snapGuidesEnabled` | Snap guides to other guides. Default `true`. |
52
+ | `selectNewGuideEnabled` | Highlight a guide when it is placed. Default `true`. |
53
+ | `multiMeasureEnabled` | Keep previous measurements visible. Default `false`. |
54
+ | `guideStyle` | Guide opacity, width, pattern, dash length, and gap. |
55
+ | `rulerSettings` | Ruler opacity and edge reveal. |
56
+
57
+ Props are the defaults. Saved settings override them; **Use defaults** restores the props.
45
58
 
46
59
  ## Commands
47
60
 
@@ -49,27 +62,39 @@ function App() {
49
62
  | ---------------------- | ----------------------------------------------------- |
50
63
  | `M` | Toggle measurer on/off. |
51
64
  | `S` | Toggle Select mode. |
65
+ | `A` | Toggle Text Inspector mode. |
66
+ | `P` | Open the native Color picker. |
52
67
  | `G` | Toggle Guides mode. |
68
+ | `X` | Toggle X-ray mode. |
69
+ | `R` | Toggle pixel rulers along the top and left edges. |
53
70
  | `H` | Set guide orientation to horizontal. |
54
71
  | `V` | Set guide orientation to vertical. |
55
72
  | `Alt` | Temporarily enable option/guide measurement overlays. |
56
- | `Esc` | Clear all measurements and guides. |
73
+ | `Esc` | Close settings or picker; else clear all. |
57
74
  | `Backspace` / `Delete` | Remove selected guides. |
58
75
  | `Cmd/Ctrl + Z` | Undo. |
59
76
  | `Cmd/Ctrl + Shift + Z` | Redo. |
77
+ | `Cmd/Ctrl + ,` | Open Settings. |
60
78
 
61
79
  ## Features
62
80
 
63
- - **Toggle on/off** – Enable the overlay with a single shortcut
64
81
  - **Select mode** – Click elements to measure their bounds
65
- - **Guides mode** – Add vertical or horizontal guides
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
66
87
  - **Distance overlays** – Hold Alt for quick spacing checks
67
88
  - **Undo/redo** – Command history for guide and measurement changes
68
- - **Persist state** – Keep guides and measurements on reload
89
+ - **Settings** – Configure selection color, guide styles, ruler behavior, formats, and persistence
90
+ - **Workspace controls** – Restore defaults or clear guides and measurements
69
91
 
70
92
  ## Requirements
71
93
 
72
94
  - React 18+
95
+ - Chromium-based browser for the native color picker
96
+
97
+ 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.
73
98
 
74
99
  ## License
75
100