@weasel-js/hud 1.0.2 → 1.0.4

package/dist/attach.d.ts

@@ -6,5 +6,13 @@ export interface AttachHudOptions {
      *  default mode; pass `useTheme().resolved` to follow a live theme. */
     readonly theme?: ResolvedTheme;
 }
+/**
+ * Bind a HUD to a canvas: register its render layer, route pointer input to
+ * the widget under the cursor, and kick off default-font registration. Returns
+ * the detach function.
+ *
+ * Throws if the HUD is already attached — a HUD belongs to one canvas at a
+ * time.
+ */
 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,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,CAwHZ"}
+{"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;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,kBAAkB,EACvB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,IAAI,CAkIZ"}

package/dist/fonts/registerDefaultFont.d.ts

@@ -1,3 +1,7 @@
+/** Family name the bundled HUD font registers under. Widgets that name no
+ *  family draw with it. */
 export declare const DEFAULT_FONT_FAMILY = "weasel-hud-default";
+/** Register the bundled Inter atlas under `DEFAULT_FONT_FAMILY`. `attachHud`
+ *  calls this; calling it again is a no-op. */
 export declare function registerDefaultFont(): Promise<void>;
 //# sourceMappingURL=registerDefaultFont.d.ts.map

package/dist/fonts/registerDefaultFont.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registerDefaultFont.d.ts","sourceRoot":"","sources":["../../src/fonts/registerDefaultFont.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAExD,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC,CAEzD"}
+{"version":3,"file":"registerDefaultFont.d.ts","sourceRoot":"","sources":["../../src/fonts/registerDefaultFont.ts"],"names":[],"mappings":"AAOA;2BAC2B;AAC3B,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAExD;+CAC+C;AAC/C,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC,CAEzD"}

package/dist/host.d.ts

@@ -1,4 +1,7 @@
 import type { RenderLayer } from '@weasel-js/core';
+/** What a HUD needs from whatever is hosting it: somewhere to register its
+ *  render layer, and a way to ask for a repaint. `attachHud` supplies this
+ *  from a canvas; a test or a headless renderer can supply its own. */
 export interface HudHost {
     requestRedraw(): void;
     registerLayer(layer: RenderLayer<unknown>): () => void;

package/dist/host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,OAAO;IACtB,aAAa,IAAI,IAAI,CAAC;IACtB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,MAAM,IAAI,CAAC;CACxD"}
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;uEAEuE;AACvE,MAAM,WAAW,OAAO;IACtB,aAAa,IAAI,IAAI,CAAC;IACtB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,MAAM,IAAI,CAAC;CACxD"}

package/dist/hud.d.ts

@@ -6,6 +6,15 @@ 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';
+/**
+ * A HUD: an ordered set of widgets drawn in screen space over the canvas, and
+ * the factories that create them. The factory methods (`rect`, `text`, …) also
+ * add the widget and wire its mutations to a redraw; the bare `createRect`-style
+ * factories do neither, leaving redraw scheduling to the caller.
+ *
+ * A HUD holds no GL state of its own. It becomes visible by binding to a host
+ * — normally through `attachHud`.
+ */
 export interface Hud {
     add(widget: Widget): void;
     remove(widget: Widget): void;
@@ -28,5 +37,6 @@ export interface Hud {
     /** Create a window widget, add it to the HUD, and wire onChange → markDirty. */
     window(opts: WindowOptions): WindowWidget;
 }
+/** Create an empty, unbound HUD. */
 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;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"}
+{"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;;;;;;;;GAQG;AACH,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,oCAAoC;AACpC,wBAAgB,SAAS,IAAI,GAAG,CAwG/B"}

package/dist/index.js

@@ -1,4 +1,4 @@
-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-DyPy2h0T.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-Dta4BYKu.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) {
@@ -116,7 +116,15 @@ function g(e) {
 			y: e.clientY - t.top
 		});
 	}, E = (e) => {
-		w.hidden || w.hitTest(e.x, e.y) || (s = e, C(), a === "pixel" && S(), i());
+		if (!_) {
+			if (w.disposed) {
+				D();
+				return;
+			}
+			w.hidden || w.hitTest(e.x, e.y) || (s = e, C(), a === "pixel" && S(), i());
+		}
+	}, D = () => {
+		_ = !0, n.removeEventListener("pointermove", T), l?.close(), l = null;
 	};
 	return n.addEventListener("pointermove", T), {
 		window: w,
@@ -140,7 +148,7 @@ function g(e) {
 		},
 		aimAt: E,
 		dispose() {
-			_ = !0, n.removeEventListener("pointermove", T), l?.close(), l = null, w.dispose();
+			D(), w.dispose();
 		}
 	};
 }

package/dist/index.js.map

