@weasel-js/hud 1.6.0 → 1.6.1

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-C2amOWae.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-DThNTu9f.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
@@ -133,7 +133,7 @@ function y(e) {
 		},
 		subscribeFrame: t.subscribeFrame
 	}, P = t.subscribeFrame(() => {
-		b = !0, !(!_ || m) && (_ = !1, A());
+		b = !0, _ && !m && (_ = !1, A());
 	}), F = p({
 		surface: N,
 		...e.mode ? { mode: e.mode } : {},

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`, 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":"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"}
+{"version":3,"file":"index.js","names":["loupeInnerView","claimsOf","createHud","DEFAULT_WIDGET_CLAIMS","DEFAULT_WINDOW_METRICS","createHudContribution","DEFAULT_FONT_FAMILY","attachHud","HUD_AFFORDANCE_KIND","cursorForZone","loupeInnerView$1","readbackRegion","cx","target","pointer","dpr","cy","gx","clamp","rw","gy","bufferHeight","rh","raw","gl","flipped","stride","row","src","v","lo","hi","NO_RECT","createLoupe","element","opts","host","interactive","input","lens","holding","pixels","pixelsPending","refreshWanted","disposed","landed","b","content","model","drawVector","ctx","drawPixels","backdropColor","backdrop","innerView","world","screenToWorld","viewToTransform","outer","rect","createViewportLayer","win","out","scheduleRefresh","read","cssRect","r","at","refreshPixels","data","bmp","requestRedraw","readHex","px","c","hud","p","surface","unsubscribeFrame","createLoupeModel","teardown","local","evt","onPointerMove","onPointerDown","onPointerEnd","pointerEnds","type","loupeInnerView","registerDefaultFont"],"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":"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"}

package/dist/react/index.js

@@ -1,30 +1,30 @@
-import { c as e, n as t, r as n } from "../tool-C2amOWae.js";
+import { c as e, n as t, r as n } from "../tool-DThNTu9f.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 l(t, l = {}) {
-	let [u] = s(() => e()), d = c(), f = o(() => d?.resolved ?? r(i), [d]), p = l.font;
+function l(t, r = {}) {
+	let [i] = s(() => e()), o = u(r.font);
 	return a(() => {
-		let e = t.current;
+		let e = t?.current;
 		if (!e) return;
-		let r = n(e, u, {
-			theme: f,
-			...d ? { tones: d } : {},
-			...p === void 0 ? {} : { font: p }
-		});
+		let r = n(e, i, o);
 		return e.requestRedraw(), r;
-	}, [
-		u,
-		f,
-		d,
-		p
-	]), u;
+	}, [i, o]), i;
 }
-function u() {
-	return o(() => t(), []);
+function u(e) {
+	let t = c();
+	return o(() => ({
+		theme: t?.resolved ?? r(i),
+		...t ? { tones: t } : {},
+		...e === void 0 ? {} : { font: e }
+	}), [t, e]);
+}
+function d(e, n = {}) {
+	let r = u(n.font);
+	return o(() => t(e, r), [e, r]);
 }
 //#endregion
-export { l as useHud, u as useHudContribution };
+export { l as useHud, d 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 { useThemeOptional } from '@weasel-js/theme/react';\nimport { resolveTheme, weaselTheme } from '@weasel-js/theme';\nimport { createHud, type Hud } from '../hud';\nimport { attachHud, type AttachHudOptions } 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 *\n * An app that has already registered a bitmap family should say so —\n * `useHud(ref, { font: 'sans-serif' })` — or the HUD fetches its own copy of\n * the same atlas.\n */\nexport function useHud(\n  canvasRef: { current: CanvasExtensionApi | null },\n  options: Pick<AttachHudOptions, 'font'> = {},\n): 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),\n    [provided],\n  );\n\n  const font = options.font;\n  useEffect(() => {\n    const api = canvasRef.current;\n    if (!api) return;\n    const detach = attachHud(api, hud, {\n      theme,\n      ...(provided ? { tones: provided } : {}),\n      ...(font !== undefined ? { font } : {}),\n    });\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, provided, font]);\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":";;;;;AAuBA,SAAgB,EACd,GACA,IAA0C,EAAE,EACvC;CACL,IAAM,CAAC,KAAO,QAAe,GAAW,CAAC,EAKnC,IAAW,GAAkB,EAC7B,IAAQ,QACN,GAAU,YAAY,EAAa,EAAY,EACrD,CAAC,EAAS,CACX,EAEK,IAAO,EAAQ;AAiBrB,QAhBA,QAAgB;EACd,IAAM,IAAM,EAAU;AACtB,MAAI,CAAC,EAAK;EACV,IAAM,IAAS,EAAU,GAAK,GAAK;GACjC;GACA,GAAI,IAAW,EAAE,OAAO,GAAU,GAAG,EAAE;GACvC,GAAI,MAAS,KAAA,IAAuB,EAAE,GAAb,EAAE,SAAM;GAClC,CAAC;AAEF,SADA,EAAI,eAAe,EACZ;IAKN;EAAC;EAAK;EAAO;EAAU;EAAK,CAAC,EAEzB;;AAUT,SAAgB,IAAmC;AACjD,QAAO,QAAc,GAAuB,EAAE,EAAE,CAAC"}
+{"version":3,"file":"index.js","names":["createHud","createHudContribution","attachHud","useHud","hud","useState","attachOptions","useAttachOptions","options","useEffect","api","canvasRef","detach","provided","useThemeOptional","useMemo","resolveTheme","weaselTheme","font","useHudContribution"],"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, type AttachHudOptions } from '../attach';\nimport type { CanvasExtensionApi, SurfaceContribution } from '@weasel-js/core';\nimport { createHudContribution } from '../tool';\n\n/**\n * Create a HUD, and — given the canvas's ref handle — attach it to that\n * canvas. Returns the Hud immediately (unbound); attaches in an effect after\n * the canvas ref populates. Cleans up on unmount.\n *\n * Omit the ref when the HUD installs through {@link useHudContribution}\n * instead, which attaches it as part of the canvas's `ambient` entry.\n *\n * An app that has already registered a bitmap family should say so —\n * `useHud(ref, { font: 'sans-serif' })` — or the HUD fetches its own copy of\n * the same atlas.\n */\nexport function useHud(\n  canvasRef?: { current: CanvasExtensionApi | null },\n  options: Pick<AttachHudOptions, 'font'> = {},\n): Hud {\n  const [hud] = useState(() => createHud());\n  const attachOptions = useAttachOptions(options.font);\n\n  useEffect(() => {\n    const api = canvasRef?.current;\n    if (!api) return;\n    const detach = attachHud(api, hud, attachOptions);\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, attachOptions]);\n\n  return hud;\n}\n\n/** The attach options that follow the app's theme. 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. */\nfunction useAttachOptions(font: AttachHudOptions['font']): AttachHudOptions {\n  const provided = useThemeOptional();\n  return useMemo(() => ({\n    theme: provided?.resolved ?? resolveTheme(weaselTheme),\n    ...(provided ? { tones: provided } : {}),\n    ...(font !== undefined ? { font } : {}),\n  }), [provided, font]);\n}\n\n/**\n * The HUD's canvas entry — see {@link createHudContribution} for how the\n * routing works. Given a HUD, the entry also attaches it, so one `ambient`\n * entry installs the whole HUD:\n *\n * ```tsx\n * const hud = useHud();\n * const hudEntry = useHudContribution(hud, { font: 'sans-serif' });\n * <SceneCanvas ambient={[hudEntry]} … />\n * ```\n *\n * Without one it is input routing only, stateless (its actions resolve the hit\n * widget from the gesture's affordance payload), and one instance serves any\n * number of HUDs attached some other way.\n */\nexport function useHudContribution(\n  hud?: Hud,\n  options: Pick<AttachHudOptions, 'font'> = {},\n): SurfaceContribution {\n  const attachOptions = useAttachOptions(options.font);\n  return useMemo(\n    () => createHudContribution(hud, attachOptions),\n    [hud, attachOptions],\n  );\n}\n"],"mappings":";;;;;AAoBA,SAAgBG,EACd,GACA,IAA0C,CAAC,GACtC;CACL,IAAM,CAACC,KAAOC,QAAeL,EAAU,CAAC,GAClCM,IAAgBC,EAAiBC,EAAQ,IAAI;CAcnD,OAZAC,QAAgB;EACd,IAAMC,IAAMC,GAAW;EACvB,IAAI,CAACD,GAAK;EACV,IAAME,IAASV,EAAUQ,GAAKN,GAAKE,CAAa;EAEhD,OADAI,EAAI,cAAc,GACXE;CAKT,GAAG,CAACR,GAAKE,CAAa,CAAC,GAEhBF;AACT;AAKA,SAASG,EAAiB,GAAkD;CAC1E,IAAMM,IAAWC,EAAiB;CAClC,OAAOC,SAAe;EACpB,OAAOF,GAAU,YAAYG,EAAaC,CAAW;EACrD,GAAIJ,IAAW,EAAE,OAAOA,EAAS,IAAI,CAAC;EACtC,GAAIK,MAAS,KAAA,IAAuB,CAAC,IAAZ,EAAE,QAAK;CAClC,IAAI,CAACL,GAAUK,CAAI,CAAC;AACtB;AAiBA,SAAgBC,EACd,GACA,IAA0C,CAAC,GACtB;CACrB,IAAMb,IAAgBC,EAAiBC,EAAQ,IAAI;CACnD,OAAOO,QACCd,EAAsBG,GAAKE,CAAa,GAC9C,CAACF,GAAKE,CAAa,CACrB;AACF"}

package/dist/react/useHud.d.ts

@@ -1,30 +1,35 @@
 import { type Hud } from '../hud';
 import { type AttachHudOptions } from '../attach';
-import type { CanvasExtensionApi, Contribution } from '@weasel-js/core';
+import type { CanvasExtensionApi, SurfaceContribution } 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
- * canvas ref populates. Cleans up on unmount.
+ * Create a HUD, and — given the canvas's ref handle — attach it to that
+ * canvas. Returns the Hud immediately (unbound); attaches in an effect after
+ * the canvas ref populates. Cleans up on unmount.
  *
- * Usage:
- *   const ref = useRef<CanvasExtensionApi>(null);
- *   const hud = useHud(ref);
- *   // ... later
- *   const btn = hud.button({ ... });
+ * Omit the ref when the HUD installs through {@link useHudContribution}
+ * instead, which attaches it as part of the canvas's `ambient` entry.
  *
  * An app that has already registered a bitmap family should say so —
  * `useHud(ref, { font: 'sans-serif' })` — or the HUD fetches its own copy of
  * the same atlas.
  */
-export declare function useHud(canvasRef: {
+export declare function useHud(canvasRef?: {
     current: CanvasExtensionApi | null;
 }, options?: Pick<AttachHudOptions, 'font'>): Hud;
 /**
- * Memoize the HUD's input contribution — see {@link createHudContribution}
- * for how the routing works.
+ * The HUD's canvas entry — see {@link createHudContribution} for how the
+ * routing works. Given a HUD, the entry also attaches it, so one `ambient`
+ * entry installs the whole HUD:
  *
- * 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.
+ * ```tsx
+ * const hud = useHud();
+ * const hudEntry = useHudContribution(hud, { font: 'sans-serif' });
+ * <SceneCanvas ambient={[hudEntry]} … />
+ * ```
+ *
+ * Without one it is input routing only, stateless (its actions resolve the hit
+ * widget from the gesture's affordance payload), and one instance serves any
+ * number of HUDs attached some other way.
  */
-export declare function useHudContribution(): Contribution;
+export declare function useHudContribution(hud?: Hud, options?: Pick<AttachHudOptions, 'font'>): SurfaceContribution;
 //# 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":"AAGA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGxE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE;IAAE,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAAE,EACjD,OAAO,GAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAM,GAC3C,GAAG,CA8BL;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,CAEjD"}
+{"version":3,"file":"useHud.d.ts","sourceRoot":"","sources":["../../src/react/useHud.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG/E;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CACpB,SAAS,CAAC,EAAE;IAAE,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAAE,EAClD,OAAO,GAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAM,GAC3C,GAAG,CAiBL;AAcD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,CAAC,EAAE,GAAG,EACT,OAAO,GAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAM,GAC3C,mBAAmB,CAMrB"}

package/dist/{tool-C2amOWae.js → tool-DThNTu9f.js}

@@ -52,7 +52,7 @@ function m(e) {
 			}];
 		},
 		hitTest(e, t) {
-			return r ? !1 : e >= n.x && e < n.x + n.w && t >= n.y && t < n.y + n.h;
+			return !r && e >= n.x && e < n.x + n.w && t >= n.y && t < n.y + n.h;
 		},
 		claims: [],
 		onPointer(e) {},
@@ -169,7 +169,7 @@ function g(e) {
 			}];
 		},
 		hitTest(e, t) {
-			return i ? !1 : e >= n.x && e < n.x + n.w && t >= n.y && t < n.y + n.h;
+			return !i && e >= n.x && e < n.x + n.w && t >= n.y && t < n.y + n.h;
 		},
 		claims: [],
 		onPointer(e) {},
@@ -263,7 +263,7 @@ function v(e) {
 			})];
 		},
 		hitTest(e, t) {
-			return i ? !1 : d(e, t);
+			return !i && d(e, t);
 		},
 		cursorAt(t, n) {
 			return i || !d(t, n) ? "default" : e.cursor ?? "pointer";
@@ -287,10 +287,7 @@ function v(e) {
 				case "hovermove":
 					s || (s = !0, u("hover"), e.onChange?.());
 					break;
-				case "hoverleave":
-					s && (s = !1, u("leave"), e.onChange?.());
-					break;
-				default: break;
+				case "hoverleave": s && (s = !1, u("leave"), e.onChange?.());
 			}
 		},
 		dispose() {
@@ -490,7 +487,7 @@ function D(e) {
 			});
 			let S = Number.parseFloat(m["border-width"]) || 0;
 			if (S > 0) {
-				let e = o(m["border-style"] === "dashed" || m["border-style"] === "dotted" ? m["border-style"] : "solid", S), t = {
+				let e = m["border-style"] === "dashed" || m["border-style"] === "dotted" ? m["border-style"] : "solid", t = o(e, S), n = {
 					kind: "path",
 					path: {
 						kind: "rect",
@@ -505,10 +502,10 @@ function D(e) {
 							color: m["border-color"]
 						},
 						width: S,
-						...e ? { dash: e } : {}
+						...t ? { dash: t } : {}
 					}
 				};
-				d.push(t);
+				d.push(n);
 			}
 			if (!r) return d;
 			d.push(n(i + c.edge + 2, a, [{
@@ -564,10 +561,7 @@ function D(e) {
 						y: t.y
 					}), k = null, M = null;
 					break;
-				case "cancel":
-					k && (O = A, k = null, e.onChange?.()), M = null;
-					break;
-				default: break;
+				case "cancel": k && (O = A, k = null, e.onChange?.()), M = null;
 			}
 		},
 		dispose() {
@@ -581,7 +575,7 @@ function O() {
 	let e = [], t = null, n = !1, r = /* @__PURE__ */ new Set(), i = null, a = () => {
 		t?.requestRedraw();
 	}, o = () => {
-		i || !t || r.size === 0 || (i = t.subscribeFrame(() => {
+		!i && t && r.size !== 0 && (i = t.subscribeFrame(() => {
 			for (let e of [...r]) e();
 		}));
 	}, s = (t) => () => {
@@ -764,25 +758,25 @@ function P(e, t, n = {}) {
 			return o;
 		},
 		hitTest: (e, t, n, a, o) => {
-			let [s, c] = i(e, t, r(a)), l = h(s, c);
-			if (!l) return null;
-			let u = N(l, s, c);
+			let s = r(a), [c, l] = i(e, t, s), u = h(c, l);
+			if (!u) return null;
+			let d = N(u, c, l);
 			return {
-				initialScratch: { widget: l },
+				initialScratch: { widget: u },
 				strength: "exclusive",
-				claimedKinds: M(l),
-				...u === void 0 ? {} : { cursor: u }
+				claimedKinds: M(u),
+				...d === void 0 ? {} : { cursor: d }
 			};
 		},
 		onUncapturedMove: (t, n, a, o) => {
-			let [s, c] = i(t, n, r(o)), l = h(s, c);
-			l !== m && (m && m.onPointer({
+			let s = r(o), [c, l] = i(t, n, s), u = h(c, l);
+			u !== m && (m && m.onPointer({
 				type: "hoverleave",
 				native: a
-			}), m = l, e.requestRedraw()), l && l.onPointer({
+			}), m = u, e.requestRedraw()), u && u.onPointer({
 				type: "hovermove",
-				x: s,
-				y: c,
+				x: c,
+				y: l,
 				native: a
 			});
 		},
@@ -942,7 +936,7 @@ function G() {
 			timing: "immediate",
 			run: (e, t) => {
 				let n = t, r = R(n?.affordance);
-				!r || n?.clientX === void 0 || n.clientY === void 0 || r.onPointer({
+				r && n?.clientX !== void 0 && n.clientY !== void 0 && r.onPointer({
 					type: "wheel",
 					x: n.clientX,
 					y: n.clientY,
@@ -954,9 +948,13 @@ function G() {
 		}
 	};
 }
-function K() {
+function K(e, t) {
 	return {
 		id: "weasel-hud",
+		...e ? { attach: (n) => {
+			let r = P(n, e, t);
+			return n.requestRedraw(), r;
+		} } : {},
 		eligibility: { claimed: !0 },
 		actions: [
 			V(),
@@ -1030,4 +1028,4 @@ function K() {
 //#endregion
 export { M as a, O as c, j as i, y as l, K as n, k as o, P as r, A as s, F as t, C as u };
 
-//# sourceMappingURL=tool-C2amOWae.js.map
+//# sourceMappingURL=tool-DThNTu9f.js.map