@oyerinde/caliper 0.1.0 → 0.1.1

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 +14 -0
  2. package/README.md +96 -16
  3. package/dist/index.cjs +310 -168
  4. package/dist/index.d.ts +1 -17
  5. package/dist/index.global.js +309 -167
  6. package/dist/index.js +310 -168
  7. package/dist/version.json +2 -2
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## [0.1.1] - 2026-01-13
6
+
7
+ ### Fixed
8
+
9
+ - Rulers now maintain their proportional position when the browser window is resized.
10
+ - Fixed an issue where the `Alt` key could still trigger activation even when the activate command was reconfigured.
11
+ - Improved measurement value formatting and display consistency.
12
+ - Fixed theme configuration to support both Hex and RGBA formats (previously limited to specific RGBA structures).
13
+
14
+ ### Improved
15
+
16
+ - Optimized performance by adding `isActive` guards to reactive cycles and keyboard event handlers.
17
+ - Reduced resource overhead by disabling `ResizeObserver` and scroll listeners when the tool is inactive.
18
+
5
19
  ## [0.1.0] - 2026-01-10
6
20
 
7
21
  ### Added
package/README.md CHANGED
@@ -25,14 +25,7 @@ Caliper is a high-precision, framework-agnostic measurement tool that lives in y
25
25
 
26
26
  Caliper is designed to be side-effect-free in production and easy to integrate into any modern stack.
27
27
 
28
- ### Method 1: NPM (Recommended)
29
-
30
- ```bash
31
- pnpm install @oyerinde/caliper
32
- ```
33
-
34
- **Next.js (App Router)**
35
-
28
+ ### 1. Next.js (App Router)
36
29
  ```tsx
37
30
  // app/layout.tsx
38
31
  import Script from "next/script";
@@ -44,7 +37,7 @@ export default function RootLayout({ children }) {
44
37
  {process.env.NODE_ENV === "development" && (
45
38
  <Script
46
39
  src="https://unpkg.com/@oyerinde/caliper/dist/index.global.js"
47
- data-config={JSON.stringify({ theme: { primary: "#18A0FB" } })}
40
+ data-config={JSON.stringify({ theme: { primary: '#AC2323' } })}
48
41
  strategy="afterInteractive"
49
42
  />
50
43
  )}
@@ -55,14 +48,101 @@ export default function RootLayout({ children }) {
55
48
  }
56
49
  ```
57
50
 
58
- ### Method 2: Script Tag (Zero Config)
51
+ ### 2. Vite
52
+ ```html
53
+ <!-- index.html -->
54
+ <script type="module">
55
+ if (import.meta.env.DEV) {
56
+ // Run npm i @oyerinde/caliper then
57
+ import("@oyerinde/caliper").then(({ init }) => {
58
+ init({ theme: { primary: '#AC2323' } });
59
+ });
60
+ }
61
+ </script>
62
+ ```
63
+
64
+ ### 3. HTML (Plain)
65
+ ```html
66
+ <!-- index.html -->
67
+ <script type="module">
68
+ const isDev = location.hostname === "localhost" || location.hostname === "127.0.0.1";
69
+
70
+ if (isDev) {
71
+ import("https://unpkg.com/@oyerinde/caliper/dist/index.js").then(({ init }) => {
72
+ init({ theme: { primary: "#AC2323" } });
73
+ });
74
+ }
75
+ </script>
76
+ ```
59
77
 
78
+ ### 4. Astro
60
79
  ```html
61
- <!-- Automatically mounts in development -->
62
- <script
63
- src="https://unpkg.com/@oyerinde/caliper/dist/index.global.js"
64
- data-config='{"theme": {"primary": "#18A0FB"}}'
65
- ></script>
80
+ <!-- src/components/Caliper.astro -->
81
+ <script type="module" is:inline>
82
+ if (import.meta.env.DEV) {
83
+ // Run npm i @oyerinde/caliper then
84
+ import('@oyerinde/caliper').then(({ init }) => {
85
+ init();
86
+ });
87
+ }
88
+ </script>
89
+ ```
90
+
91
+ ### 5. Nuxt
92
+ ```ts
93
+ // nuxt.config.ts
94
+ export default defineNuxtConfig({
95
+ app: {
96
+ head: {
97
+ script: [
98
+ {
99
+ src: 'https://unpkg.com/@oyerinde/caliper/dist/index.global.js',
100
+ 'data-config': JSON.stringify({ theme: { primary: '#AC2323' } }),
101
+ defer: true
102
+ }
103
+ ]
104
+ }
105
+ }
106
+ });
107
+ ```
108
+
109
+ ### 6. Vue
110
+ ```html
111
+ <!-- index.html -->
112
+ <script type="module">
113
+ if (import.meta.env.DEV) {
114
+ // Run npm i @oyerinde/caliper then
115
+ import("@oyerinde/caliper").then(({ init }) => {
116
+ init({ theme: { primary: '#AC2323' } });
117
+ });
118
+ }
119
+ </script>
120
+ ```
121
+
122
+ ### 7. TanStack Start
123
+ ```tsx
124
+ // root.tsx
125
+ import { Meta, Scripts } from '@tanstack/react-router';
126
+
127
+ export function Root() {
128
+ return (
129
+ <html lang="en">
130
+ <head>
131
+ <Meta />
132
+ {process.env.NODE_ENV === 'development' && (
133
+ <script
134
+ src="https://unpkg.com/@oyerinde/caliper/dist/index.global.js"
135
+ data-config={JSON.stringify({ theme: { primary: '#AC2323' } })}
136
+ async
137
+ />
138
+ )}
139
+ </head>
140
+ <body>
141
+ <Scripts />
142
+ </body>
143
+ </html>
144
+ );
145
+ }
66
146
  ```
67
147
 
68
148
  ---
@@ -108,7 +188,7 @@ To prevent Caliper from measuring specific elements (like sidebars, floating but
108
188
 
109
189
  ### Measurements
110
190
 
111
- - **Cmd/Ctrl + Hold + Click** (250ms) — Select an element.
191
+ - **Cmd/Ctrl + Click + Hold** (250ms) — Select an element.
112
192
  - **Hover** — View relative distances to target.
113
193
  - **Option/Alt** — Hold to reveal the overlay.
114
194
  - **Space** — Freeze the current state.