@weasel-js/hud 1.4.3 → 1.5.0

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,EAA+B,MAAM,iBAAiB,CAAC;AAIvF,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAA6B,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjF,MAAM,WAAW,gBAAgB;IAC/B;2EACuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,kBAAkB,EACvB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,IAAI,CAwIZ"}
+{"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;AAIvF,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAA6B,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjF,MAAM,WAAW,gBAAgB;IAC/B;2EACuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,kBAAkB,EACvB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,IAAI,CAyIZ"}

package/dist/index.js

@@ -1,167 +1,203 @@
-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-ahNtvOfu.js";
+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-QNtLieKj.js";
 import { createViewportLayer as u, screenToWorld as d, viewToTransform as f } from "@weasel-js/core";
 import { createLoupeModel as p, loupeInnerView as m, loupeInnerView as h } from "@weasel-js/loupe";
 //#region src/loupe/readback.ts
-function g(e, t, n, r, i, a) {
-	let o = Math.round(n.x * r), s = Math.round(n.y * r), c = _(o - Math.floor(i / 2), 0, Math.max(0, t.width - i)), l = _(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;
+function g(e, t, n, r, i, a, o) {
+	let s = n.x + Math.round(r.x * i), c = n.y + Math.round(r.y * i), l = _(s - Math.floor(a / 2), n.x, n.x + Math.max(0, n.width - a)), u = t - _(c - Math.floor(o / 2), n.y, n.y + Math.max(0, n.height - o)) - o, d = new Uint8Array(a * o * 4);
+	e.readPixels(l, u, a, o, e.RGBA, e.UNSIGNED_BYTE, d);
+	let f = new Uint8ClampedArray(a * o * 4), p = a * 4;
+	for (let e = 0; e < o; e++) {
+		let t = (o - 1 - e) * p;
 		f.set(d.subarray(t, t + p), e * p);
 	}
-	return new ImageData(f, i, a);
+	return new ImageData(f, a, o);
 }
 function _(e, t, n) {
 	return e < t ? t : e > n ? n : e;
 }
 //#endregion
 //#region src/loupe/createLoupe.ts
-function v(e) {
-	let { hud: t, canvas: n, source: r, requestRedraw: i } = e, a = e.input ?? n, o = null, s = !1, c = !1, l = !1, m = e.bounds ?? {
+var v = {
+	x: 0,
+	y: 0,
+	w: 0,
+	h: 0
+};
+function y(e) {
+	let { hud: t, canvas: n, requestRedraw: r } = e, i = e.views, a = i !== void 0 && e.interactive === !0, o = e.input ?? n, s = null, c = !1, l = null, m = !1, _ = !1, y = !1, b = !1, x = e.bounds ?? {
 		x: 24,
 		y: 24,
 		w: 220,
 		h: 200
-	}, _ = (e) => T.mode === "vector" ? y(e) : b(e), v = (t) => e.background ?? t.tokens["--wzl-surface"], y = (e) => {
-		let t = d(T.aim.x, T.aim.y, f(e.view)), n = h({
-			x: t[0],
-			y: t[1]
-		}, e.view, e.rect, T.factor);
-		return u({
-			id: `${w.id}:lens`,
-			label: "Loupe content",
-			source: r,
-			view: n,
-			bounds: () => e.rect,
-			background: v(e)
-		}).draw(e.data, e.view, e.dims);
-	}, b = (e) => {
-		let t = [{
-			kind: "path",
-			path: {
-				kind: "rect",
-				x: e.rect.x,
-				y: e.rect.y,
-				width: e.rect.w,
-				height: e.rect.h
-			},
-			fill: {
-				fill: "solid",
-				color: v(e)
-			}
-		}];
-		return o && t.push({
+	}, S = (e) => F.mode === "vector" ? E(e) : D(e), C = (t) => e.background ?? t.tokens["--wzl-surface"], w = (e) => ({
+		kind: "path",
+		path: {
+			kind: "rect",
+			x: e.rect.x,
+			y: e.rect.y,
+			width: e.rect.w,
+			height: e.rect.h
+		},
+		fill: {
+			fill: "solid",
+			color: C(e)
+		}
+	}), T = (e, t) => {
+		let n = d(F.aim.x, F.aim.y, f(e));
+		return h({
+			x: n[0],
+			y: n[1]
+		}, e, t, F.factor);
+	}, E = (t) => i ? s ? [w(t), ...s.draw(t.data, t.view, t.dims)] : [w(t)] : u({
+		id: `${M.id}:lens`,
+		label: "Loupe content",
+		source: e.source ?? [],
+		view: T(t.view, t.rect),
+		bounds: () => t.rect,
+		background: C(t)
+	}).draw(t.data, t.view, t.dims), D = (e) => {
+		let t = [w(e)];
+		return l && t.push({
 			kind: "image",
-			image: o,
+			image: l,
 			x: e.rect.x,
 			y: e.rect.y,
 			w: e.rect.w,
 			h: e.rect.h,
 			sampling: "nearest"
 		}), t;
-	}, x = () => {
-		l || T.mode !== "pixel" || (c = !0);
-	}, S = () => {
-		if (l || T.mode !== "pixel") return;
-		let e = n.getContext("webgl2");
-		if (!e) return;
-		let t = n.getBoundingClientRect();
-		if (t.width === 0) return;
-		let r = n.width / t.width, a = w.contentRect, c = Math.max(1, Math.round(a.w * r / T.factor)), u = Math.max(1, Math.round(a.h * r / T.factor)), d = g(e, {
+	}, O = () => {
+		y || F.mode !== "pixel" || (_ = !0);
+	}, k = (t, r, a) => {
+		if (!b) return null;
+		let o = n.getContext("webgl2");
+		if (!o) return null;
+		let s = n.getBoundingClientRect();
+		if (s.width === 0) return null;
+		let c = n.width / s.width, l = (e.region ?? i?.getSurfaceRect)?.(), u = l ? {
+			x: Math.round(l.x * c),
+			y: Math.round(l.y * c),
+			width: Math.round(l.width * c),
+			height: Math.round(l.height * c)
+		} : {
+			x: 0,
+			y: 0,
 			width: n.width,
 			height: n.height
-		}, T.aim, r, c, u);
-		s = !0, createImageBitmap(d).then((e) => {
-			if (l) {
+		};
+		return g(o, n.height, u, t, c, r(c), a(c));
+	}, A = () => {
+		if (y || F.mode !== "pixel") return;
+		let e = M.contentRect, t = k(F.aim, (t) => Math.max(1, Math.round(e.w * t / F.factor)), (t) => Math.max(1, Math.round(e.h * t / F.factor)));
+		t && (m = !0, createImageBitmap(t).then((e) => {
+			if (y) {
 				e.close();
 				return;
 			}
-			o?.close(), o = e, s = !1, i();
+			l?.close(), l = e, m = !1, r();
 		}).catch(() => {
-			s = !1, i();
-		});
-	}, C = (e) => {
-		let t = n.getContext("webgl2");
-		if (!t) return null;
-		let r = n.getBoundingClientRect();
-		if (r.width === 0) return null;
-		let i = n.width / r.width, a = g(t, {
-			width: n.width,
-			height: n.height
-		}, e, i, 1, 1);
-		return "#" + [
-			a.data[0],
-			a.data[1],
-			a.data[2]
-		].map((e) => e.toString(16).padStart(2, "0")).join("");
-	}, w = t.window({
+			m = !1, r();
+		}));
+	}, j = (e) => {
+		let t = k(e, () => 1, () => 1);
+		return t ? "#" + [
+			t.data[0],
+			t.data[1],
+			t.data[2]
+		].map((e) => e.toString(16).padStart(2, "0")).join("") : null;
+	}, M = t.window({
 		id: "weasel-loupe",
-		x: m.x,
-		y: m.y,
-		w: m.w,
-		h: m.h,
+		x: x.x,
+		y: x.y,
+		w: x.w,
+		h: x.h,
 		title: e.title ?? "Loupe",
 		titlebar: e.titlebar,
-		content: _,
+		content: S,
+		interior: a ? "pass" : "claim",
 		onResize: () => {
-			x();
-		},
-		onContentClick: (e) => {
-			T.pick(e);
+			O();
 		},
+		...a ? {} : { onContentClick: (e) => {
+			F.pick(e);
+		} },
 		...e.onClose ? { onClose: e.onClose } : {}
-	}), T = p({
-		surface: {
-			lens: () => w.contentRect,
-			covers: (e) => w.hitTest(e.x, e.y),
-			sample: C,
-			hidden: () => w.hidden,
-			gone: () => w.disposed === !0,
-			changed: () => {
-				x(), i();
-			}
+	}), N = {
+		lens: () => M.contentRect,
+		covers: (e) => M.hitTest(e.x, e.y) || (M.passes?.(e.x, e.y) ?? !1),
+		sample: j,
+		hidden: () => M.hidden,
+		gone: () => M.disposed === !0,
+		changed: () => {
+			O(), r();
 		},
+		subscribeFrame: t.subscribeFrame
+	}, P = t.subscribeFrame(() => {
+		b = !0, !(!_ || m) && (_ = !1, A());
+	}), F = p({
+		surface: N,
 		...e.mode ? { mode: e.mode } : {},
 		...e.factor === void 0 ? {} : { factor: e.factor },
 		...e.onColorChange ? { onColorChange: e.onColorChange } : {},
 		...e.onPick ? { onPick: e.onPick } : {},
-		onDispose: () => O()
-	}), E = (e) => {
-		let t = a.getBoundingClientRect();
-		T.aimAt({
+		onDispose: () => V()
+	});
+	i && (s = i.addView({
+		id: `${M.id}:lens`,
+		label: "Loupe",
+		bounds: () => M.hidden ? v : M.contentRect,
+		view: (e) => T(e, M.contentRect),
+		paint: !1,
+		interactive: a,
+		...e.source ? { layers: () => e.source } : {}
+	}));
+	let I = (e) => {
+		let t = o.getBoundingClientRect();
+		return {
 			x: e.clientX - t.left,
 			y: e.clientY - t.top
-		});
-	}, D = t.subscribeFrame(() => {
-		!c || s || (c = !1, S());
-	}), O = () => {
-		l = !0, D(), a.removeEventListener("pointermove", E), o?.close(), o = null;
+		};
+	}, L = (e) => {
+		c || F.aimAt(I(e));
+	}, R = (e) => {
+		a && N.covers(I(e)) && (c = !0);
+	}, z = () => {
+		c = !1;
+	}, B = [
+		"pointerup",
+		"pointercancel",
+		"lostpointercapture"
+	], V = () => {
+		y = !0, P(), o.removeEventListener("pointermove", L), o.removeEventListener("pointerdown", R);
+		for (let e of B) o.removeEventListener(e, z);
+		s?.remove(), s = null, l?.close(), l = null;
 	};
-	return a.addEventListener("pointermove", E), {
-		window: w,
+	o.addEventListener("pointermove", L), o.addEventListener("pointerdown", R);
+	for (let e of B) o.addEventListener(e, z);
+	return {
+		window: M,
 		get mode() {
-			return T.mode;
+			return F.mode;
 		},
 		get factor() {
-			return T.factor;
+			return F.factor;
 		},
 		get aim() {
-			return T.aim;
+			return F.aim;
 		},
 		get color() {
-			return T.color;
+			return F.color;
 		},
-		setMode: T.setMode,
-		setFactor: T.setFactor,
-		aimAt: T.aimAt,
-		pick: T.pick,
+		setMode: F.setMode,
+		setFactor: F.setFactor,
+		aimAt: F.aimAt,
+		pick: F.pick,
 		dispose() {
-			T.dispose(), w.dispose();
+			F.dispose(), M.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, v as createLoupe, l as cursorForZone, m as loupeInnerView, s as registerDefaultFont };
+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, y as createLoupe, l as cursorForZone, m as loupeInnerView, s as registerDefaultFont };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/loupe/readback.ts","../src/loupe/createLoupe.ts"],"sourcesContent":["/**\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 {\n  createLoupeModel, loupeInnerView,\n  type LoupeMode, type LoupeModel, type LoupeSurface,\n} from '@weasel-js/loupe';\nimport type { Hud } from '../hud';\nimport type { WindowWidget } from '../widgets/window/window';\nimport type { HudContentCtx, WidgetBounds } from '../widget';\nimport { readbackRegion } from './readback';\n\nexport type { LoupeMode };\n\n/** Options for `createLoupe`. */\nexport interface LoupeOptions {\n  hud: Hud;\n  /** The canvas pixel mode reads back from. Supplies the GL context and the\n   *  drawing-buffer dimensions. */\n  canvas: HTMLCanvasElement;\n  /** Where the aim comes from: the element pointer events are taken from and\n   *  the rect client coords are measured against. Defaults to `canvas`, which\n   *  is right whenever the canvas is also the thing under the pointer. */\n  input?: HTMLElement;\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 when a click inside the lens picks a color — an eyedropper on the\n   *  magnified surface. Where the color goes is the consumer's: the loupe\n   *  reports the pick and nothing else. */\n  onPick?: (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  /** Backdrop painted behind the magnified content in both modes, so the\n   *  outer canvas does not show through where the lens is empty. Defaults to\n   *  the theme's surface color. */\n  background?: string;\n}\n\n/** Control surface for a live loupe: where it is aimed, how it magnifies,\n *  what color it is over, and the window it lives in. */\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  /** Sample the color the lens is showing at `p` — a screen point inside the\n   *  lens — and report it to `onPick`. Omit `p` to pick at the aim point.\n   *  Returns the hex, or `null` when the framebuffer cannot answer for that\n   *  point. Leaves the aim, and `color`, alone. */\n  pick(p?: { x: number; y: number }): string | null;\n  dispose(): void;\n}\n\n/**\n * Build a magnifier: a HUD window whose interior shows the canvas around an\n * aim point, enlarged. Adds the window to the HUD and starts following the\n * pointer; `dispose` removes it again.\n */\nexport function createLoupe(opts: LoupeOptions): LoupeHandle {\n  const { hud, canvas: element, source, requestRedraw } = opts;\n  const input = opts.input ?? element;\n  let pixels: ImageBitmap | null = null;\n  let pixelsPending = false;\n  let refreshWanted = false;\n  let disposed = false;\n\n  const b = opts.bounds ?? { x: 24, y: 24, w: 220, h: 200 };\n\n  const content = (ctx: HudContentCtx): DrawCommand[] =>\n    model.mode === 'vector' ? drawVector(ctx) : drawPixels(ctx);\n\n  const backdropColor = (ctx: HudContentCtx): string =>\n    opts.background ?? ctx.tokens['--wzl-surface'];\n\n  const drawVector = (ctx: HudContentCtx): DrawCommand[] => {\n    const world = screenToWorld(model.aim.x, model.aim.y, viewToTransform(ctx.view));\n    const inner: View = loupeInnerView(\n      { x: world[0], y: world[1] }, ctx.view, ctx.rect, model.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: backdropColor(ctx),\n    });\n    return lens.draw(ctx.data, ctx.view, ctx.dims);\n  };\n\n  const drawPixels = (ctx: HudContentCtx): DrawCommand[] => {\n    // The backdrop paints even with a bitmap in hand: a readback of a\n    // transparent framebuffer is transparent, and before the first one\n    // settles there is nothing at all, either of which leaves the lens a\n    // hole onto the unmagnified canvas.\n    const out: DrawCommand[] = [{\n      kind: 'path',\n      path: { kind: 'rect', x: ctx.rect.x, y: ctx.rect.y, width: ctx.rect.w, height: ctx.rect.h },\n      fill: { fill: 'solid', color: backdropColor(ctx) },\n    }];\n    if (pixels) {\n      out.push({\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    return out;\n  };\n\n  // `gl.readPixels` outside a landed paint returns the *previous* frame, so an\n  // aim only marks the lens dirty; the read itself happens in the frame\n  // subscriber below, on the frame that painted.\n  const scheduleRefresh = () => {\n    if (disposed || model.mode !== 'pixel') return;\n    refreshWanted = true;\n  };\n\n  const refreshPixels = () => {\n    if (disposed || model.mode !== 'pixel') 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) / model.factor));\n    const rh = Math.max(1, Math.round((rect.h * dpr) / model.factor));\n    const data = readbackRegion(\n      gl, { width: element.width, height: element.height }, model.aim, dpr, rw, rh,\n    );\n    pixelsPending = true;\n    createImageBitmap(data)\n      .then((bmp) => {\n        if (disposed) { bmp.close(); return; }\n        pixels?.close();\n        pixels = bmp;\n        pixelsPending = false;\n        requestRedraw();\n      })\n      .catch(() => {\n        pixelsPending = false;\n        requestRedraw();\n      });\n  };\n\n  const readHex = (at: { x: number; y: number }): string | null => {\n    const gl = element.getContext('webgl2');\n    if (!gl) return null;\n    const cssRect = element.getBoundingClientRect();\n    if (cssRect.width === 0) return null;\n    const dpr = element.width / cssRect.width;\n    const px = readbackRegion(\n      gl, { width: element.width, height: element.height }, at, dpr, 1, 1,\n    );\n    return '#' + [px.data[0], px.data[1], px.data[2]]\n      .map((c) => c.toString(16).padStart(2, '0')).join('');\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: () => { scheduleRefresh(); },\n    onContentClick: (p) => { model.pick(p); },\n    ...(opts.onClose ? { onClose: opts.onClose } : {}),\n  });\n\n  const surface: LoupeSurface = {\n    lens: () => win.contentRect,\n    covers: (p) => win.hitTest(p.x, p.y),\n    sample: readHex,\n    hidden: () => win.hidden,\n    gone: () => win.disposed === true,\n    changed: () => { scheduleRefresh(); requestRedraw(); },\n  };\n\n  const model: LoupeModel = createLoupeModel({\n    surface,\n    ...(opts.mode ? { mode: opts.mode } : {}),\n    ...(opts.factor !== undefined ? { factor: opts.factor } : {}),\n    ...(opts.onColorChange ? { onColorChange: opts.onColorChange } : {}),\n    ...(opts.onPick ? { onPick: opts.onPick } : {}),\n    onDispose: () => teardown(),\n  });\n\n  const onPointerMove = (evt: PointerEvent) => {\n    const r = input.getBoundingClientRect();\n    model.aimAt({ x: evt.clientX - r.left, y: evt.clientY - r.top });\n  };\n\n  const unsubscribeFrame = hud.subscribeFrame(() => {\n    // A refresh wanted while a bitmap is in flight is remembered rather than\n    // dropped: the flag survives until a frame finds it settled, so the aim\n    // the user ends a fast drag on is the one that gets read.\n    if (!refreshWanted || pixelsPending) return;\n    refreshWanted = false;\n    refreshPixels();\n  });\n\n  const teardown = () => {\n    disposed = true;\n    unsubscribeFrame();\n    input.removeEventListener('pointermove', onPointerMove);\n    pixels?.close();\n    pixels = null;\n  };\n\n  input.addEventListener('pointermove', onPointerMove);\n\n  return {\n    window: win,\n    get mode() { return model.mode; },\n    get factor() { return model.factor; },\n    get aim() { return model.aim; },\n    get color() { return model.color; },\n    setMode: model.setMode,\n    setFactor: model.setFactor,\n    aimAt: model.aimAt,\n    pick: model.pick,\n    dispose() {\n      model.dispose();\n      win.dispose();\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/loupe/readback.ts","../src/loupe/createLoupe.ts"],"sourcesContent":["/**\n * Read a `rw × rh` device-pixel region of the drawing buffer centered on\n * `pointer`, returned top-down. `pointer` is in CSS px relative to `target`,\n * the rect of the buffer the canvas paints into (device px, top-left origin),\n * and the read is clamped to stay inside that rect.\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  bufferHeight: number,\n  target: { x: number; y: number; width: number; height: number },\n  pointer: { x: number; y: number },\n  dpr: number,\n  rw: number,\n  rh: number,\n): ImageData {\n  const cx = target.x + Math.round(pointer.x * dpr);\n  const cy = target.y + Math.round(pointer.y * dpr);\n  const gx = clamp(cx - Math.floor(rw / 2), target.x, target.x + Math.max(0, target.width - rw));\n  const gyTop = clamp(cy - Math.floor(rh / 2), target.y, target.y + Math.max(0, target.height - rh));\n  const gy = bufferHeight - 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 CanvasViewHandle, type RenderLayer, type SceneCanvasApi, type View,\n} from '@weasel-js/core';\nimport type { DrawCommand } from '@weasel-js/core/renderer';\nimport {\n  createLoupeModel, loupeInnerView,\n  type LoupeMode, type LoupeModel, type LoupeSurface,\n} from '@weasel-js/loupe';\nimport type { Hud } from '../hud';\nimport type { WindowWidget } from '../widgets/window/window';\nimport type { HudContentCtx, WidgetBounds } from '../widget';\nimport { readbackRegion } from './readback';\n\nexport type { LoupeMode };\n\n/** Options for `createLoupe` shared by a plain lens and an interactive one. */\nexport interface LoupeBaseOptions {\n  hud: Hud;\n  /** The canvas pixel mode reads back from. Supplies the GL context and the\n   *  drawing-buffer dimensions. */\n  canvas: HTMLCanvasElement;\n  /** Where the aim comes from: the element pointer events are taken from and\n   *  the rect client coords are measured against. Defaults to `canvas`, which\n   *  is right whenever the canvas is also the thing under the pointer. */\n  input?: HTMLElement;\n  /** The rect of `canvas` the magnified picture occupies, in its CSS px — the\n   *  one the aim is relative to. Pass `CanvasExtensionApi.getSurfaceRect` for\n   *  a pane painted into a shared canvas. Defaults to `views.getSurfaceRect`\n   *  when the lens is a view, and to the whole canvas otherwise. */\n  region?: () => { x: number; y: number; width: number; height: number };\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 when a click inside the lens picks a color — an eyedropper on the\n   *  magnified surface. Where the color goes is the consumer's: the loupe\n   *  reports the pick and nothing else. An `interactive` lens gives its clicks\n   *  to the canvas, so only `pick()` reaches this. */\n  onPick?: (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  /** Backdrop painted behind the magnified content in both modes, so the\n   *  outer canvas does not show through where the lens is empty. Defaults to\n   *  the theme's surface color. */\n  background?: string;\n}\n\n/** Options for `createLoupe`. */\nexport type LoupeOptions = LoupeBaseOptions & (\n  | {\n      /** Layers re-rendered through the magnified inner view in vector mode. */\n      source: RenderLayer<unknown>[];\n      views?: undefined;\n      interactive?: false;\n    }\n  | {\n      /**\n       * The canvas, as a host for views. The lens becomes a view on it: vector\n       * mode paints the canvas's own stack — scene and selection chrome — and\n       * the lens can take input. It magnifies the canvas's own camera; aimed\n       * over another view, it shows the canvas's world, not that view's.\n       */\n      views: Pick<SceneCanvasApi, 'addView' | 'getSurfaceRect'>;\n      /** Narrows what vector mode paints. Defaults to the canvas's stack. */\n      source?: RenderLayer<unknown>[];\n      /**\n       * Route input inside the lens to what it shows: a press selects the node\n       * magnified under the pointer, and a drag moves it by the pointer travel\n       * divided by the magnification. Default `false` — the window keeps its\n       * interior, and a click there picks a color.\n       */\n      interactive?: boolean;\n    }\n);\n\n/** Where an interactive lens routes while its window is hidden: nowhere. */\nconst NO_RECT = { x: 0, y: 0, w: 0, h: 0 };\n\n/** Control surface for a live loupe: where it is aimed, how it magnifies,\n *  what color it is over, and the window it lives in. */\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 on the first\n   *  frame to land after the aim. `null` until then, or when the GL context\n   *  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  /** Sample the color the lens is showing at `p` — a screen point inside the\n   *  lens — and report it to `onPick`. Omit `p` to pick at the aim point.\n   *  Returns the hex, or `null` when the framebuffer cannot answer for that\n   *  point, including before any frame has landed. Leaves the aim, and\n   *  `color`, alone. */\n  pick(p?: { x: number; y: number }): string | null;\n  dispose(): void;\n}\n\n/**\n * Build a magnifier: a HUD window whose interior shows the canvas around an\n * aim point, enlarged. Adds the window to the HUD and starts following the\n * pointer; `dispose` removes it again.\n */\nexport function createLoupe(opts: LoupeOptions): LoupeHandle {\n  const { hud, canvas: element, requestRedraw } = opts;\n  const host = opts.views;\n  const interactive = host !== undefined && opts.interactive === true;\n  const input = opts.input ?? element;\n  let lens: CanvasViewHandle | null = null;\n  // Set while a gesture that began over the window is held: the lens camera\n  // follows the aim, so re-aiming mid-drag would move the world under it.\n  let holding = false;\n  let pixels: ImageBitmap | null = null;\n  let pixelsPending = false;\n  let refreshWanted = false;\n  let disposed = false;\n  // Until a paint lands, the context on a shared canvas may not exist yet, and\n  // opening it here would give every tenant one with no stencil buffer.\n  let landed = false;\n\n  const b = opts.bounds ?? { x: 24, y: 24, w: 220, h: 200 };\n\n  const content = (ctx: HudContentCtx): DrawCommand[] =>\n    model.mode === 'vector' ? drawVector(ctx) : drawPixels(ctx);\n\n  const backdropColor = (ctx: HudContentCtx): string =>\n    opts.background ?? ctx.tokens['--wzl-surface'];\n\n  const backdrop = (ctx: HudContentCtx): DrawCommand => ({\n    kind: 'path',\n    path: { kind: 'rect', x: ctx.rect.x, y: ctx.rect.y, width: ctx.rect.w, height: ctx.rect.h },\n    fill: { fill: 'solid', color: backdropColor(ctx) },\n  });\n\n  const innerView = (outer: View, rect: WidgetBounds): View => {\n    const world = screenToWorld(model.aim.x, model.aim.y, viewToTransform(outer));\n    return loupeInnerView({ x: world[0], y: world[1] }, outer, rect, model.factor);\n  };\n\n  const drawVector = (ctx: HudContentCtx): DrawCommand[] => {\n    if (host) return lens ? [backdrop(ctx), ...lens.draw(ctx.data, ctx.view, ctx.dims)] : [backdrop(ctx)];\n    // A fresh lens per frame: CreateViewportLayerOpts.view is static, and the\n    // inner view moves with the pointer.\n    const picture = createViewportLayer<unknown>({\n      id: `${win.id}:lens`,\n      label: 'Loupe content',\n      source: opts.source ?? [],\n      view: innerView(ctx.view, ctx.rect),\n      bounds: () => ctx.rect,\n      background: backdropColor(ctx),\n    });\n    return picture.draw(ctx.data, ctx.view, ctx.dims);\n  };\n\n  const drawPixels = (ctx: HudContentCtx): DrawCommand[] => {\n    // The backdrop paints even with a bitmap in hand: a readback of a\n    // transparent framebuffer is transparent, and before the first one\n    // settles there is nothing at all, either of which leaves the lens a\n    // hole onto the unmagnified canvas.\n    const out: DrawCommand[] = [backdrop(ctx)];\n    if (pixels) {\n      out.push({\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    return out;\n  };\n\n  // `gl.readPixels` outside a landed paint returns the *previous* frame, so an\n  // aim only marks the lens dirty; the read itself happens in the frame\n  // subscriber below, on the frame that painted.\n  const scheduleRefresh = () => {\n    if (disposed || model.mode !== 'pixel') return;\n    refreshWanted = true;\n  };\n\n  /** Read device px of the loupe's region around `at`, sized for the\n   *  canvas's pixel ratio, or `null` when the framebuffer cannot answer. */\n  const read = (\n    at: { x: number; y: number },\n    rw: (dpr: number) => number,\n    rh: (dpr: number) => number,\n  ): ImageData | null => {\n    if (!landed) return null;\n    const gl = element.getContext('webgl2');\n    if (!gl) return null;\n    const cssRect = element.getBoundingClientRect();\n    if (cssRect.width === 0) return null;\n    const dpr = element.width / cssRect.width;\n    // A view-backed lens knows its canvas, so over a detached pane it reads\n    // that pane's pixels without being told where the pane is.\n    const r = (opts.region ?? host?.getSurfaceRect)?.();\n    const target = r\n      ? {\n          x: Math.round(r.x * dpr), y: Math.round(r.y * dpr),\n          width: Math.round(r.width * dpr), height: Math.round(r.height * dpr),\n        }\n      : { x: 0, y: 0, width: element.width, height: element.height };\n    return readbackRegion(gl, element.height, target, at, dpr, rw(dpr), rh(dpr));\n  };\n\n  const refreshPixels = () => {\n    if (disposed || model.mode !== 'pixel') return;\n    const rect = win.contentRect;\n    const data = read(\n      model.aim,\n      (dpr) => Math.max(1, Math.round((rect.w * dpr) / model.factor)),\n      (dpr) => Math.max(1, Math.round((rect.h * dpr) / model.factor)),\n    );\n    if (!data) return;\n    pixelsPending = true;\n    createImageBitmap(data)\n      .then((bmp) => {\n        if (disposed) { bmp.close(); return; }\n        pixels?.close();\n        pixels = bmp;\n        pixelsPending = false;\n        requestRedraw();\n      })\n      .catch(() => {\n        pixelsPending = false;\n        requestRedraw();\n      });\n  };\n\n  const readHex = (at: { x: number; y: number }): string | null => {\n    const px = read(at, () => 1, () => 1);\n    if (!px) return null;\n    return '#' + [px.data[0], px.data[1], px.data[2]]\n      .map((c) => c.toString(16).padStart(2, '0')).join('');\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    interior: interactive ? 'pass' : 'claim',\n    onResize: () => { scheduleRefresh(); },\n    ...(interactive ? {} : { onContentClick: (p: { x: number; y: number }) => { model.pick(p); } }),\n    ...(opts.onClose ? { onClose: opts.onClose } : {}),\n  });\n\n  const surface: LoupeSurface = {\n    lens: () => win.contentRect,\n    covers: (p) => win.hitTest(p.x, p.y) || (win.passes?.(p.x, p.y) ?? false),\n    sample: readHex,\n    hidden: () => win.hidden,\n    gone: () => win.disposed === true,\n    changed: () => { scheduleRefresh(); requestRedraw(); },\n    subscribeFrame: hud.subscribeFrame,\n  };\n\n  // Subscribed ahead of the model, so the frame that lands first is already\n  // readable by the time the model samples on it.\n  const unsubscribeFrame = hud.subscribeFrame(() => {\n    landed = true;\n    // A refresh wanted while a bitmap is in flight is remembered rather than\n    // dropped: the flag survives until a frame finds it settled, so the aim\n    // the user ends a fast drag on is the one that gets read.\n    if (!refreshWanted || pixelsPending) return;\n    refreshWanted = false;\n    refreshPixels();\n  });\n\n  const model: LoupeModel = createLoupeModel({\n    surface,\n    ...(opts.mode ? { mode: opts.mode } : {}),\n    ...(opts.factor !== undefined ? { factor: opts.factor } : {}),\n    ...(opts.onColorChange ? { onColorChange: opts.onColorChange } : {}),\n    ...(opts.onPick ? { onPick: opts.onPick } : {}),\n    onDispose: () => teardown(),\n  });\n\n  if (host) {\n    lens = host.addView({\n      id: `${win.id}:lens`,\n      label: 'Loupe',\n      bounds: () => (win.hidden ? NO_RECT : win.contentRect),\n      view: (outer) => innerView(outer, win.contentRect),\n      paint: false,\n      interactive,\n      ...(opts.source ? { layers: () => opts.source! } : {}),\n    });\n  }\n\n  const local = (evt: PointerEvent): { x: number; y: number } => {\n    const r = input.getBoundingClientRect();\n    return { x: evt.clientX - r.left, y: evt.clientY - r.top };\n  };\n\n  const onPointerMove = (evt: PointerEvent) => {\n    if (holding) return;\n    model.aimAt(local(evt));\n  };\n  const onPointerDown = (evt: PointerEvent) => {\n    if (interactive && surface.covers(local(evt))) holding = true;\n  };\n  const onPointerEnd = () => { holding = false; };\n  const pointerEnds = ['pointerup', 'pointercancel', 'lostpointercapture'] as const;\n\n  const teardown = () => {\n    disposed = true;\n    unsubscribeFrame();\n    input.removeEventListener('pointermove', onPointerMove);\n    input.removeEventListener('pointerdown', onPointerDown);\n    for (const type of pointerEnds) input.removeEventListener(type, onPointerEnd);\n    lens?.remove();\n    lens = null;\n    pixels?.close();\n    pixels = null;\n  };\n\n  input.addEventListener('pointermove', onPointerMove);\n  input.addEventListener('pointerdown', onPointerDown);\n  for (const type of pointerEnds) input.addEventListener(type, onPointerEnd);\n\n  return {\n    window: win,\n    get mode() { return model.mode; },\n    get factor() { return model.factor; },\n    get aim() { return model.aim; },\n    get color() { return model.color; },\n    setMode: model.setMode,\n    setFactor: model.setFactor,\n    aimAt: model.aimAt,\n    pick: model.pick,\n    dispose() {\n      model.dispose();\n      win.dispose();\n    },\n  };\n}\n"],"mappings":";;;;AASA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA,GACA,GACW;CACX,IAAM,IAAK,EAAO,IAAI,KAAK,MAAM,EAAQ,IAAI,EAAI,EAC3C,IAAK,EAAO,IAAI,KAAK,MAAM,EAAQ,IAAI,EAAI,EAC3C,IAAK,EAAM,IAAK,KAAK,MAAM,IAAK,EAAE,EAAE,EAAO,GAAG,EAAO,IAAI,KAAK,IAAI,GAAG,EAAO,QAAQ,EAAG,CAAC,EAExF,IAAK,IADG,EAAM,IAAK,KAAK,MAAM,IAAK,EAAE,EAAE,EAAO,GAAG,EAAO,IAAI,KAAK,IAAI,GAAG,EAAO,SAAS,EAAG,CACvE,GAAQ,GAE5B,IAAM,IAAI,WAAW,IAAK,IAAK,EAAE;AACvC,GAAG,WAAW,GAAI,GAAI,GAAI,GAAI,EAAG,MAAM,EAAG,eAAe,EAAI;CAE7D,IAAM,IAAU,IAAI,kBAAkB,IAAK,IAAK,EAAE,EAC5C,IAAS,IAAK;AACpB,MAAK,IAAI,IAAM,GAAG,IAAM,GAAI,KAAO;EACjC,IAAM,KAAO,IAAK,IAAI,KAAO;AAC7B,IAAQ,IAAI,EAAI,SAAS,GAAK,IAAM,EAAO,EAAE,IAAM,EAAO;;AAE5D,QAAO,IAAI,UAAU,GAAS,GAAI,EAAG;;AAGvC,SAAS,EAAM,GAAW,GAAY,GAAoB;AACxD,QAAO,IAAI,IAAK,IAAK,IAAI,IAAK,IAAK;;;;ACkDrC,IAAM,IAAU;CAAE,GAAG;CAAG,GAAG;CAAG,GAAG;CAAG,GAAG;CAAG;AAiC1C,SAAgB,EAAY,GAAiC;CAC3D,IAAM,EAAE,QAAK,QAAQ,GAAS,qBAAkB,GAC1C,IAAO,EAAK,OACZ,IAAc,MAAS,KAAA,KAAa,EAAK,gBAAgB,IACzD,IAAQ,EAAK,SAAS,GACxB,IAAgC,MAGhC,IAAU,IACV,IAA6B,MAC7B,IAAgB,IAChB,IAAgB,IAChB,IAAW,IAGX,IAAS,IAEP,IAAI,EAAK,UAAU;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;EAAK,GAAG;EAAK,EAEnD,KAAW,MACf,EAAM,SAAS,WAAW,EAAW,EAAI,GAAG,EAAW,EAAI,EAEvD,KAAiB,MACrB,EAAK,cAAc,EAAI,OAAO,kBAE1B,KAAY,OAAqC;EACrD,MAAM;EACN,MAAM;GAAE,MAAM;GAAQ,GAAG,EAAI,KAAK;GAAG,GAAG,EAAI,KAAK;GAAG,OAAO,EAAI,KAAK;GAAG,QAAQ,EAAI,KAAK;GAAG;EAC3F,MAAM;GAAE,MAAM;GAAS,OAAO,EAAc,EAAI;GAAE;EACnD,GAEK,KAAa,GAAa,MAA6B;EAC3D,IAAM,IAAQ,EAAc,EAAM,IAAI,GAAG,EAAM,IAAI,GAAG,EAAgB,EAAM,CAAC;AAC7E,SAAO,EAAe;GAAE,GAAG,EAAM;GAAI,GAAG,EAAM;GAAI,EAAE,GAAO,GAAM,EAAM,OAAO;IAG1E,KAAc,MACd,IAAa,IAAO,CAAC,EAAS,EAAI,EAAE,GAAG,EAAK,KAAK,EAAI,MAAM,EAAI,MAAM,EAAI,KAAK,CAAC,GAAG,CAAC,EAAS,EAAI,CAAC,GAGrF,EAA6B;EAC3C,IAAI,GAAG,EAAI,GAAG;EACd,OAAO;EACP,QAAQ,EAAK,UAAU,EAAE;EACzB,MAAM,EAAU,EAAI,MAAM,EAAI,KAAK;EACnC,cAAc,EAAI;EAClB,YAAY,EAAc,EAAI;EAC/B,CACM,CAAQ,KAAK,EAAI,MAAM,EAAI,MAAM,EAAI,KAAK,EAG7C,KAAc,MAAsC;EAKxD,IAAM,IAAqB,CAAC,EAAS,EAAI,CAAC;AAS1C,SARI,KACF,EAAI,KAAK;GACP,MAAM;GACN,OAAO;GACP,GAAG,EAAI,KAAK;GAAG,GAAG,EAAI,KAAK;GAAG,GAAG,EAAI,KAAK;GAAG,GAAG,EAAI,KAAK;GACzD,UAAU;GACX,CAAC,EAEG;IAMH,UAAwB;AACxB,OAAY,EAAM,SAAS,YAC/B,IAAgB;IAKZ,KACJ,GACA,GACA,MACqB;AACrB,MAAI,CAAC,EAAQ,QAAO;EACpB,IAAM,IAAK,EAAQ,WAAW,SAAS;AACvC,MAAI,CAAC,EAAI,QAAO;EAChB,IAAM,IAAU,EAAQ,uBAAuB;AAC/C,MAAI,EAAQ,UAAU,EAAG,QAAO;EAChC,IAAM,IAAM,EAAQ,QAAQ,EAAQ,OAG9B,KAAK,EAAK,UAAU,GAAM,mBAAmB,EAC7C,IAAS,IACX;GACE,GAAG,KAAK,MAAM,EAAE,IAAI,EAAI;GAAE,GAAG,KAAK,MAAM,EAAE,IAAI,EAAI;GAClD,OAAO,KAAK,MAAM,EAAE,QAAQ,EAAI;GAAE,QAAQ,KAAK,MAAM,EAAE,SAAS,EAAI;GACrE,GACD;GAAE,GAAG;GAAG,GAAG;GAAG,OAAO,EAAQ;GAAO,QAAQ,EAAQ;GAAQ;AAChE,SAAO,EAAe,GAAI,EAAQ,QAAQ,GAAQ,GAAI,GAAK,EAAG,EAAI,EAAE,EAAG,EAAI,CAAC;IAGxE,UAAsB;AAC1B,MAAI,KAAY,EAAM,SAAS,QAAS;EACxC,IAAM,IAAO,EAAI,aACX,IAAO,EACX,EAAM,MACL,MAAQ,KAAK,IAAI,GAAG,KAAK,MAAO,EAAK,IAAI,IAAO,EAAM,OAAO,CAAC,GAC9D,MAAQ,KAAK,IAAI,GAAG,KAAK,MAAO,EAAK,IAAI,IAAO,EAAM,OAAO,CAAC,CAChE;AACI,QACL,IAAgB,IAChB,kBAAkB,EAAK,CACpB,MAAM,MAAQ;AACb,OAAI,GAAU;AAAE,MAAI,OAAO;AAAE;;AAI7B,GAHA,GAAQ,OAAO,EACf,IAAS,GACT,IAAgB,IAChB,GAAe;IACf,CACD,YAAY;AAEX,GADA,IAAgB,IAChB,GAAe;IACf;IAGA,KAAW,MAAgD;EAC/D,IAAM,IAAK,EAAK,SAAU,SAAS,EAAE;AAErC,SADK,IACE,MAAM;GAAC,EAAG,KAAK;GAAI,EAAG,KAAK;GAAI,EAAG,KAAK;GAAG,CAC9C,KAAK,MAAM,EAAE,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,GAFvC;IAKZ,IAAM,EAAI,OAAO;EACrB,IAAI;EACJ,GAAG,EAAE;EAAG,GAAG,EAAE;EAAG,GAAG,EAAE;EAAG,GAAG,EAAE;EAC7B,OAAO,EAAK,SAAS;EACrB,UAAU,EAAK;EACf;EACA,UAAU,IAAc,SAAS;EACjC,gBAAgB;AAAE,MAAiB;;EACnC,GAAI,IAAc,EAAE,GAAG,EAAE,iBAAiB,MAAgC;AAAE,KAAM,KAAK,EAAE;KAAK;EAC9F,GAAI,EAAK,UAAU,EAAE,SAAS,EAAK,SAAS,GAAG,EAAE;EAClD,CAAC,EAEI,IAAwB;EAC5B,YAAY,EAAI;EAChB,SAAS,MAAM,EAAI,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,EAAI,SAAS,EAAE,GAAG,EAAE,EAAE,IAAI;EACnE,QAAQ;EACR,cAAc,EAAI;EAClB,YAAY,EAAI,aAAa;EAC7B,eAAe;AAAqB,GAAnB,GAAiB,EAAE,GAAe;;EACnD,gBAAgB,EAAI;EACrB,EAIK,IAAmB,EAAI,qBAAqB;AAChD,MAAS,IAIL,GAAC,KAAiB,OACtB,IAAgB,IAChB,GAAe;GACf,EAEI,IAAoB,EAAiB;EACzC;EACA,GAAI,EAAK,OAAO,EAAE,MAAM,EAAK,MAAM,GAAG,EAAE;EACxC,GAAI,EAAK,WAAW,KAAA,IAAsC,EAAE,GAA5B,EAAE,QAAQ,EAAK,QAAQ;EACvD,GAAI,EAAK,gBAAgB,EAAE,eAAe,EAAK,eAAe,GAAG,EAAE;EACnE,GAAI,EAAK,SAAS,EAAE,QAAQ,EAAK,QAAQ,GAAG,EAAE;EAC9C,iBAAiB,GAAU;EAC5B,CAAC;AAEF,CAAI,MACF,IAAO,EAAK,QAAQ;EAClB,IAAI,GAAG,EAAI,GAAG;EACd,OAAO;EACP,cAAe,EAAI,SAAS,IAAU,EAAI;EAC1C,OAAO,MAAU,EAAU,GAAO,EAAI,YAAY;EAClD,OAAO;EACP;EACA,GAAI,EAAK,SAAS,EAAE,cAAc,EAAK,QAAS,GAAG,EAAE;EACtD,CAAC;CAGJ,IAAM,KAAS,MAAgD;EAC7D,IAAM,IAAI,EAAM,uBAAuB;AACvC,SAAO;GAAE,GAAG,EAAI,UAAU,EAAE;GAAM,GAAG,EAAI,UAAU,EAAE;GAAK;IAGtD,KAAiB,MAAsB;AACvC,OACJ,EAAM,MAAM,EAAM,EAAI,CAAC;IAEnB,KAAiB,MAAsB;AAC3C,EAAI,KAAe,EAAQ,OAAO,EAAM,EAAI,CAAC,KAAE,IAAU;IAErD,UAAqB;AAAE,MAAU;IACjC,IAAc;EAAC;EAAa;EAAiB;EAAqB,EAElE,UAAiB;AAIrB,EAHA,IAAW,IACX,GAAkB,EAClB,EAAM,oBAAoB,eAAe,EAAc,EACvD,EAAM,oBAAoB,eAAe,EAAc;AACvD,OAAK,IAAM,KAAQ,EAAa,GAAM,oBAAoB,GAAM,EAAa;AAI7E,EAHA,GAAM,QAAQ,EACd,IAAO,MACP,GAAQ,OAAO,EACf,IAAS;;AAIX,CADA,EAAM,iBAAiB,eAAe,EAAc,EACpD,EAAM,iBAAiB,eAAe,EAAc;AACpD,MAAK,IAAM,KAAQ,EAAa,GAAM,iBAAiB,GAAM,EAAa;AAE1E,QAAO;EACL,QAAQ;EACR,IAAI,OAAO;AAAE,UAAO,EAAM;;EAC1B,IAAI,SAAS;AAAE,UAAO,EAAM;;EAC5B,IAAI,MAAM;AAAE,UAAO,EAAM;;EACzB,IAAI,QAAQ;AAAE,UAAO,EAAM;;EAC3B,SAAS,EAAM;EACf,WAAW,EAAM;EACjB,OAAO,EAAM;EACb,MAAM,EAAM;EACZ,UAAU;AAER,GADA,EAAM,SAAS,EACf,EAAI,SAAS;;EAEhB"}

package/dist/loupe/createLoupe.d.ts

@@ -1,11 +1,11 @@
-import { type RenderLayer } from '@weasel-js/core';
+import { type RenderLayer, type SceneCanvasApi } from '@weasel-js/core';
 import { type LoupeMode } from '@weasel-js/loupe';
 import type { Hud } from '../hud';
 import type { WindowWidget } from '../widgets/window/window';
 import type { WidgetBounds } from '../widget';
 export type { LoupeMode };
-/** Options for `createLoupe`. */
-export interface LoupeOptions {
+/** Options for `createLoupe` shared by a plain lens and an interactive one. */
+export interface LoupeBaseOptions {
     hud: Hud;
     /** The canvas pixel mode reads back from. Supplies the GL context and the
      *  drawing-buffer dimensions. */
@@ -14,8 +14,16 @@ export interface LoupeOptions {
      *  the rect client coords are measured against. Defaults to `canvas`, which
      *  is right whenever the canvas is also the thing under the pointer. */
     input?: HTMLElement;
-    /** Layers re-rendered through the magnified inner view in vector mode. */
-    source: RenderLayer<unknown>[];
+    /** The rect of `canvas` the magnified picture occupies, in its CSS px — the
+     *  one the aim is relative to. Pass `CanvasExtensionApi.getSurfaceRect` for
+     *  a pane painted into a shared canvas. Defaults to `views.getSurfaceRect`
+     *  when the lens is a view, and to the whole canvas otherwise. */
+    region?: () => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
     requestRedraw: () => void;
     mode?: LoupeMode;
     factor?: number;
@@ -31,7 +39,8 @@ export interface LoupeOptions {
     onColorChange?: (hex: string) => void;
     /** Fired when a click inside the lens picks a color — an eyedropper on the
      *  magnified surface. Where the color goes is the consumer's: the loupe
-     *  reports the pick and nothing else. */
+     *  reports the pick and nothing else. An `interactive` lens gives its clicks
+     *  to the canvas, so only `pick()` reaches this. */
     onPick?: (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. */
@@ -41,6 +50,30 @@ export interface LoupeOptions {
      *  the theme's surface color. */
     background?: string;
 }
+/** Options for `createLoupe`. */
+export type LoupeOptions = LoupeBaseOptions & ({
+    /** Layers re-rendered through the magnified inner view in vector mode. */
+    source: RenderLayer<unknown>[];
+    views?: undefined;
+    interactive?: false;
+} | {
+    /**
+     * The canvas, as a host for views. The lens becomes a view on it: vector
+     * mode paints the canvas's own stack — scene and selection chrome — and
+     * the lens can take input. It magnifies the canvas's own camera; aimed
+     * over another view, it shows the canvas's world, not that view's.
+     */
+    views: Pick<SceneCanvasApi, 'addView' | 'getSurfaceRect'>;
+    /** Narrows what vector mode paints. Defaults to the canvas's stack. */
+    source?: RenderLayer<unknown>[];
+    /**
+     * Route input inside the lens to what it shows: a press selects the node
+     * magnified under the pointer, and a drag moves it by the pointer travel
+     * divided by the magnification. Default `false` — the window keeps its
+     * interior, and a click there picks a color.
+     */
+    interactive?: boolean;
+});
 /** Control surface for a live loupe: where it is aimed, how it magnifies,
  *  what color it is over, and the window it lives in. */
 export interface LoupeHandle {
@@ -52,8 +85,9 @@ export interface LoupeHandle {
         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. */
+    /** Hex color under the aim point, read off the framebuffer on the first
+     *  frame to land after the aim. `null` until then, or when the GL context
+     *  is unavailable. */
     readonly color: string | null;
     setMode(mode: LoupeMode): void;
     setFactor(factor: number): void;
@@ -66,7 +100,8 @@ export interface LoupeHandle {
     /** Sample the color the lens is showing at `p` — a screen point inside the
      *  lens — and report it to `onPick`. Omit `p` to pick at the aim point.
      *  Returns the hex, or `null` when the framebuffer cannot answer for that
-     *  point. Leaves the aim, and `color`, alone. */
+     *  point, including before any frame has landed. Leaves the aim, and
+     *  `color`, alone. */
     pick(p?: {
         x: number;
         y: number;

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

@@ -1 +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,EAEL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAC1B,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;AAG7D,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,iCAAiC;AACjC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,GAAG,CAAC;IACT;qCACiC;IACjC,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;4EAEwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,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;;6CAEyC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;0EACsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;qCAEiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;yDACyD;AACzD,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;;;qDAGiD;IACjD,IAAI,CAAC,CAAC,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,IAAI,CAAC;IAClD,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CA4K3D"}
+{"version":3,"file":"createLoupe.d.ts","sourceRoot":"","sources":["../../src/loupe/createLoupe.ts"],"names":[],"mappings":"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"}

package/dist/loupe/readback.d.ts

@@ -1,11 +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.
+ * `pointer`, returned top-down. `pointer` is in CSS px relative to `target`,
+ * the rect of the buffer the canvas paints into (device px, top-left origin),
+ * and the read is clamped to stay inside that rect.
  *
  * 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: {
+export declare function readbackRegion(gl: WebGL2RenderingContext, bufferHeight: number, target: {
+    x: number;
+    y: number;
     width: number;
     height: number;
 }, pointer: {

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

@@ -1 +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"}
+{"version":3,"file":"readback.d.ts","sourceRoot":"","sources":["../../src/loupe/readback.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,EAAE,EAAE,sBAAsB,EAC1B,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/D,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.js

@@ -1,4 +1,4 @@
-import { c as e, n as t, r as n } from "../tool-ahNtvOfu.js";
+import { c as e, n as t, r as n } from "../tool-QNtLieKj.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";