@weasel-js/hud 0.8.0 → 1.0.0

package/README.md

@@ -19,6 +19,18 @@ import { /* … */ } from '@weasel-js/hud';
 import { /* … */ } from '@weasel-js/hud/react';
 ```
 
+## Widgets
+
+`rect`, `text`, `image`, `label`, `button`, and `window` — a draggable,
+resizable frame whose interior is painted by an opt-in `content` callback. See
+[`src/widgets/window`](src/widgets/window/README.md) for how content composes
+with the frame, and `createLoupe` in [`src/loupe`](src/loupe) for the first
+consumer.
+
+Widgets draw from a data-free context (`{ dims, defaultFont, tokens }`), which
+is what lets a HUD render headlessly and identically. A window's `content`
+painter is the single, explicit exception.
+
 ## License
 
 MIT

package/dist/attach.d.ts

@@ -1,4 +1,10 @@
 import type { Hud } from './hud';
 import type { CanvasExtensionApi } from '@weasel-js/core';
-export declare function attachHud(api: CanvasExtensionApi, hud: Hud): () => void;
+import { type ResolvedTheme } from '@weasel-js/theme';
+export interface AttachHudOptions {
+    /** Resolved theme the widgets draw with. Defaults to the built-in theme's
+     *  default mode; pass `useTheme().resolved` to follow a live theme. */
+    readonly theme?: ResolvedTheme;
+}
+export declare function attachHud(api: CanvasExtensionApi, hud: Hud, options?: AttachHudOptions): () => void;
 //# sourceMappingURL=attach.d.ts.map

package/dist/attach.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attach.d.ts","sourceRoot":"","sources":["../src/attach.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,kBAAkB,EAAwC,MAAM,iBAAiB,CAAC;AAShG,wBAAgB,SAAS,CAAC,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,IAAI,CAyFvE"}
+{"version":3,"file":"attach.d.ts","sourceRoot":"","sources":["../src/attach.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,kBAAkB,EAA+B,MAAM,iBAAiB,CAAC;AAOvF,OAAO,EAA6B,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjF,MAAM,WAAW,gBAAgB;IAC/B;2EACuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,wBAAgB,SAAS,CACvB,GAAG,EAAE,kBAAkB,EACvB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,IAAI,CAuHZ"}

package/dist/hud.d.ts

@@ -5,6 +5,7 @@ import { type TextOptions, type TextWidget } from './widgets/text';
 import { type ImageOptions, type ImageWidget } from './widgets/image';
 import { type LabelOptions, type LabelWidget } from './widgets/label';
 import { type ButtonOptions, type ButtonWidget } from './widgets/button';
+import { type WindowOptions, type WindowWidget } from './widgets/window/window';
 export interface Hud {
     add(widget: Widget): void;
     remove(widget: Widget): void;
@@ -24,6 +25,8 @@ export interface Hud {
     label(opts: LabelOptions): LabelWidget;
     /** Create a button widget, add it to the HUD, and wire onChange → markDirty. */
     button(opts: ButtonOptions): ButtonWidget;
+    /** Create a window widget, add it to the HUD, and wire onChange → markDirty. */
+    window(opts: WindowOptions): WindowWidget;
 }
 export declare function createHud(): Hud;
 //# sourceMappingURL=hud.d.ts.map

package/dist/hud.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hud.d.ts","sourceRoot":"","sources":["../src/hud.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAgB,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEvF,MAAM,WAAW,GAAG;IAClB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,IAAI,SAAS,MAAM,EAAE,CAAC;IAC7B,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,MAAM,IAAI,IAAI,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,8EAA8E;IAC9E,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAC;IACpC,8EAA8E;IAC9E,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAC;IACpC,gFAAgF;IAChF,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAC;IACvC,+EAA+E;IAC/E,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAC;IACvC,gFAAgF;IAChF,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,CAAC;CAC3C;AAED,wBAAgB,SAAS,IAAI,GAAG,CAkG/B"}
+{"version":3,"file":"hud.d.ts","sourceRoot":"","sources":["../src/hud.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAgB,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACvF,OAAO,EAAgB,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE9F,MAAM,WAAW,GAAG;IAClB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,IAAI,SAAS,MAAM,EAAE,CAAC;IAC7B,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,MAAM,IAAI,IAAI,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,8EAA8E;IAC9E,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAC;IACpC,8EAA8E;IAC9E,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAC;IACpC,gFAAgF;IAChF,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAC;IACvC,+EAA+E;IAC/E,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAC;IACvC,gFAAgF;IAChF,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,CAAC;IAC1C,gFAAgF;IAChF,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,CAAC;CAC3C;AAED,wBAAgB,SAAS,IAAI,GAAG,CA0G/B"}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { createHud, type Hud } from './hud';
 export { attachHud } from './attach';
-export { createHudTool, HUD_AFFORDANCE_KIND, type HudHitPayload } from './tool';
-export type { Widget, WidgetBounds, HudDrawCtx, HudPointerEvent, PointerClaim, } from './widget';
+export { createHudContribution, HUD_AFFORDANCE_KIND, type HudHitPayload } from './tool';
+export type { Widget, WidgetBounds, HudDrawCtx, HudPointerEvent, } from './widget';
+export { DEFAULT_WIDGET_CLAIMS, claimsOf } from './widget';
 export type { HudHost } from './host';
 export { DEFAULT_FONT_FAMILY, registerDefaultFont } from './fonts/registerDefaultFont';
 export type { RectOptions, RectWidget } from './widgets/rect';
@@ -9,5 +10,10 @@ export type { TextOptions, TextWidget } from './widgets/text';
 export type { ImageOptions, ImageWidget } from './widgets/image';
 export type { LabelOptions, LabelWidget } from './widgets/label';
 export type { ButtonOptions, ButtonWidget, ButtonEvent, ButtonHandler } from './widgets/button';
-export { readTokens, type ResolvedTokens } from './theme';
+export type { WindowOptions, WindowWidget } from './widgets/window/window';
+export { DEFAULT_WINDOW_METRICS, cursorForZone, type WindowZone, type WindowMetrics, } from './widgets/window/zones';
+export type { HudContentCtx } from './widget';
+export { createLoupe, type LoupeOptions, type LoupeHandle, type LoupeMode } from './loupe/createLoupe';
+export { loupeInnerView } from './loupe/innerView';
+export type { ResolvedTheme } from '@weasel-js/theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAChF,YAAY,EACV,MAAM,EACN,YAAY,EACZ,UAAU,EACV,eAAe,EACf,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AACxF,YAAY,EACV,MAAM,EACN,YAAY,EACZ,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EACL,sBAAsB,EAAE,aAAa,EACrC,KAAK,UAAU,EAAE,KAAK,aAAa,GACpC,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,2 +1,142 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./tool-D2HHqsdo.js";
-export { e as DEFAULT_FONT_FAMILY, o as HUD_AFFORDANCE_KIND, i as attachHud, a as createHud, n as createHudTool, t as readTokens, r as registerDefaultFont };
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./tool-Cvy1MwFJ.js";
+import { createViewportLayer as u, screenToWorld as d, viewToTransform as f } from "@weasel-js/core";
+//#region src/loupe/innerView.ts
+function p(e, t, n, r) {
+	let i = {
+		x: t.scale.x * r,
+		y: t.scale.y * r
+	};
+	return {
+		x: e.x - n.w / 2 / i.x,
+		y: e.y - n.h / 2 / i.y,
+		scale: i
+	};
+}
+//#endregion
+//#region src/loupe/readback.ts
+function m(e, t, n, r, i, a) {
+	let o = Math.round(n.x * r), s = Math.round(n.y * r), c = h(o - Math.floor(i / 2), 0, Math.max(0, t.width - i)), l = h(s - Math.floor(a / 2), 0, Math.max(0, t.height - a)), u = t.height - l - a, d = new Uint8Array(i * a * 4);
+	e.readPixels(c, u, i, a, e.RGBA, e.UNSIGNED_BYTE, d);
+	let f = new Uint8ClampedArray(i * a * 4), p = i * 4;
+	for (let e = 0; e < a; e++) {
+		let t = (a - 1 - e) * p;
+		f.set(d.subarray(t, t + p), e * p);
+	}
+	return new ImageData(f, i, a);
+}
+function h(e, t, n) {
+	return e < t ? t : e > n ? n : e;
+}
+//#endregion
+//#region src/loupe/createLoupe.ts
+function g(e) {
+	let { hud: t, element: n, source: r, requestRedraw: i } = e, a = e.mode ?? "vector", o = e.factor ?? 8, s = {
+		x: 0,
+		y: 0
+	}, c = null, l = null, h = !1, g = e.bounds ?? {
+		x: 24,
+		y: 24,
+		w: 220,
+		h: 200
+	}, _ = (e) => a === "vector" ? v(e) : y(e), v = (t) => {
+		let n = d(s.x, s.y, f(t.view)), i = p({
+			x: n[0],
+			y: n[1]
+		}, t.view, t.rect, o);
+		return u({
+			id: `${S.id}:lens`,
+			label: "Loupe content",
+			source: r,
+			view: i,
+			bounds: () => t.rect,
+			background: e.background ?? t.tokens["--wzl-surface"]
+		}).draw(t.data, t.view, t.dims);
+	}, y = (e) => l ? [{
+		kind: "image",
+		image: l,
+		x: e.rect.x,
+		y: e.rect.y,
+		w: e.rect.w,
+		h: e.rect.h,
+		sampling: "nearest"
+	}] : [], b = () => {
+		if (a !== "pixel" || h) return;
+		let e = n.getContext("webgl2");
+		if (!e) return;
+		let t = n.getBoundingClientRect();
+		if (t.width === 0) return;
+		let r = n.width / t.width, c = S.contentRect, u = Math.max(1, Math.round(c.w * r / o)), d = Math.max(1, Math.round(c.h * r / o)), f = m(e, {
+			width: n.width,
+			height: n.height
+		}, s, r, u, d);
+		h = !0, createImageBitmap(f).then((e) => {
+			l?.close(), l = e, h = !1, i();
+		}).catch(() => {
+			h = !1;
+		});
+	}, x = () => {
+		let t = n.getContext("webgl2");
+		if (!t) return;
+		let r = n.getBoundingClientRect();
+		if (r.width === 0) return;
+		let i = n.width / r.width, a = m(t, {
+			width: n.width,
+			height: n.height
+		}, s, i, 1, 1), o = "#" + [
+			a.data[0],
+			a.data[1],
+			a.data[2]
+		].map((e) => e.toString(16).padStart(2, "0")).join("");
+		o !== c && (c = o, e.onColorChange?.(o));
+	}, S = t.window({
+		id: "weasel-loupe",
+		x: g.x,
+		y: g.y,
+		w: g.w,
+		h: g.h,
+		title: e.title ?? "Loupe",
+		titlebar: e.titlebar,
+		content: _,
+		onResize: () => {
+			b();
+		},
+		...e.onClose ? { onClose: e.onClose } : {}
+	}), C = (e) => {
+		let t = n.getBoundingClientRect();
+		w({
+			x: e.clientX - t.left,
+			y: e.clientY - t.top
+		});
+	}, w = (e) => {
+		S.hidden || S.hitTest(e.x, e.y) || (s = e, x(), a === "pixel" && b(), i());
+	};
+	return n.addEventListener("pointermove", C), {
+		window: S,
+		get mode() {
+			return a;
+		},
+		get factor() {
+			return o;
+		},
+		get aim() {
+			return s;
+		},
+		get color() {
+			return c;
+		},
+		setMode(e) {
+			e !== a && (a = e, a === "pixel" && b(), i());
+		},
+		setFactor(e) {
+			o = e, a === "pixel" && b(), i();
+		},
+		aimAt: w,
+		dispose() {
+			n.removeEventListener("pointermove", C), l?.close(), l = null, S.dispose();
+		}
+	};
+}
+//#endregion
+export { a as DEFAULT_FONT_FAMILY, n as DEFAULT_WIDGET_CLAIMS, r as DEFAULT_WINDOW_METRICS, c as HUD_AFFORDANCE_KIND, o as attachHud, e as claimsOf, t as createHud, i as createHudContribution, g as createLoupe, l as cursorForZone, p as loupeInnerView, s as registerDefaultFont };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/loupe/innerView.ts","../src/loupe/readback.ts","../src/loupe/createLoupe.ts"],"sourcesContent":["import type { View } from '@weasel-js/core';\nimport type { WidgetBounds } from '../widget';\n\n/**\n * The inner `View` a loupe renders its content through: the outer view's\n * magnification times `factor`, positioned so `target` sits at the center of\n * a viewport the size of `rect`.\n */\nexport function loupeInnerView(\n  target: { x: number; y: number },\n  outer: View,\n  rect: WidgetBounds,\n  factor: number,\n): View {\n  const scale = { x: outer.scale.x * factor, y: outer.scale.y * factor };\n  return {\n    x: target.x - rect.w / 2 / scale.x,\n    y: target.y - rect.h / 2 / scale.y,\n    scale,\n  };\n}\n","/**\n * Read a `rw × rh` device-pixel region of the drawing buffer centered on\n * `pointer` (CSS px relative to the canvas), returned top-down.\n *\n * GL reports rows bottom-up; every consumer here wants top-down, so both the\n * read origin and the returned rows are flipped.\n */\nexport function readbackRegion(\n  gl: WebGL2RenderingContext,\n  buffer: { width: number; height: number },\n  pointer: { x: number; y: number },\n  dpr: number,\n  rw: number,\n  rh: number,\n): ImageData {\n  const cx = Math.round(pointer.x * dpr);\n  const cy = Math.round(pointer.y * dpr);\n  const gx = clamp(cx - Math.floor(rw / 2), 0, Math.max(0, buffer.width - rw));\n  const gyTop = clamp(cy - Math.floor(rh / 2), 0, Math.max(0, buffer.height - rh));\n  const gy = buffer.height - gyTop - rh;\n\n  const raw = new Uint8Array(rw * rh * 4);\n  gl.readPixels(gx, gy, rw, rh, gl.RGBA, gl.UNSIGNED_BYTE, raw);\n\n  const flipped = new Uint8ClampedArray(rw * rh * 4);\n  const stride = rw * 4;\n  for (let row = 0; row < rh; row++) {\n    const src = (rh - 1 - row) * stride;\n    flipped.set(raw.subarray(src, src + stride), row * stride);\n  }\n  return new ImageData(flipped, rw, rh);\n}\n\nfunction clamp(v: number, lo: number, hi: number): number {\n  return v < lo ? lo : v > hi ? hi : v;\n}\n","import {\n  createViewportLayer, screenToWorld, viewToTransform,\n  type RenderLayer, type View,\n} from '@weasel-js/core';\nimport type { DrawCommand } from '@weasel-js/core/renderer';\nimport type { Hud } from '../hud';\nimport type { WindowWidget } from '../widgets/window/window';\nimport type { HudContentCtx, WidgetBounds } from '../widget';\nimport { loupeInnerView } from './innerView';\nimport { readbackRegion } from './readback';\n\nexport type LoupeMode = 'vector' | 'pixel';\n\nexport interface LoupeOptions {\n  hud: Hud;\n  /** The live canvas. Supplies the GL context for pixel mode and the pointer\n   *  feed for aiming. */\n  element: HTMLCanvasElement;\n  /** Layers re-rendered through the magnified inner view in vector mode. */\n  source: RenderLayer<unknown>[];\n  requestRedraw: () => void;\n  mode?: LoupeMode;\n  factor?: number;\n  bounds?: WidgetBounds;\n  title?: string;\n  /** Draw the window's titlebar and close box. Default `true`. Pass `false`\n   *  for a bare lens; the interior then doubles as the move handle. */\n  titlebar?: boolean;\n  /** Called with the hex color under the aim point whenever it changes.\n   *  Sampled from the framebuffer in both modes — vector content is a\n   *  re-render whose edge colors differ from the screen's, so reading the\n   *  color off it would report something the user cannot see. */\n  onColorChange?: (hex: string) => void;\n  /** Fired by the window's close box. The window does not hide itself —\n   *  whoever owns the loupe's visibility decides what closing means. */\n  onClose?: () => void;\n  /** Opaque backdrop behind vector content, so the outer canvas does not\n   *  show through where the inner view is empty. */\n  background?: string;\n}\n\nexport interface LoupeHandle {\n  readonly window: WindowWidget;\n  readonly mode: LoupeMode;\n  readonly factor: number;\n  /** Last aimed point, in screen-space CSS px relative to the canvas. */\n  readonly aim: { x: number; y: number };\n  /** Hex color under the aim point, read off the framebuffer. `null` before\n   *  the first aim, or when the GL context is unavailable. */\n  readonly color: string | null;\n  setMode(mode: LoupeMode): void;\n  setFactor(factor: number): void;\n  /** Aim at a screen point. Ignored while the point is over the window —\n   *  that is the freeze rule that makes the borders reachable. */\n  aimAt(p: { x: number; y: number }): void;\n  dispose(): void;\n}\n\nexport function createLoupe(opts: LoupeOptions): LoupeHandle {\n  const { hud, element, source, requestRedraw } = opts;\n  let mode: LoupeMode = opts.mode ?? 'vector';\n  let factor = opts.factor ?? 8;\n  let aim = { x: 0, y: 0 };\n  let color: string | null = null;\n  let pixels: ImageBitmap | null = null;\n  let pixelsPending = false;\n\n  const b = opts.bounds ?? { x: 24, y: 24, w: 220, h: 200 };\n\n  const content = (ctx: HudContentCtx): DrawCommand[] =>\n    mode === 'vector' ? drawVector(ctx) : drawPixels(ctx);\n\n  const drawVector = (ctx: HudContentCtx): DrawCommand[] => {\n    const world = screenToWorld(aim.x, aim.y, viewToTransform(ctx.view));\n    const inner: View = loupeInnerView(\n      { x: world[0], y: world[1] }, ctx.view, ctx.rect, factor,\n    );\n    // A fresh lens per frame: CreateViewportLayerOpts.view is static, and the\n    // inner view moves with the pointer.\n    const lens = createViewportLayer<unknown>({\n      id: `${win.id}:lens`,\n      label: 'Loupe content',\n      source,\n      view: inner,\n      bounds: () => ctx.rect,\n      background: opts.background ?? ctx.tokens['--wzl-surface'],\n    });\n    return lens.draw(ctx.data, ctx.view, ctx.dims);\n  };\n\n  const drawPixels = (ctx: HudContentCtx): DrawCommand[] => {\n    if (!pixels) return [];\n    return [{\n      kind: 'image',\n      image: pixels,\n      x: ctx.rect.x, y: ctx.rect.y, w: ctx.rect.w, h: ctx.rect.h,\n      sampling: 'nearest',\n    }];\n  };\n\n  const refreshPixels = () => {\n    if (mode !== 'pixel' || pixelsPending) return;\n    const gl = element.getContext('webgl2');\n    if (!gl) return;\n    const cssRect = element.getBoundingClientRect();\n    if (cssRect.width === 0) return;\n    const dpr = element.width / cssRect.width;\n    const rect = win.contentRect;\n    const rw = Math.max(1, Math.round((rect.w * dpr) / factor));\n    const rh = Math.max(1, Math.round((rect.h * dpr) / factor));\n    const data = readbackRegion(\n      gl, { width: element.width, height: element.height }, aim, dpr, rw, rh,\n    );\n    pixelsPending = true;\n    createImageBitmap(data)\n      .then((bmp) => {\n        pixels?.close();\n        pixels = bmp;\n        pixelsPending = false;\n        requestRedraw();\n      })\n      .catch(() => { pixelsPending = false; });\n  };\n\n  const sampleColor = () => {\n    const gl = element.getContext('webgl2');\n    if (!gl) return;\n    const cssRect = element.getBoundingClientRect();\n    if (cssRect.width === 0) return;\n    const dpr = element.width / cssRect.width;\n    const px = readbackRegion(\n      gl, { width: element.width, height: element.height }, aim, dpr, 1, 1,\n    );\n    const hex = '#' + [px.data[0], px.data[1], px.data[2]]\n      .map((c) => c.toString(16).padStart(2, '0')).join('');\n    if (hex !== color) {\n      color = hex;\n      opts.onColorChange?.(hex);\n    }\n  };\n\n  const win = hud.window({\n    id: 'weasel-loupe',\n    x: b.x, y: b.y, w: b.w, h: b.h,\n    title: opts.title ?? 'Loupe',\n    titlebar: opts.titlebar,\n    content,\n    onResize: () => { refreshPixels(); },\n    ...(opts.onClose ? { onClose: opts.onClose } : {}),\n  });\n\n  const onPointerMove = (evt: PointerEvent) => {\n    const r = element.getBoundingClientRect();\n    handleAim({ x: evt.clientX - r.left, y: evt.clientY - r.top });\n  };\n\n  const handleAim = (p: { x: number; y: number }) => {\n    if (win.hidden) return;\n    if (win.hitTest(p.x, p.y)) return;   // freeze rule\n    aim = p;\n    sampleColor();\n    if (mode === 'pixel') refreshPixels();\n    requestRedraw();\n  };\n\n  element.addEventListener('pointermove', onPointerMove);\n\n  return {\n    window: win,\n    get mode() { return mode; },\n    get factor() { return factor; },\n    get aim() { return aim; },\n    get color() { return color; },\n    setMode(next) {\n      if (next === mode) return;\n      mode = next;\n      if (mode === 'pixel') refreshPixels();\n      requestRedraw();\n    },\n    setFactor(next) {\n      factor = next;\n      if (mode === 'pixel') refreshPixels();\n      requestRedraw();\n    },\n    aimAt: handleAim,\n    dispose() {\n      element.removeEventListener('pointermove', onPointerMove);\n      pixels?.close();\n      pixels = null;\n      win.dispose();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/loupe/createLoupe.d.ts

@@ -0,0 +1,56 @@
+import { type RenderLayer } from '@weasel-js/core';
+import type { Hud } from '../hud';
+import type { WindowWidget } from '../widgets/window/window';
+import type { WidgetBounds } from '../widget';
+export type LoupeMode = 'vector' | 'pixel';
+export interface LoupeOptions {
+    hud: Hud;
+    /** The live canvas. Supplies the GL context for pixel mode and the pointer
+     *  feed for aiming. */
+    element: HTMLCanvasElement;
+    /** Layers re-rendered through the magnified inner view in vector mode. */
+    source: RenderLayer<unknown>[];
+    requestRedraw: () => void;
+    mode?: LoupeMode;
+    factor?: number;
+    bounds?: WidgetBounds;
+    title?: string;
+    /** Draw the window's titlebar and close box. Default `true`. Pass `false`
+     *  for a bare lens; the interior then doubles as the move handle. */
+    titlebar?: boolean;
+    /** Called with the hex color under the aim point whenever it changes.
+     *  Sampled from the framebuffer in both modes — vector content is a
+     *  re-render whose edge colors differ from the screen's, so reading the
+     *  color off it would report something the user cannot see. */
+    onColorChange?: (hex: string) => void;
+    /** Fired by the window's close box. The window does not hide itself —
+     *  whoever owns the loupe's visibility decides what closing means. */
+    onClose?: () => void;
+    /** Opaque backdrop behind vector content, so the outer canvas does not
+     *  show through where the inner view is empty. */
+    background?: string;
+}
+export interface LoupeHandle {
+    readonly window: WindowWidget;
+    readonly mode: LoupeMode;
+    readonly factor: number;
+    /** Last aimed point, in screen-space CSS px relative to the canvas. */
+    readonly aim: {
+        x: number;
+        y: number;
+    };
+    /** Hex color under the aim point, read off the framebuffer. `null` before
+     *  the first aim, or when the GL context is unavailable. */
+    readonly color: string | null;
+    setMode(mode: LoupeMode): void;
+    setFactor(factor: number): void;
+    /** Aim at a screen point. Ignored while the point is over the window —
+     *  that is the freeze rule that makes the borders reachable. */
+    aimAt(p: {
+        x: number;
+        y: number;
+    }): void;
+    dispose(): void;
+}
+export declare function createLoupe(opts: LoupeOptions): LoupeHandle;
+//# sourceMappingURL=createLoupe.d.ts.map

package/dist/loupe/createLoupe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLoupe.d.ts","sourceRoot":"","sources":["../../src/loupe/createLoupe.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,WAAW,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,GAAG,CAAC;IACT;2BACuB;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,0EAA0E;IAC1E,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAC/B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;yEACqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;mEAG+D;IAC/D,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;0EACsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;sDACkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC;gEAC4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC;oEACgE;IAChE,KAAK,CAAC,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CAsI3D"}

package/dist/loupe/innerView.d.ts

@@ -0,0 +1,12 @@
+import type { View } from '@weasel-js/core';
+import type { WidgetBounds } from '../widget';
+/**
+ * The inner `View` a loupe renders its content through: the outer view's
+ * magnification times `factor`, positioned so `target` sits at the center of
+ * a viewport the size of `rect`.
+ */
+export declare function loupeInnerView(target: {
+    x: number;
+    y: number;
+}, outer: View, rect: WidgetBounds, factor: number): View;
+//# sourceMappingURL=innerView.d.ts.map

package/dist/loupe/innerView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"innerView.d.ts","sourceRoot":"","sources":["../../src/loupe/innerView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,MAAM,GACb,IAAI,CAON"}

package/dist/loupe/readback.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Read a `rw × rh` device-pixel region of the drawing buffer centered on
+ * `pointer` (CSS px relative to the canvas), returned top-down.
+ *
+ * GL reports rows bottom-up; every consumer here wants top-down, so both the
+ * read origin and the returned rows are flipped.
+ */
+export declare function readbackRegion(gl: WebGL2RenderingContext, buffer: {
+    width: number;
+    height: number;
+}, pointer: {
+    x: number;
+    y: number;
+}, dpr: number, rw: number, rh: number): ImageData;
+//# sourceMappingURL=readback.d.ts.map

package/dist/loupe/readback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readback.d.ts","sourceRoot":"","sources":["../../src/loupe/readback.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,EAAE,EAAE,sBAAsB,EAC1B,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EACzC,OAAO,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACjC,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,SAAS,CAiBX"}

package/dist/react/index.d.ts

@@ -1,2 +1,2 @@
-export { useHud, useHudTool } from './useHud';
+export { useHud, useHudContribution } from './useHud';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}

package/dist/react/index.js

@@ -1,17 +1,21 @@
-import { n as e, r as t, s as n } from "../tool-D2HHqsdo.js";
-import { useEffect as r, useMemo as i, useState as a } from "react";
+import { c as e, n as t, r as n } from "../tool-Cvy1MwFJ.js";
+import { resolveTheme as r, weaselTheme as i } from "@weasel-js/theme";
+import { useEffect as a, useMemo as o, useState as s } from "react";
+import { useThemeOptional as c } from "@weasel-js/theme/react";
 //#region src/react/useHud.ts
-function o(e) {
-	let [i] = a(() => n());
-	return r(() => {
-		let n = e.current;
-		if (n) return t(n, i);
-	}, [i]), i;
+function l(t) {
+	let [l] = s(() => e()), u = c(), d = o(() => u?.resolved ?? r(i, i.defaultMode), [u]);
+	return a(() => {
+		let e = t.current;
+		if (!e) return;
+		let r = n(e, l, { theme: d });
+		return e.requestRedraw(), r;
+	}, [l, d]), l;
 }
-function s() {
-	return i(() => e(), []);
+function u() {
+	return o(() => t(), []);
 }
 //#endregion
-export { o as useHud, s as useHudTool };
+export { l as useHud, u as useHudContribution };
 
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/react/useHud.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { createHud, type Hud } from '../hud';\nimport { attachHud } from '../attach';\nimport type { CanvasExtensionApi, Tool } from '@weasel-js/core';\nimport { createHudTool } from '../tool';\n\n/**\n * Create a HUD and attach it to a Canvas via its imperative ref handle.\n * Returns the Hud immediately (unbound); attaches in an effect after the\n * canvas ref populates. Cleans up on unmount.\n *\n * Usage:\n *   const ref = useRef<CanvasExtensionApi>(null);\n *   const hud = useHud(ref);\n *   // ... later\n *   const btn = hud.button({ ... });\n */\nexport function useHud(canvasRef: { current: CanvasExtensionApi | null }): Hud {\n  const [hud] = useState(() => createHud());\n\n  useEffect(() => {\n    const api = canvasRef.current;\n    if (!api) return;\n    const detach = attachHud(api, hud);\n    return detach;\n    // canvasRef.current changing during component lifetime is unusual for\n    // canvas refs; treat as effectively-stable in v1. The dep on `hud` is\n    // also stable (it comes from useState's initializer, never changes).\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hud]);\n\n  return hud;\n}\n\n/**\n * Memoize the HUD's input tool. Pass the result to the canvas as an ambient\n * tool — see {@link createHudTool} for why ambient and how the routing works.\n *\n * The tool is stateless (its actions resolve the hit widget from the gesture's\n * affordance payload), so one instance serves any number of HUDs on the page.\n */\nexport function useHudTool(): Tool<null> {\n  return useMemo(() => createHudTool(), []);\n}\n"],"mappings":";;;AAiBA,SAAgB,EAAO,GAAwD;CAC7E,IAAM,CAAC,KAAO,QAAe,GAAW,CAAC;AAazC,QAXA,QAAgB;EACd,IAAM,IAAM,EAAU;AACjB,QAEL,QADe,EAAU,GAAK,EACvB;IAKN,CAAC,EAAI,CAAC,EAEF;;AAUT,SAAgB,IAAyB;AACvC,QAAO,QAAc,GAAe,EAAE,EAAE,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/react/useHud.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { useThemeOptional } from '@weasel-js/theme/react';\nimport { resolveTheme, weaselTheme } from '@weasel-js/theme';\nimport { createHud, type Hud } from '../hud';\nimport { attachHud } from '../attach';\nimport type { CanvasExtensionApi, Contribution } from '@weasel-js/core';\nimport { createHudContribution } from '../tool';\n\n/**\n * Create a HUD and attach it to a Canvas via its imperative ref handle.\n * Returns the Hud immediately (unbound); attaches in an effect after the\n * canvas ref populates. Cleans up on unmount.\n *\n * Usage:\n *   const ref = useRef<CanvasExtensionApi>(null);\n *   const hud = useHud(ref);\n *   // ... later\n *   const btn = hud.button({ ... });\n */\nexport function useHud(canvasRef: { current: CanvasExtensionApi | null }): Hud {\n  const [hud] = useState(() => createHud());\n\n  // Follow the app's theme when there is one. Widgets are drawn into the\n  // canvas, so they can't inherit the cascade — handing them the resolved\n  // record is what keeps HUD chrome in step with a mode switch.\n  const provided = useThemeOptional();\n  const theme = useMemo(\n    () => provided?.resolved ?? resolveTheme(weaselTheme, weaselTheme.defaultMode),\n    [provided],\n  );\n\n  useEffect(() => {\n    const api = canvasRef.current;\n    if (!api) return;\n    const detach = attachHud(api, hud, { theme });\n    api.requestRedraw();\n    return detach;\n    // canvasRef.current changing during component lifetime is unusual for\n    // canvas refs; treat as effectively-stable in v1. The dep on `hud` is\n    // also stable (it comes from useState's initializer, never changes).\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hud, theme]);\n\n  return hud;\n}\n\n/**\n * Memoize the HUD's input contribution — see {@link createHudContribution}\n * for how the routing works.\n *\n * It is stateless (its actions resolve the hit widget from the gesture's\n * affordance payload), so one instance serves any number of HUDs on the page.\n */\nexport function useHudContribution(): Contribution {\n  return useMemo(() => createHudContribution(), []);\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAO,GAAwD;CAC7E,IAAM,CAAC,KAAO,QAAe,GAAW,CAAC,EAKnC,IAAW,GAAkB,EAC7B,IAAQ,QACN,GAAU,YAAY,EAAa,GAAa,EAAY,YAAY,EAC9E,CAAC,EAAS,CACX;AAcD,QAZA,QAAgB;EACd,IAAM,IAAM,EAAU;AACtB,MAAI,CAAC,EAAK;EACV,IAAM,IAAS,EAAU,GAAK,GAAK,EAAE,UAAO,CAAC;AAE7C,SADA,EAAI,eAAe,EACZ;IAKN,CAAC,GAAK,EAAM,CAAC,EAET;;AAUT,SAAgB,IAAmC;AACjD,QAAO,QAAc,GAAuB,EAAE,EAAE,CAAC"}

package/dist/react/useHud.d.ts

@@ -1,5 +1,5 @@
 import { type Hud } from '../hud';
-import type { CanvasExtensionApi, Tool } from '@weasel-js/core';
+import type { CanvasExtensionApi, Contribution } from '@weasel-js/core';
 /**
  * Create a HUD and attach it to a Canvas via its imperative ref handle.
  * Returns the Hud immediately (unbound); attaches in an effect after the
@@ -15,11 +15,11 @@ export declare function useHud(canvasRef: {
     current: CanvasExtensionApi | null;
 }): Hud;
 /**
- * Memoize the HUD's input tool. Pass the result to the canvas as an ambient
- * tool — see {@link createHudTool} for why ambient and how the routing works.
+ * Memoize the HUD's input contribution — see {@link createHudContribution}
+ * for how the routing works.
  *
- * The tool is stateless (its actions resolve the hit widget from the gesture's
+ * It is stateless (its actions resolve the hit widget from the gesture's
  * affordance payload), so one instance serves any number of HUDs on the page.
  */
-export declare function useHudTool(): Tool<null>;
+export declare function useHudContribution(): Contribution;
 //# sourceMappingURL=useHud.d.ts.map

package/dist/react/useHud.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHud.d.ts","sourceRoot":"","sources":["../../src/react/useHud.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGhE;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,SAAS,EAAE;IAAE,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAAE,GAAG,GAAG,CAe7E;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,CAEvC"}
+{"version":3,"file":"useHud.d.ts","sourceRoot":"","sources":["../../src/react/useHud.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGxE;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,SAAS,EAAE;IAAE,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAAE,GAAG,GAAG,CAyB7E;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,CAEjD"}