@comty.io/core 0.1.0 → 0.1.1

package/README.md

@@ -35,7 +35,13 @@ Choose one browser entry per page (npm, development injection, or CDN). Both dis
 
 Element inspection shows a copyable CSS custom-property name above foreground/background colors when the winning declaration can be identified. It handles ordinary selectors, `:where()`, inline styles, inheritance, `!important`, active media/supports rules and named top-level cascade layers. Semantic aliases retain their declared name. No extra line is rendered for literal colors or uncertain provenance (including inaccessible stylesheets, shadow/scoped or nested cascades, and unsupported functional selectors).
 
-The screen pipette receives a pixel color and copies its HEX value. When an inspected element has an identifiable background token whose rendered color matches the sample, the toast shows that token as **Element token · --name**. The native pipette does not report which element produced the pixel, so the label describes the inspected element rather than attributing the sampled pixel. Matching variable values alone do not produce a label. No additional dependency is required.
+The toolbar pipette shows a circular nine-pixel magnifier from a local DOM snapshot, keeping the toolbar interactive with normal UI cursors. Its light/dark ring follows the sampled colour. Scrolling or resizing refreshes the snapshot. Inaccessible images, canvas/video, external fonts and live animations may differ from screen pixels; use native screen sampling for those. If a readable snapshot cannot be created, selection falls back to the element’s CSS colour. Shift-click the pipette in Chrome or Edge to sample screen pixels instead (including images). The screen pipette receives a pixel color and copies its HEX value. When an inspected element has an identifiable background token whose rendered color matches the sample, the toast shows that token as **Element token · --name**. The native pipette does not report which element produced the pixel, so the label describes the inspected element rather than attributing the sampled pixel. Matching variable values alone do not produce a label. No additional dependency is required.
+
+## Border measurements
+
+Open inspection with **Shift I**, then choose the ruler tool or press **R**. Move close to an element or page border: a red point marks the snapped start and the cursor shows the measurement axis. Drag to another border to measure its distance. Horizontal borders produce vertical measurements; side borders produce horizontal measurements. Releasing away from a border keeps the endpoint at that page position.
+
+You can place several measurements. Their arrows and pixel labels remain visible, and element anchors follow scrolling, resizing and transforms. **Escape** cancels an unfinished drag; pressing it again exits measurement. Turning off the ruler tool or changing modes clears the measurements. They stay local to the current page and are never saved or uploaded. Pixel rulers and draggable guides remain available.
 
 ## Live motion