@zkmake/three-meter 0.1.0

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.
@@ -0,0 +1,300 @@
1
+ .perf-monitor {
2
+ --perf-bg: #16181d;
3
+ --perf-fg: #e6e8eb;
4
+ --perf-muted: #8b909a;
5
+ --perf-row: rgba(255, 255, 255, 0.04);
6
+
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 10px;
10
+ padding: 8px;
11
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
12
+ font-size: 11px;
13
+ line-height: 1.4;
14
+ color: var(--perf-fg);
15
+ }
16
+
17
+ .perf-monitor__graphs {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 6px;
21
+ }
22
+
23
+ .perf-monitor__graph {
24
+ position: relative;
25
+ height: 40px;
26
+ background: var(--perf-row);
27
+ border-radius: 4px;
28
+ overflow: hidden;
29
+ }
30
+
31
+ .perf-monitor__canvas {
32
+ display: block;
33
+ width: 100%;
34
+ height: 100%;
35
+ }
36
+
37
+ .perf-monitor__graph-overlay {
38
+ position: absolute;
39
+ inset: 0;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: space-between;
43
+ padding: 0 8px;
44
+ pointer-events: none;
45
+ }
46
+
47
+ .perf-monitor__graph-head {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 6px;
51
+ cursor: pointer;
52
+ }
53
+
54
+ .perf-monitor__graph-overlay .perf-monitor__graph-head {
55
+ pointer-events: auto;
56
+ }
57
+
58
+ .perf-monitor__graph-label {
59
+ color: var(--perf-muted);
60
+ text-transform: uppercase;
61
+ letter-spacing: 0.06em;
62
+ font-size: 10px;
63
+ }
64
+
65
+ .perf-monitor__graph-value {
66
+ min-width: 6ch;
67
+ font-weight: 600;
68
+ font-variant-numeric: tabular-nums lining-nums;
69
+ text-align: right;
70
+ }
71
+
72
+ .perf-monitor__section {
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 2px;
76
+ }
77
+
78
+ .perf-monitor__row {
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 6px;
82
+ padding: 2px 6px;
83
+ border-radius: 3px;
84
+ cursor: pointer;
85
+ }
86
+
87
+ .perf-monitor__row:nth-child(even) {
88
+ background: var(--perf-row);
89
+ }
90
+
91
+ .perf-monitor__label {
92
+ flex: 1;
93
+ color: var(--perf-muted);
94
+ }
95
+
96
+ .perf-monitor__icon {
97
+ flex: none;
98
+ width: 12px;
99
+ height: 12px;
100
+ color: var(--perf-muted);
101
+ }
102
+
103
+ .perf-monitor__options {
104
+ padding-bottom: 8px;
105
+ border-bottom: 1px solid rgba(255, 255, 255, 0.12);
106
+ }
107
+
108
+ .perf-monitor__checkbox {
109
+ flex: none;
110
+ margin: 0;
111
+ width: 12px;
112
+ height: 12px;
113
+ accent-color: #60a5fa;
114
+ cursor: pointer;
115
+ }
116
+
117
+ .perf-monitor__value {
118
+ min-width: 7ch;
119
+ font-variant-numeric: tabular-nums lining-nums;
120
+ text-align: right;
121
+ }
122
+
123
+ .perf-monitor__hud {
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 6px;
127
+ padding: 2px;
128
+ }
129
+
130
+ .perf-monitor__hud-graphs {
131
+ display: flex;
132
+ flex-direction: column;
133
+ gap: 4px;
134
+ }
135
+
136
+ .perf-monitor__hud-graphs:empty {
137
+ display: none;
138
+ }
139
+
140
+ .perf-monitor__hud-graph {
141
+ position: relative;
142
+ height: 28px;
143
+ background: var(--perf-row);
144
+ border-radius: 4px;
145
+ overflow: hidden;
146
+ }
147
+
148
+ .perf-monitor__hud-grid {
149
+ display: grid;
150
+ grid-template-columns: auto 6ch auto 6ch;
151
+ align-items: baseline;
152
+ gap: 2px 8px;
153
+ }
154
+
155
+ .perf-monitor__hud-grid:empty {
156
+ display: none;
157
+ }
158
+
159
+ .perf-monitor__hud-item {
160
+ display: contents;
161
+ }
162
+
163
+ .perf-monitor__hud-label {
164
+ color: var(--perf-muted);
165
+ font-size: 10px;
166
+ }
167
+
168
+ .perf-monitor__hud-value {
169
+ font-weight: 600;
170
+ font-variant-numeric: tabular-nums lining-nums;
171
+ text-align: right;
172
+ }
173
+
174
+ .perf-monitor--full .perf-monitor__hud {
175
+ display: none;
176
+ }
177
+
178
+ .perf-monitor--compact .perf-monitor__graphs,
179
+ .perf-monitor--compact .perf-monitor__section {
180
+ display: none;
181
+ }
182
+
183
+ .perf-monitor--compact {
184
+ padding: 4px 8px;
185
+ }
186
+
187
+ .perf-hud {
188
+ position: fixed;
189
+ z-index: 9999;
190
+ /* Safari resolves width:100% canvases against the viewport on a fixed
191
+ host with auto width. Shrink-wrap so expand stays a card, not the window. */
192
+ width: max-content;
193
+ max-width: min(20rem, calc(100vw - 48px));
194
+ overflow: visible;
195
+ background: transparent;
196
+ pointer-events: none;
197
+ user-select: none;
198
+ touch-action: none;
199
+ }
200
+
201
+ .perf-hud--full > .perf-monitor {
202
+ width: 16rem;
203
+ max-width: 100%;
204
+ }
205
+
206
+ .perf-hud > .perf-monitor {
207
+ position: relative;
208
+ z-index: 1;
209
+ max-height: 70vh;
210
+ overflow: auto;
211
+ background: rgba(22, 24, 29, 0.85);
212
+ border-radius: 6px;
213
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
214
+ backdrop-filter: blur(2px);
215
+ pointer-events: auto;
216
+ transition: opacity 0.25s ease;
217
+ }
218
+
219
+ .perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {
220
+ opacity: 0.32;
221
+ }
222
+
223
+ .perf-hud__hotspot {
224
+ position: absolute;
225
+ z-index: 0;
226
+ inset: -20px;
227
+ pointer-events: auto;
228
+ }
229
+
230
+ .perf-hud:not([data-edge="right"]) .perf-hud__hotspot {
231
+ right: -46px;
232
+ }
233
+
234
+ .perf-hud[data-edge="right"] .perf-hud__hotspot {
235
+ left: -46px;
236
+ }
237
+
238
+ .perf-hud__tools {
239
+ position: absolute;
240
+ top: 0;
241
+ z-index: 2;
242
+ display: flex;
243
+ flex-direction: column;
244
+ gap: 4px;
245
+ opacity: 0;
246
+ pointer-events: none;
247
+ transition: opacity 0.15s ease;
248
+ }
249
+
250
+ .perf-hud.is-awake .perf-hud__tools,
251
+ .perf-hud.is-dragging .perf-hud__tools {
252
+ opacity: 1;
253
+ pointer-events: auto;
254
+ }
255
+
256
+ /* Inward side: right by default, left when docked to the right edge. */
257
+ .perf-hud:not([data-edge="right"]) .perf-hud__tools {
258
+ left: calc(100% + 6px);
259
+ }
260
+
261
+ .perf-hud[data-edge="right"] .perf-hud__tools {
262
+ right: calc(100% + 6px);
263
+ }
264
+
265
+ .perf-hud__disc {
266
+ display: flex;
267
+ align-items: center;
268
+ justify-content: center;
269
+ width: 20px;
270
+ height: 20px;
271
+ padding: 0;
272
+ border: 0;
273
+ border-radius: 999px;
274
+ background: rgba(22, 24, 29, 0.85);
275
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
276
+ color: #c5c8ce;
277
+ cursor: pointer;
278
+ backdrop-filter: blur(2px);
279
+ }
280
+
281
+ .perf-hud__icon {
282
+ width: 12px;
283
+ height: 12px;
284
+ }
285
+
286
+ .perf-hud__drag {
287
+ cursor: grab;
288
+ }
289
+
290
+ .perf-hud.is-dragging .perf-hud__drag {
291
+ cursor: grabbing;
292
+ }
293
+
294
+ .perf-hud__disc:hover,
295
+ .perf-hud__disc:focus-visible,
296
+ .perf-hud__disc[aria-pressed="true"] {
297
+ color: #e6e8eb;
298
+ outline: 1px solid rgba(96, 165, 250, 0.6);
299
+ outline-offset: 1px;
300
+ }
package/dist/ui.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { _ as ScreenEdge, a as PerformanceViewMode, c as HudDefaults, d as HudSettingsOptions, f as DefaultPlacement, g as Placement, h as DockPanelOptions, i as PerformanceView, l as HudSelection, m as DockHandle, n as PerfHudHandle, o as PerformanceViewOptions, p as DockAlign, r as mountPerfHud, s as DEFAULT_STORAGE_KEY, t as MountPerfHudOptions, u as HudSettings, v as dockPanel } from "./mount-perf-hud-Dw8KNQTt.js";
2
+ //#region src/ui/styles.d.ts
3
+ declare const PERF_HUD_STYLES = "\n.perf-monitor {\n --perf-bg: #16181d;\n --perf-fg: #e6e8eb;\n --perf-muted: #8b909a;\n --perf-row: rgba(255, 255, 255, 0.04);\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 8px;\n font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n font-size: 11px;\n line-height: 1.4;\n color: var(--perf-fg);\n}\n\n.perf-monitor__graphs {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.perf-monitor__graph {\n position: relative;\n height: 40px;\n background: var(--perf-row);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.perf-monitor__canvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.perf-monitor__graph-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 8px;\n pointer-events: none;\n}\n\n.perf-monitor__graph-head {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n\n.perf-monitor__graph-overlay .perf-monitor__graph-head {\n pointer-events: auto;\n}\n\n.perf-monitor__graph-label {\n color: var(--perf-muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n font-size: 10px;\n}\n\n.perf-monitor__graph-value {\n min-width: 6ch;\n font-weight: 600;\n font-variant-numeric: tabular-nums lining-nums;\n text-align: right;\n}\n\n.perf-monitor__section {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.perf-monitor__row {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 6px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.perf-monitor__row:nth-child(even) {\n background: var(--perf-row);\n}\n\n.perf-monitor__label {\n flex: 1;\n color: var(--perf-muted);\n}\n\n.perf-monitor__icon {\n flex: none;\n width: 12px;\n height: 12px;\n color: var(--perf-muted);\n}\n\n.perf-monitor__options {\n padding-bottom: 8px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.12);\n}\n\n.perf-monitor__checkbox {\n flex: none;\n margin: 0;\n width: 12px;\n height: 12px;\n accent-color: #60a5fa;\n cursor: pointer;\n}\n\n.perf-monitor__value {\n min-width: 7ch;\n font-variant-numeric: tabular-nums lining-nums;\n text-align: right;\n}\n\n.perf-monitor__hud {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 2px;\n}\n\n.perf-monitor__hud-graphs {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.perf-monitor__hud-graphs:empty {\n display: none;\n}\n\n.perf-monitor__hud-graph {\n position: relative;\n height: 28px;\n background: var(--perf-row);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.perf-monitor__hud-grid {\n display: grid;\n grid-template-columns: auto 6ch auto 6ch;\n align-items: baseline;\n gap: 2px 8px;\n}\n\n.perf-monitor__hud-grid:empty {\n display: none;\n}\n\n.perf-monitor__hud-item {\n display: contents;\n}\n\n.perf-monitor__hud-label {\n color: var(--perf-muted);\n font-size: 10px;\n}\n\n.perf-monitor__hud-value {\n font-weight: 600;\n font-variant-numeric: tabular-nums lining-nums;\n text-align: right;\n}\n\n.perf-monitor--full .perf-monitor__hud {\n display: none;\n}\n\n.perf-monitor--compact .perf-monitor__graphs,\n.perf-monitor--compact .perf-monitor__section {\n display: none;\n}\n\n.perf-monitor--compact {\n padding: 4px 8px;\n}\n\n.perf-hud {\n position: fixed;\n z-index: 9999;\n /* Safari resolves width:100% canvases against the viewport on a fixed\n host with auto width. Shrink-wrap so expand stays a card, not the window. */\n width: max-content;\n max-width: min(20rem, calc(100vw - 48px));\n overflow: visible;\n background: transparent;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n}\n\n.perf-hud--full > .perf-monitor {\n width: 16rem;\n max-width: 100%;\n}\n\n.perf-hud > .perf-monitor {\n position: relative;\n z-index: 1;\n max-height: 70vh;\n overflow: auto;\n background: rgba(22, 24, 29, 0.85);\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);\n backdrop-filter: blur(2px);\n pointer-events: auto;\n transition: opacity 0.25s ease;\n}\n\n.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {\n opacity: 0.32;\n}\n\n.perf-hud__hotspot {\n position: absolute;\n z-index: 0;\n inset: -20px;\n pointer-events: auto;\n}\n\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__hotspot {\n right: -46px;\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__hotspot {\n left: -46px;\n}\n\n.perf-hud__tools {\n position: absolute;\n top: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n gap: 4px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.15s ease;\n}\n\n.perf-hud.is-awake .perf-hud__tools,\n.perf-hud.is-dragging .perf-hud__tools {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* Inward side: right by default, left when docked to the right edge. */\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__tools {\n left: calc(100% + 6px);\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__tools {\n right: calc(100% + 6px);\n}\n\n.perf-hud__disc {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n border: 0;\n border-radius: 999px;\n background: rgba(22, 24, 29, 0.85);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);\n color: #c5c8ce;\n cursor: pointer;\n backdrop-filter: blur(2px);\n}\n\n.perf-hud__icon {\n width: 12px;\n height: 12px;\n}\n\n.perf-hud__drag {\n cursor: grab;\n}\n\n.perf-hud.is-dragging .perf-hud__drag {\n cursor: grabbing;\n}\n\n.perf-hud__disc:hover,\n.perf-hud__disc:focus-visible,\n.perf-hud__disc[aria-pressed=\"true\"] {\n color: #e6e8eb;\n outline: 1px solid rgba(96, 165, 250, 0.6);\n outline-offset: 1px;\n}\n";
4
+ /**
5
+ * Append the stylesheet to `target`'s head, once. Call before mounting a view
6
+ * by hand; {@link mountPerfHud} does it for you unless told not to.
7
+ */
8
+ declare const injectStyles: (target?: Document) => void;
9
+ //#endregion
10
+ export { DEFAULT_STORAGE_KEY, type DefaultPlacement, type DockAlign, type DockHandle, type DockPanelOptions, type HudDefaults, type HudSelection, HudSettings, type HudSettingsOptions, type MountPerfHudOptions, PERF_HUD_STYLES, type PerfHudHandle, PerformanceView, type PerformanceViewMode, type PerformanceViewOptions, type Placement, type ScreenEdge, dockPanel, injectStyles, mountPerfHud };
11
+ //# sourceMappingURL=ui.d.ts.map
package/dist/ui.js ADDED
@@ -0,0 +1,2 @@
1
+ import { a as dockPanel, i as PerformanceView, n as PERF_HUD_STYLES, o as DEFAULT_STORAGE_KEY, r as injectStyles, s as HudSettings, t as mountPerfHud } from "./mount-perf-hud-CduRNym5.js";
2
+ export { DEFAULT_STORAGE_KEY, HudSettings, PERF_HUD_STYLES, PerformanceView, dockPanel, injectStyles, mountPerfHud };
package/package.json ADDED
@@ -0,0 +1,104 @@
1
+ {
2
+ "name": "@zkmake/three-meter",
3
+ "version": "0.1.0",
4
+ "description": "Zero-dependency three.js frame metrics (FPS, CPU, GPU, draw calls) with a dockable HUD. Vanilla three and React Three Fiber adapters.",
5
+ "keywords": [
6
+ "devtools",
7
+ "fps",
8
+ "gpu",
9
+ "hud",
10
+ "performance",
11
+ "r3f",
12
+ "react-three-fiber",
13
+ "stats",
14
+ "three",
15
+ "threejs"
16
+ ],
17
+ "homepage": "https://github.com/zkmake/three-meter#readme",
18
+ "bugs": "https://github.com/zkmake/three-meter/issues",
19
+ "license": "MIT",
20
+ "author": "Zubin Khavarian",
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/zkmake/three-meter.git"
24
+ },
25
+ "files": [
26
+ "dist",
27
+ "README.md",
28
+ "LICENSE"
29
+ ],
30
+ "type": "module",
31
+ "sideEffects": false,
32
+ "exports": {
33
+ ".": {
34
+ "development": "./src/index.ts",
35
+ "default": "./dist/index.js"
36
+ },
37
+ "./react": {
38
+ "development": "./src/react/index.ts",
39
+ "default": "./dist/react.js"
40
+ },
41
+ "./ui": {
42
+ "development": "./src/ui/index.ts",
43
+ "default": "./dist/ui.js"
44
+ },
45
+ "./package.json": "./package.json",
46
+ "./styles.css": "./dist/styles.css"
47
+ },
48
+ "publishConfig": {
49
+ "exports": {
50
+ ".": "./dist/index.js",
51
+ "./react": "./dist/react.js",
52
+ "./ui": "./dist/ui.js",
53
+ "./package.json": "./package.json",
54
+ "./styles.css": "./dist/styles.css"
55
+ },
56
+ "access": "public"
57
+ },
58
+ "scripts": {
59
+ "build": "tsdown",
60
+ "changeset": "changeset",
61
+ "changeset:version": "changeset version",
62
+ "ci:format": "oxfmt --check .",
63
+ "ci:lint": "oxlint --deny-warnings .",
64
+ "ci:test": "vitest run",
65
+ "ci:typecheck": "tsc",
66
+ "format": "oxfmt --write .",
67
+ "lint": "oxlint .",
68
+ "pack:check": "npm pack --dry-run",
69
+ "release": "bun run build && changeset publish",
70
+ "test": "vitest watch",
71
+ "typecheck": "tsc"
72
+ },
73
+ "devDependencies": {
74
+ "@arethetypeswrong/core": "0.18.5",
75
+ "@changesets/changelog-github": "1.0.1",
76
+ "@changesets/cli": "3.0.3",
77
+ "@react-three/fiber": "9.7.0",
78
+ "@types/react": "19.3.0",
79
+ "@types/three": "0.186.0",
80
+ "oxfmt": "0.68.0",
81
+ "oxlint": "1.83.0",
82
+ "publint": "0.3.24",
83
+ "react": "19.3.0",
84
+ "three": "0.186.0",
85
+ "tsdown": "0.23.0",
86
+ "typescript": "7.0.2",
87
+ "vitest": "5.0.1"
88
+ },
89
+ "peerDependencies": {
90
+ "@react-three/fiber": ">=8",
91
+ "react": ">=18"
92
+ },
93
+ "peerDependenciesMeta": {
94
+ "@react-three/fiber": {
95
+ "optional": true
96
+ },
97
+ "react": {
98
+ "optional": true
99
+ }
100
+ },
101
+ "engines": {
102
+ "node": ">=20.19"
103
+ }
104
+ }