@@ -1 +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  let pixelsStale = 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    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 (disposed || mode !== 'pixel') return;\n    // A readback requested mid-flight is remembered rather than dropped: the\n    // aim that arrives during a fast drag is the one the user ends on.\n    if (pixelsPending) { pixelsStale = true; 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    pixelsStale = false;\n    createImageBitmap(data)\n      .then((bmp) => {\n        if (disposed) { bmp.close(); return; }\n        pixels?.close();\n        pixels = bmp;\n        pixelsPending = false;\n        requestRedraw();\n        if (pixelsStale) refreshPixels();\n      })\n      .catch(() => {\n        pixelsPending = false;\n        if (pixelsStale) refreshPixels();\n      });\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      disposed = true;\n      element.removeEventListener('pointermove', onPointerMove);\n      pixels?.close();\n      pixels = null;\n      win.dispose();\n    },\n  };\n}\n"],"mappings":"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"}
+{"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\n/** How a loupe magnifies. `'vector'` re-renders the source layers through a\n *  zoomed-in view, so content stays sharp at any factor; `'pixel'` reads the\n *  framebuffer back and blows up the actual pixels. */\nexport type LoupeMode = 'vector' | 'pixel';\n\n/** Options for `createLoupe`. */\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\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  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, 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  let pixelsStale = 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    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 (disposed || mode !== 'pixel') return;\n    // A readback requested mid-flight is remembered rather than dropped: the\n    // aim that arrives during a fast drag is the one the user ends on.\n    if (pixelsPending) { pixelsStale = true; 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    pixelsStale = false;\n    createImageBitmap(data)\n      .then((bmp) => {\n        if (disposed) { bmp.close(); return; }\n        pixels?.close();\n        pixels = bmp;\n        pixelsPending = false;\n        requestRedraw();\n        if (pixelsStale) refreshPixels();\n      })\n      .catch(() => {\n        pixelsPending = false;\n        if (pixelsStale) refreshPixels();\n      });\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 (disposed) return;\n    // The window can be removed through the HUD, which disposes it without\n    // going through `LoupeHandle.dispose`. Follow it down rather than keep\n    // reading pixels back for a loupe nobody can see.\n    if (win.disposed) { teardown(); return; }\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  const teardown = () => {\n    disposed = true;\n    element.removeEventListener('pointermove', onPointerMove);\n    pixels?.close();\n    pixels = null;\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      teardown();\n      win.dispose();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/loupe/createLoupe.d.ts

@@ -2,7 +2,11 @@ import { type RenderLayer } from '@weasel-js/core';
 import type { Hud } from '../hud';
 import type { WindowWidget } from '../widgets/window/window';
 import type { WidgetBounds } from '../widget';
+/** How a loupe magnifies. `'vector'` re-renders the source layers through a
+ *  zoomed-in view, so content stays sharp at any factor; `'pixel'` reads the
+ *  framebuffer back and blows up the actual pixels. */
 export type LoupeMode = 'vector' | 'pixel';
+/** Options for `createLoupe`. */
 export interface LoupeOptions {
     hud: Hud;
     /** The live canvas. Supplies the GL context for pixel mode and the pointer
@@ -30,6 +34,8 @@ export interface LoupeOptions {
      *  show through where the inner view is empty. */
     background?: string;
 }
+/** 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 {
     readonly window: WindowWidget;
     readonly mode: LoupeMode;
@@ -52,5 +58,10 @@ export interface LoupeHandle {
     }): void;
     dispose(): void;
 }
+/**
+ * Build a magnifier: a HUD window whose interior shows the canvas around an
+ * aim point, enlarged. Adds the window to the HUD and starts following the
+ * pointer; `dispose` removes it again.
+ */
 export declare function createLoupe(opts: LoupeOptions): LoupeHandle;
 //# sourceMappingURL=createLoupe.d.ts.map

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,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,CAkJ3D"}
+{"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;;uDAEuD;AACvD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3C,iCAAiC;AACjC,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;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,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CA2J3D"}

package/dist/react/index.js

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

package/dist/{tool-DyPy2h0T.js → tool-Dta4BYKu.js}

@@ -20,6 +20,9 @@ function s(e) {
 		get hidden() {
 			return r;
 		},
+		get disposed() {
+			return t;
+		},
 		setBounds(t) {
 			a(), n = { ...t }, e.onChange?.();
 		},
@@ -75,6 +78,9 @@ function c(e) {
 		get hidden() {
 			return a;
 		},
+		get disposed() {
+			return n;
+		},
 		setBounds(t) {
 			o(), r = { ...t }, e.onChange?.();
 		},
@@ -125,6 +131,9 @@ function l(e) {
 		get hidden() {
 			return i;
 		},
+		get disposed() {
+			return t;
+		},
 		setBounds(t) {
 			a(), n = { ...t }, e.onChange?.();
 		},
@@ -196,6 +205,9 @@ function d(e) {
 		get hidden() {
 			return i;
 		},
+		get disposed() {
+			return n;
+		},
 		setBounds(t) {
 			f(), r = { ...t }, e.onChange?.();
 		},
@@ -361,6 +373,9 @@ function _(n) {
 		get hidden() {
 			return u;
 		},
+		get disposed() {
+			return l;
+		},
 		get contentRect() {
 			return m(_, a);
 		},
@@ -497,17 +512,19 @@ function v() {
 		if (!n) return;
 		let i = e.indexOf(n);
 		i !== -1 && (e.splice(i, 1), r());
+	}, a = (t, i) => {
+		if (n) {
+			console.warn(`weasel-hud: ${i} called on a detached HUD; ignored.`);
+			return;
+		}
+		e.push(t), r();
 	};
 	return {
 		get attached() {
 			return t !== null;
 		},
-		add(t) {
-			if (n) {
-				console.warn("weasel-hud: add() called on a detached HUD; ignored.");
-				return;
-			}
-			e.push(t), r();
+		add(e) {
+			a(e, "add()");
 		},
 		remove(t) {
 			let n = e.indexOf(t);
@@ -534,53 +551,53 @@ function v() {
 		unbind() {
 			t = null, n = !0;
 		},
-		rect(t) {
-			let n = null, a = i(() => n);
-			return n = s({
-				...t,
+		rect(e) {
+			let t = null, n = i(() => t);
+			return t = s({
+				...e,
 				onChange: () => r(),
-				removeFromHud: a
-			}), e.push(n), r(), n;
+				removeFromHud: n
+			}), a(t, "rect()"), t;
 		},
-		text(t) {
-			let n = null, a = i(() => n);
-			return n = c({
-				...t,
+		text(e) {
+			let t = null, n = i(() => t);
+			return t = c({
+				...e,
 				onChange: () => r(),
-				removeFromHud: a
-			}), e.push(n), r(), n;
+				removeFromHud: n
+			}), a(t, "text()"), t;
 		},
-		image(t) {
-			let n = null, a = i(() => n);
-			return n = l({
-				...t,
+		image(e) {
+			let t = null, n = i(() => t);
+			return t = l({
+				...e,
 				onChange: () => r(),
-				removeFromHud: a
-			}), e.push(n), r(), n;
+				removeFromHud: n
+			}), a(t, "image()"), t;
 		},
-		label(t) {
-			let n = null, a = i(() => n);
-			return n = u({
-				...t,
+		label(e) {
+			let t = null, n = i(() => t);
+			return t = u({
+				...e,
 				onChange: () => r(),
-				removeFromHud: a
-			}), e.push(n), r(), n;
+				removeFromHud: n
+			}), a(t, "label()"), t;
 		},
-		button(t) {
-			let n = null, a = i(() => n);
-			return n = d({
-				...t,
+		button(e) {
+			let t = null, n = i(() => t);
+			return t = d({
+				...e,
 				onChange: () => r(),
-				removeFromHud: a
-			}), e.push(n), r(), n;
+				removeFromHud: n
+			}), a(t, "button()"), t;
 		},
-		window(t) {
-			let n = null, a = i(() => n);
-			return n = _({
-				...t,
+		window(e) {
+			let t = null, n = i(() => t);
+			return t = _({
+				...e,
 				onChange: () => r(),
-				removeFromHud: a
-			}), e.push(n), r(), n;
+				removeFromHud: n
+			}), a(t, "window()"), t;
 		}
 	};
 }
@@ -672,12 +689,12 @@ function E(e, t, i = {}) {
 			d !== c && (c && c.onPointer({
 				type: "hoverleave",
 				native: a
-			}), d && d.onPointer({
+			}), c = d, e.requestRedraw()), d && d.onPointer({
 				type: "hovermove",
 				x: s,
 				y: u,
 				native: a
-			}), c = d, e.requestRedraw());
+			});
 		},
 		onUncapturedLeave: () => {
 			c && (c.onPointer({
@@ -690,7 +707,10 @@ function E(e, t, i = {}) {
 		requestRedraw: e.requestRedraw,
 		registerLayer: () => () => {}
 	}), () => {
-		u(), t.unbind();
+		c &&= (c.onPointer({
+			type: "hoverleave",
+			native: null
+		}), null), u(), t.unbind();
 	};
 }
 //#endregion
@@ -919,4 +939,4 @@ function R() {
 //#endregion
 export { w as a, v as c, C as i, f as l, R as n, x as o, E as r, S as s, D as t, g as u };
 
-//# sourceMappingURL=tool-DyPy2h0T.js.map
+//# sourceMappingURL=tool-Dta4BYKu.js.map