mesurer 0.0.9 → 0.0.11

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 +15 -0
  2. package/README.md +28 -7
  3. package/dist/index.cjs +2440 -539
  4. package/dist/index.d.cts +136 -2
  5. package/dist/index.d.ts +136 -2
  6. package/dist/index.js +2413 -515
  7. package/dist/styles.css +553 -4
  8. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # mesurer
2
2
 
3
+ ## 0.0.11
4
+
5
+ - keep guides, select, and rulers on screen while Settings is open so styles can be edited live
6
+ - isolate the Chrome extension overlay from host-page CSS
7
+ - stop settings saves from clearing the live workspace
8
+
9
+ ## 0.0.10
10
+
11
+ - add a color picker with hex, rgb, hsl, and oklch output
12
+ - add Settings for colors, guide styles, rulers, snap, and persistence
13
+ - persist settings across tabs; optionally keep the workspace across reloads
14
+ - isolate workspaces per tab and sync settings in the Chrome extension
15
+ - expose settings as `Measurer` props for React embeds
16
+ - style guides with weight, dashed/dotted patterns, and opacity
17
+
3
18
  ## 0.0.9
4
19
 
5
20
  - add persistent pixel rulers along the top and left edges
package/README.md CHANGED
@@ -40,9 +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`. |
44
- | `persistKey` | Optional storage key for isolating persisted state between multiple instances. |
43
+ | `persistOnReload` | Persists workspace state across reloads when `true`. |
44
+ | `persistKey` | Optional workspace storage key; default workspaces are isolated per browser tab. |
45
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.
46
58
 
47
59
  ## Commands
48
60
 
@@ -50,30 +62,39 @@ function App() {
50
62
  | ---------------------- | ----------------------------------------------------- |
51
63
  | `M` | Toggle measurer on/off. |
52
64
  | `S` | Toggle Select mode. |
65
+ | `A` | Toggle Text Inspector mode. |
66
+ | `P` | Open the native Color picker. |
53
67
  | `G` | Toggle Guides mode. |
54
68
  | `X` | Toggle X-ray mode. |
55
69
  | `R` | Toggle pixel rulers along the top and left edges. |
56
70
  | `H` | Set guide orientation to horizontal. |
57
71
  | `V` | Set guide orientation to vertical. |
58
72
  | `Alt` | Temporarily enable option/guide measurement overlays. |
59
- | `Esc` | Clear all measurements and guides. |
73
+ | `Esc` | Close settings or picker; else clear all. |
60
74
  | `Backspace` / `Delete` | Remove selected guides. |
61
75
  | `Cmd/Ctrl + Z` | Undo. |
62
76
  | `Cmd/Ctrl + Shift + Z` | Redo. |
77
+ | `Cmd/Ctrl + ,` | Open Settings. |
63
78
 
64
79
  ## Features
65
80
 
66
- - **Toggle on/off** – Enable the overlay with a single shortcut
67
81
  - **Select mode** – Click elements to measure their bounds
68
- - **Guides mode** – Add vertical or horizontal guides
69
- - **Rulers** – Show pixel rulers along the top and left edges
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
70
87
  - **Distance overlays** – Hold Alt for quick spacing checks
71
88
  - **Undo/redo** – Command history for guide and measurement changes
72
- - **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
73
91
 
74
92
  ## Requirements
75
93
 
76
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.
77
98
 
78
99
  ## License
79
100