mesurer 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# mesurer
+
+## 0.0.5
+
+- update toolbar UI
+- add changelog
+- stop auto selecting new guides
+
+## 0.0.3
+
+- fix: initial public release polish

package/README.md

@@ -1,6 +1,6 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://mesurer.ibelick.com/logo-dark.svg">
-  <img src="https://mesurer.ibelick.com/logo.svg" alt="Mesurer" width="200">
+  <source media="(prefers-color-scheme: dark)" srcset="https://mesurer.dev/logo-dark.svg">
+  <img src="https://mesurer.dev/logo.svg" alt="Mesurer" width="200">
 </picture>
 
 <br>
@@ -8,9 +8,9 @@
 [![npm version](https://img.shields.io/npm/v/mesurer)](https://www.npmjs.com/package/mesurer)
 [![downloads](https://img.shields.io/npm/dm/mesurer)](https://www.npmjs.com/package/mesurer)
 
-**[Mesurer](https://mesurer.ibelick.com)** is a lightweight measurement and alignment overlay for React apps. Toggle it on, select elements, and measure distances directly in the browser.
+**[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.
 
-[Full documentation](https://mesurer.ibelick.com/)
+[Full documentation](https://mesurer.dev/)
 
 ## Install
 
@@ -35,6 +35,30 @@ function App() {
 
 No additional CSS import is required.
 
+## Props
+
+| Prop | Description |
+| --- | --- |
+| `highlightColor` | Base color for selection/hover overlays (defaults to `oklch(0.62 0.18 255)`). |
+| `guideColor` | Base color for guides (defaults to `oklch(0.63 0.26 29.23)`). |
+| `hoverHighlightEnabled` | Disables hover highlight and deselects on click when `false`. |
+| `persistOnReload` | Persists state in `localStorage` as `mesurer-state` when `true`. |
+
+## Commands
+
+| Shortcut | Action |
+| --- | --- |
+| `M` | Toggle measurer on/off. |
+| `S` | Toggle Select mode. |
+| `G` | Toggle Guides mode. |
+| `H` | Set guide orientation to horizontal. |
+| `V` | Set guide orientation to vertical. |
+| `Alt` | Temporarily enable option/guide measurement overlays. |
+| `Esc` | Clear all measurements and guides. |
+| `Backspace` / `Delete` | Remove selected guides. |
+| `Cmd/Ctrl + Z` | Undo. |
+| `Cmd/Ctrl + Shift + Z` | Redo. |
+
 ## Features
 
 - **Toggle on/off** – Enable the overlay with a single shortcut

package/dist/index.cjs

@@ -489,7 +489,7 @@ function ToolbarComponent({
                       {
                         type: "button",
                         className: cn(
-                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
+                          "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
                           activeMenuIndex === 0 || guideOrientation === "horizontal" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
                         ),
                         onClick: () => selectGuideOrientation("horizontal"),
@@ -505,7 +505,7 @@ function ToolbarComponent({
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12 }),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1", children: "Horizontal" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-ink-500", children: "H" })
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "H" })
                         ]
                       }
                     ),
@@ -514,7 +514,7 @@ function ToolbarComponent({
                       {
                         type: "button",
                         className: cn(
-                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
+                          "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
                           activeMenuIndex === 1 || guideOrientation === "vertical" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
                         ),
                         onClick: () => selectGuideOrientation("vertical"),
@@ -530,7 +530,7 @@ function ToolbarComponent({
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12, className: "rotate-90" }),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1", children: "Vertical" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-ink-500", children: "V" })
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "V" })
                         ]
                       }
                     )
@@ -2089,7 +2089,6 @@ var useMeasurerPointer = ({
           ...prev,
           { id, orientation: guideOrientation, position }
         ]);
-        setSelectedGuideIds([id]);
         scheduleGuideDragHold(id, setDraggingGuideId);
         event.currentTarget.setPointerCapture(event.pointerId);
         return;

package/dist/index.js

@@ -478,7 +478,7 @@ function ToolbarComponent({
                       {
                         type: "button",
                         className: cn(
-                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
+                          "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
                           activeMenuIndex === 0 || guideOrientation === "horizontal" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
                         ),
                         onClick: () => selectGuideOrientation("horizontal"),
@@ -494,7 +494,7 @@ function ToolbarComponent({
                           ),
                           /* @__PURE__ */ jsx2(MinusIcon, { size: 12 }),
                           /* @__PURE__ */ jsx2("span", { className: "flex-1", children: "Horizontal" }),
-                          /* @__PURE__ */ jsx2("span", { className: "text-ink-500", children: "H" })
+                          /* @__PURE__ */ jsx2("span", { children: "H" })
                         ]
                       }
                     ),
@@ -503,7 +503,7 @@ function ToolbarComponent({
                       {
                         type: "button",
                         className: cn(
-                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
+                          "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
                           activeMenuIndex === 1 || guideOrientation === "vertical" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
                         ),
                         onClick: () => selectGuideOrientation("vertical"),
@@ -519,7 +519,7 @@ function ToolbarComponent({
                           ),
                           /* @__PURE__ */ jsx2(MinusIcon, { size: 12, className: "rotate-90" }),
                           /* @__PURE__ */ jsx2("span", { className: "flex-1", children: "Vertical" }),
-                          /* @__PURE__ */ jsx2("span", { className: "text-ink-500", children: "V" })
+                          /* @__PURE__ */ jsx2("span", { children: "V" })
                         ]
                       }
                     )
@@ -2078,7 +2078,6 @@ var useMeasurerPointer = ({
           ...prev,
           { id, orientation: guideOrientation, position }
         ]);
-        setSelectedGuideIds([id]);
         scheduleGuideDragHold(id, setDraggingGuideId);
         event.currentTarget.setPointerCapture(event.pointerId);
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesurer",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Measure and align everything on localhost.",
   "license": "MIT",
   "author": "Julien Thibeaut",
@@ -20,6 +20,7 @@
   "files": [
     "dist",
     "dist/styles.css",
+    "CHANGELOG.md",
     "README.md",
     "LICENSE"
   ],
@@ -27,7 +28,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://mesurer.ibelick.com",
+  "homepage": "https://mesurer.dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/ibelick/mesurer.git"