@weasel-js/core 1.9.2 → 1.9.4

package/dist/canvas/CursorCoordsHud.js

@@ -3,49 +3,50 @@ import { clientToWorld as t } from "../core/viewport/clientToWorld.js";
 import n from "./hud.module.js";
 import { useHostAnchor as r } from "./useHostAnchor.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { decimal as l, qty as u } from "@weasel-js/quantity";
+import { useLatest as s } from "@weasel-js/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { decimal as u, qty as d } from "@weasel-js/quantity";
 //#region src/canvas/CursorCoordsHud.tsx
-function d({ canvasRef: l, anchorRef: u, viewRef: d, offset: p }) {
-	let [m, h] = o({
+function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
+	let g = s(m), [_, v] = o({
 		client: {
 			x: 0,
 			y: 0
 		},
 		world: null,
 		inCanvas: !1
-	}), [g, _] = o(0), { ref: v, style: y } = r(() => u?.current ?? l.current?.parentElement ?? l.current, {
+	}), [y, b] = o(0), { ref: x, style: S } = r(() => d?.current ?? u.current?.parentElement ?? u.current, {
 		align: {
 			x: "end",
 			y: "start"
 		},
 		offset: {
-			x: p?.right ?? 8,
-			y: p?.top ?? 8
+			x: h?.right ?? 8,
+			y: h?.top ?? 8
 		}
-	}), b = a(0), x = a(0), S = e(() => {
-		b.current++;
-		let e = performance.now(), t = e - x.current;
-		t >= 1e3 && (_(Math.round(b.current * 1e3 / t)), b.current = 0, x.current = e), S.request();
+	}), C = a(0), w = a(0), T = e(() => {
+		C.current++;
+		let e = performance.now(), t = e - w.current;
+		t >= 1e3 && (b(Math.round(C.current * 1e3 / t)), C.current = 0, w.current = e), T.request();
 	}, { onResume: () => {
-		b.current = 0, x.current = performance.now();
+		C.current = 0, w.current = performance.now();
 	} });
-	return i(() => (x.current = performance.now(), S.request(), () => S.cancel()), [S]), i(() => {
+	return i(() => (w.current = performance.now(), T.request(), () => T.cancel()), [T]), i(() => {
 		let e = (e) => {
-			let n = l.current, r = d.current, i = {
+			let n = u.current, r = f.current, i = {
 				x: e.clientX,
 				y: e.clientY
 			};
 			if (!n || !r) {
-				h({
+				v({
 					client: i,
 					world: null,
 					inCanvas: !1
 				});
 				return;
 			}
-			let a = n.getBoundingClientRect(), o = e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom, [s, c] = t(e.clientX, e.clientY, a, r);
-			h({
+			let a = n.getBoundingClientRect(), o = e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom, [s, c] = g.current?.(e.clientX, e.clientY) ?? t(e.clientX, e.clientY, a, r);
+			v({
 				client: i,
 				world: {
 					x: s,
@@ -57,31 +58,35 @@ function d({ canvasRef: l, anchorRef: u, viewRef: d, offset: p }) {
 		return document.addEventListener("pointermove", e), () => {
 			document.removeEventListener("pointermove", e);
 		};
-	}, [l, d]), y ? /* @__PURE__ */ s("div", {
-		ref: v,
+	}, [
+		u,
+		f,
+		g
+	]), S ? /* @__PURE__ */ c("div", {
+		ref: x,
 		className: n.hud,
-		style: y,
-		children: /* @__PURE__ */ c("dl", {
+		style: S,
+		children: /* @__PURE__ */ l("dl", {
 			className: n.readings,
 			children: [
-				/* @__PURE__ */ s("dt", {
+				/* @__PURE__ */ c("dt", {
 					className: n.muted,
 					children: "fps"
 				}),
-				/* @__PURE__ */ s("dd", { children: g }),
-				/* @__PURE__ */ s("dt", {
+				/* @__PURE__ */ c("dd", { children: y }),
+				/* @__PURE__ */ c("dt", {
 					className: n.muted,
 					children: "client"
 				}),
-				/* @__PURE__ */ s("dd", { children: f(m.client, 0) }),
-				/* @__PURE__ */ s("dt", {
+				/* @__PURE__ */ c("dd", { children: p(_.client, 0) }),
+				/* @__PURE__ */ c("dt", {
 					className: n.muted,
 					children: "world"
 				}),
-				m.world ? /* @__PURE__ */ c("dd", { children: [f(m.world, 1), m.inCanvas ? null : /* @__PURE__ */ s("span", {
+				_.world ? /* @__PURE__ */ l("dd", { children: [p(_.world, 1), _.inCanvas ? null : /* @__PURE__ */ c("span", {
 					className: n.absent,
 					children: " off-canvas"
-				})] }) : /* @__PURE__ */ s("dd", {
+				})] }) : /* @__PURE__ */ c("dd", {
 					className: n.absent,
 					children: "— no canvas or view yet"
 				})
@@ -89,14 +94,14 @@ function d({ canvasRef: l, anchorRef: u, viewRef: d, offset: p }) {
 		})
 	}) : null;
 }
-function f({ x: e, y: t }, n) {
-	let r = l({
+function p({ x: e, y: t }, n) {
+	let r = u({
 		places: n,
 		grouping: !1
 	});
-	return `(${u(e, r).text}, ${u(t, r).text})`;
+	return `(${d(e, r).text}, ${d(t, r).text})`;
 }
 //#endregion
-export { d as CursorCoordsHud };
+export { f as CursorCoordsHud };
 
 //# sourceMappingURL=CursorCoordsHud.js.map

package/dist/canvas/CursorCoordsHud.js.map

@@ -1 +1 @@
-{"version":3,"file":"CursorCoordsHud.js","names":["s","hud_module_default","CursorCoordsHud","state","setState","useState","fps","setFps","anchorStyle","useHostAnchor","anchorRef","canvasRef","offset","framesRef","useRef","lastFlushRef","fpsLoop","useVisibleRaf","now","dt","useEffect","onMove","canvas","view","viewRef","client","rect","inCanvas","wx","wy","clientToWorld","point","at","decimal","qty","x","y"],"sources":["../../src/canvas/CursorCoordsHud.tsx"],"sourcesContent":["/**\n * Fixed-position dev HUD that shows the cursor's current viewport\n * (client) coords next to the equivalent canvas (world) coords. Mounts\n * top-left of the viewport; listens to `document` pointermove so it\n * reads the cursor even when it leaves the canvas.\n *\n * Mount inside a `<SceneCanvas>` subtree (or anywhere with access to a\n * canvas + view ref) for quick coord-reconciliation during gesture\n * debugging.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { decimal, qty } from '@weasel-js/quantity';\nimport { useVisibleRaf } from '../scheduling/useVisibleRaf';\nimport s from './hud.module.css';\nimport { useHostAnchor } from './useHostAnchor';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld } from 'core/viewport/clientToWorld';\n\n/** Props for `<CursorCoordsHud>`. */\nexport interface CursorCoordsHudProps {\n  canvasRef: React.RefObject<HTMLElement | null>;\n  /** Element the HUD pins its corner to. Defaults to the canvas's parent — the\n   *  wrapper a bare `<canvas>` sits in. A detached canvas passes its own input\n   *  box, whose parent is the shared surface every pane sits in. */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  viewRef: React.RefObject<View>;\n  /** Inset from the canvas's top-right corner, in px. Default 8 on both axes. */\n  offset?: { top?: number; right?: number };\n}\n\ninterface HudState {\n  client: { x: number; y: number };\n  world: { x: number; y: number } | null;\n  inCanvas: boolean;\n}\n\n/** Debug overlay showing the pointer's client and world coordinates and the\n *  current frame rate, pinned to the canvas's top-right corner. */\nexport function CursorCoordsHud({ canvasRef, anchorRef, viewRef, offset }: CursorCoordsHudProps) {\n  const [state, setState] = useState<HudState>({\n    client: { x: 0, y: 0 }, world: null, inCanvas: false,\n  });\n  const [fps, setFps] = useState<number>(0);\n  const { ref, style: anchorStyle } = useHostAnchor(\n    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,\n    {\n      align: { x: 'end', y: 'start' },\n      offset: { x: offset?.right ?? 8, y: offset?.top ?? 8 },\n    },\n  );\n\n  // FPS counter: tally frames per rAF tick; flush once a second.\n  const framesRef = useRef(0);\n  const lastFlushRef = useRef(0);\n  const fpsLoop = useVisibleRaf(\n    () => {\n      framesRef.current++;\n      const now = performance.now();\n      const dt = now - lastFlushRef.current;\n      if (dt >= 1000) {\n        setFps(Math.round((framesRef.current * 1000) / dt));\n        framesRef.current = 0;\n        lastFlushRef.current = now;\n      }\n      fpsLoop.request();\n    },\n    // Frames not drawn while hidden are not frames that were slow to draw:\n    // without this the readout would flush a near-zero rate on resume.\n    {\n      onResume: () => {\n        framesRef.current = 0;\n        lastFlushRef.current = performance.now();\n      },\n    },\n  );\n\n  useEffect(() => {\n    lastFlushRef.current = performance.now();\n    fpsLoop.request();\n    return () => fpsLoop.cancel();\n  }, [fpsLoop]);\n\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      const canvas = canvasRef.current;\n      const view = viewRef.current;\n      const client = { x: e.clientX, y: e.clientY };\n      if (!canvas || !view) {\n        setState({ client, world: null, inCanvas: false });\n        return;\n      }\n      const rect = canvas.getBoundingClientRect();\n      const inCanvas =\n        e.clientX >= rect.left && e.clientX <= rect.right &&\n        e.clientY >= rect.top  && e.clientY <= rect.bottom;\n      const [wx, wy] = clientToWorld(e.clientX, e.clientY, rect, view);\n      const world = { x: wx, y: wy };\n      setState({ client, world, inCanvas });\n    };\n\n    document.addEventListener('pointermove', onMove);\n\n    return () => {\n      document.removeEventListener('pointermove', onMove);\n    };\n  }, [canvasRef, viewRef]);\n\n  if (!anchorStyle) return null;\n\n  return (\n    <div ref={ref} className={s.hud} style={anchorStyle}>\n      <dl className={s.readings}>\n        <dt className={s.muted}>fps</dt>\n        <dd>{fps}</dd>\n        <dt className={s.muted}>client</dt>\n        <dd>{point(state.client, 0)}</dd>\n        <dt className={s.muted}>world</dt>\n        {state.world ? (\n          <dd>\n            {point(state.world, 1)}\n            {state.inCanvas ? null : <span className={s.absent}> off-canvas</span>}\n          </dd>\n        ) : (\n          <dd className={s.absent}>— no canvas or view yet</dd>\n        )}\n      </dl>\n    </div>\n  );\n}\n\n/** `(x, y)` at `places` decimals, its negatives written with U+2212. */\nfunction point({ x, y }: { x: number; y: number }, places: number): string {\n  const at = decimal({ places, grouping: false });\n  return `(${qty(x, at).text}, ${qty(y, at).text})`;\n}\n"],"mappings":"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"}
+{"version":3,"file":"CursorCoordsHud.js","names":["s","hud_module_default","CursorCoordsHud","toWorldRef","useLatest","toWorld","state","setState","useState","fps","setFps","anchorStyle","useHostAnchor","anchorRef","canvasRef","offset","framesRef","useRef","lastFlushRef","fpsLoop","useVisibleRaf","now","dt","useEffect","onMove","canvas","view","viewRef","client","rect","inCanvas","wx","wy","clientToWorld","point","at","decimal","qty","x","y"],"sources":["../../src/canvas/CursorCoordsHud.tsx"],"sourcesContent":["/**\n * Fixed-position dev HUD that shows the cursor's current viewport\n * (client) coords next to the equivalent canvas (world) coords. Pins to the\n * top-right corner of the canvas's host; listens to `document` pointermove so it\n * reads the cursor even when it leaves the canvas.\n *\n * Mount inside a `<SceneCanvas>` subtree (or anywhere with access to a\n * canvas + view ref) for quick coord-reconciliation during gesture\n * debugging.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { decimal, qty } from '@weasel-js/quantity';\nimport { useLatest } from '@weasel-js/react';\nimport { useVisibleRaf } from '../scheduling/useVisibleRaf';\nimport s from './hud.module.css';\nimport { useHostAnchor } from './useHostAnchor';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld } from 'core/viewport/clientToWorld';\n\n/** Props for `<CursorCoordsHud>`. */\nexport interface CursorCoordsHudProps {\n  canvasRef: React.RefObject<HTMLElement | null>;\n  /** Element the HUD pins its corner to. Defaults to the canvas's parent — the\n   *  wrapper a bare `<canvas>` sits in. A detached canvas passes its own input\n   *  box, whose parent is the shared surface every pane sits in. */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  viewRef: React.RefObject<View>;\n  /** Client coords to world. Defaults to the canvas's rect and `viewRef`. A\n   *  canvas whose routing converts some other way (a CSS transform, a 3D host)\n   *  passes that conversion, so the readout agrees with the picks. */\n  toWorld?: (clientX: number, clientY: number) => [number, number];\n  /** Inset from the canvas's top-right corner, in px. Default 8 on both axes. */\n  offset?: { top?: number; right?: number };\n}\n\ninterface HudState {\n  client: { x: number; y: number };\n  world: { x: number; y: number } | null;\n  inCanvas: boolean;\n}\n\n/** Debug overlay showing the pointer's client and world coordinates and the\n *  current frame rate, pinned to the canvas's top-right corner. */\nexport function CursorCoordsHud({ canvasRef, anchorRef, viewRef, toWorld, offset }: CursorCoordsHudProps) {\n  const toWorldRef = useLatest(toWorld);\n  const [state, setState] = useState<HudState>({\n    client: { x: 0, y: 0 }, world: null, inCanvas: false,\n  });\n  const [fps, setFps] = useState<number>(0);\n  const { ref, style: anchorStyle } = useHostAnchor(\n    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,\n    {\n      align: { x: 'end', y: 'start' },\n      offset: { x: offset?.right ?? 8, y: offset?.top ?? 8 },\n    },\n  );\n\n  // FPS counter: tally frames per rAF tick; flush once a second.\n  const framesRef = useRef(0);\n  const lastFlushRef = useRef(0);\n  const fpsLoop = useVisibleRaf(\n    () => {\n      framesRef.current++;\n      const now = performance.now();\n      const dt = now - lastFlushRef.current;\n      if (dt >= 1000) {\n        setFps(Math.round((framesRef.current * 1000) / dt));\n        framesRef.current = 0;\n        lastFlushRef.current = now;\n      }\n      fpsLoop.request();\n    },\n    // Frames not drawn while hidden are not frames that were slow to draw:\n    // without this the readout would flush a near-zero rate on resume.\n    {\n      onResume: () => {\n        framesRef.current = 0;\n        lastFlushRef.current = performance.now();\n      },\n    },\n  );\n\n  useEffect(() => {\n    lastFlushRef.current = performance.now();\n    fpsLoop.request();\n    return () => fpsLoop.cancel();\n  }, [fpsLoop]);\n\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      const canvas = canvasRef.current;\n      const view = viewRef.current;\n      const client = { x: e.clientX, y: e.clientY };\n      if (!canvas || !view) {\n        setState({ client, world: null, inCanvas: false });\n        return;\n      }\n      const rect = canvas.getBoundingClientRect();\n      const inCanvas =\n        e.clientX >= rect.left && e.clientX <= rect.right &&\n        e.clientY >= rect.top  && e.clientY <= rect.bottom;\n      const [wx, wy] = toWorldRef.current?.(e.clientX, e.clientY)\n        ?? clientToWorld(e.clientX, e.clientY, rect, view);\n      const world = { x: wx, y: wy };\n      setState({ client, world, inCanvas });\n    };\n\n    document.addEventListener('pointermove', onMove);\n\n    return () => {\n      document.removeEventListener('pointermove', onMove);\n    };\n  }, [canvasRef, viewRef, toWorldRef]);\n\n  if (!anchorStyle) return null;\n\n  return (\n    <div ref={ref} className={s.hud} style={anchorStyle}>\n      <dl className={s.readings}>\n        <dt className={s.muted}>fps</dt>\n        <dd>{fps}</dd>\n        <dt className={s.muted}>client</dt>\n        <dd>{point(state.client, 0)}</dd>\n        <dt className={s.muted}>world</dt>\n        {state.world ? (\n          <dd>\n            {point(state.world, 1)}\n            {state.inCanvas ? null : <span className={s.absent}> off-canvas</span>}\n          </dd>\n        ) : (\n          <dd className={s.absent}>— no canvas or view yet</dd>\n        )}\n      </dl>\n    </div>\n  );\n}\n\n/** `(x, y)` at `places` decimals, its negatives written with U+2212. */\nfunction point({ x, y }: { x: number; y: number }, places: number): string {\n  const at = decimal({ places, grouping: false });\n  return `(${qty(x, at).text}, ${qty(y, at).text})`;\n}\n"],"mappings":"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"}

package/dist/canvas/DrawCanvas.js

@@ -1,14 +1,15 @@
-import { viewToMat3 as e } from "../renderer/math/viewToMat3.js";
-import { normalizeView as t } from "../core/viewport/view.js";
-import { useLateContentRedraw as n } from "./useLateContentRedraw.js";
+import { commandFill as e } from "../features/patterns/commandPaint.js";
+import { viewToMat3 as t } from "../renderer/math/viewToMat3.js";
+import { normalizeView as n } from "../core/viewport/view.js";
 import { useFrameLoop as r } from "./useFrameLoop.js";
-import { useRedrawOn as i } from "./useRedrawOn.js";
-import { useCanvasRenderer as a } from "./useCanvasRenderer.js";
-import { useCallback as o, useEffect as s, useLayoutEffect as c, useRef as l } from "react";
-import { assignRef as u, useLatest as d } from "@weasel-js/react";
-import { jsx as f } from "react/jsx-runtime";
+import { useLateContentRedraw as i } from "./useLateContentRedraw.js";
+import { useCanvasRenderer as a, useRedrawOnDensityChange as o, useRedrawOnRestore as s } from "./useCanvasRenderer.js";
+import { useRedrawOn as c } from "./useRedrawOn.js";
+import { useCallback as l, useEffect as u, useLayoutEffect as d, useRef as f } from "react";
+import { assignRef as p, useLatest as m } from "@weasel-js/react";
+import { jsx as h } from "react/jsx-runtime";
 //#region src/canvas/DrawCanvas.tsx
-var p = {
+var g = {
 	x: 0,
 	y: 0,
 	scale: {
@@ -16,52 +17,57 @@ var p = {
 		y: 1
 	}
 };
-function m(m) {
-	let { width: h, height: g, draw: _, background: v, redrawOn: y, dpr: b, className: x, canvasRef: S } = m, C = m.view ? t(m.view) : p, w = l(null), T = o((e) => {
-		w.current = e, u(S, e);
-	}, [S]), { paint: E } = a(), D = d(() => {
-		let t = w.current;
-		if (!t) return !1;
-		let n = typeof _ == "function" ? _({
-			width: h,
-			height: g
-		}) : _, r = [];
-		return v && r.push({
+function _(_) {
+	let { width: v, height: y, draw: b, background: x, redrawOn: S, dpr: C, className: w, canvasRef: T } = _, E = _.view ? n(_.view) : g, D = f(null), O = l((e) => {
+		D.current = e, p(T, e);
+	}, [T]), k = a(), A = m(() => {
+		let n = D.current;
+		if (!n) return !1;
+		let r = typeof b == "function" ? b({
+			width: v,
+			height: y
+		}) : b, i = [], a = x && e(x, {
+			x: 0,
+			y: 0,
+			width: v,
+			height: y
+		});
+		return a && i.push({
 			kind: "path",
 			path: {
 				kind: "rect",
 				x: 0,
 				y: 0,
-				width: h,
-				height: g
+				width: v,
+				height: y
 			},
-			fill: v
-		}), r.push({
+			fill: a
+		}), i.push({
 			kind: "group",
-			transform: e(C),
-			children: [...n]
-		}), E(t, r, C, {
-			width: h,
-			height: g,
-			dpr: b
+			transform: t(E),
+			children: [...r]
+		}), k.paint(n, i, E, {
+			width: v,
+			height: y,
+			dpr: C
 		});
-	}), { requestRedraw: O } = r(o(() => D.current(), [D]), { target: w }), k = l(!1);
-	return c(() => {
-		if (k.current) {
-			O();
+	}), { requestRedraw: j } = r(l(() => A.current(), [A]), { target: D }), M = f(!1);
+	return d(() => {
+		if (M.current) {
+			j();
 			return;
 		}
-		k.current = D.current(), k.current || O();
-	}), n(O), i(y, O), s(() => () => {
-		k.current = !1;
-	}, []), /* @__PURE__ */ f("canvas", {
-		ref: T,
-		width: h,
-		height: g,
-		className: x
+		M.current = A.current(), M.current || j();
+	}), i(j), s(k, j), o(j, C), c(S, j), u(() => () => {
+		M.current = !1;
+	}, []), /* @__PURE__ */ h("canvas", {
+		ref: O,
+		width: v,
+		height: y,
+		className: w
 	});
 }
 //#endregion
-export { m as DrawCanvas };
+export { _ as DrawCanvas };
 
 //# sourceMappingURL=DrawCanvas.js.map

package/dist/canvas/DrawCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawCanvas.js","names":["IDENTITY_VIEW","DrawCanvas","props","view","normalizeView","canvasElRef","useRef","setRefs","useCallback","el","assignRef","canvasRef","paintCanvas","useCanvasRenderer","paintRef","useLatest","content","draw","commands","background","viewToMat3","useFrameLoop","paintedRef","useLayoutEffect","requestRedraw","useLateContentRedraw","useRedrawOn","redrawOn","useEffect"],"sources":["../../src/canvas/DrawCanvas.tsx"],"sourcesContent":["/**\n * `<DrawCanvas>` — a sized, DPR-correct WebGL2 surface that paints a list of\n * draw commands, with no scene, tools or dispatcher behind it.\n *\n * It paints through the same per-canvas renderer as `<SceneViewCanvas>`\n * (`useCanvasRenderer`), on a `useFrameLoop` that stops while the canvas is off\n * screen or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event\n * listeners and emits no inline styles: size the element with `className`.\n */\nimport { useCallback, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { Ref } from 'react';\nimport { assignRef, useLatest } from '@weasel-js/react';\nimport type { FillStyle } from '@weasel-js/paint';\nimport { useFrameLoop } from './useFrameLoop';\nimport { useLateContentRedraw } from './useLateContentRedraw';\nimport { useRedrawOn } from './useRedrawOn';\nimport { useCanvasRenderer } from './useCanvasRenderer';\nimport { viewToMat3 } from '../renderer/math/viewToMat3';\nimport type { DrawCommand } from '../renderer/DrawCommand';\nimport type { RedrawSource } from '../core/layers/render';\nimport { normalizeView, type View } from '../core/viewport/view';\n\n/** What a `<DrawCanvas>` paints: a command list, or a function returning one\n *  that is called on every paint with the surface's CSS-pixel size. */\nexport type DrawCanvasDraw =\n  | readonly DrawCommand[]\n  | ((size: { width: number; height: number }) => readonly DrawCommand[]);\n\n/** Props for `<DrawCanvas>`. */\nexport interface DrawCanvasProps {\n  /** CSS-pixel width. The drawing buffer is `width × dpr`. */\n  width: number;\n  /** CSS-pixel height. */\n  height: number;\n  /** The commands to paint, in the coordinate space `view` maps to the\n   *  screen — CSS pixels when `view` is omitted. A new array repaints on the\n   *  next frame. A function is read at paint time, so state it reads outside\n   *  React repaints when one of `redrawOn`'s sources notifies. */\n  draw: DrawCanvasDraw;\n  /** Camera over `draw`'s commands. Defaults to the identity view. */\n  view?: View;\n  /** Fills the whole surface beneath `draw`, in screen space. The canvas is\n   *  transparent without it. */\n  background?: FillStyle;\n  /** External state a `draw` function reads. Each source is subscribed while\n   *  mounted and repaints the canvas when it notifies. */\n  redrawOn?: readonly RedrawSource[];\n  /** Device-pixel ratio. Defaults to `window.devicePixelRatio`, read per\n   *  paint. */\n  dpr?: number;\n  /** CSS class for the `<canvas>` element. */\n  className?: string;\n  /** Receives the underlying `<canvas>`, for pointer listeners or `toBlob`. */\n  canvasRef?: Ref<HTMLCanvasElement>;\n}\n\nconst IDENTITY_VIEW: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };\n\n/**\n * Paint draw commands onto a canvas of its own. For a surface that only draws —\n * a package demo, a swatch, a preview — where a `<SceneCanvas>` would bring a\n * scene, tools and an input dispatcher that nothing uses.\n */\nexport function DrawCanvas(props: DrawCanvasProps) {\n  const { width, height, draw, background, redrawOn, dpr, className, canvasRef } = props;\n  const view = props.view ? normalizeView(props.view) : IDENTITY_VIEW;\n\n  const canvasElRef = useRef<HTMLCanvasElement | null>(null);\n  const setRefs = useCallback((el: HTMLCanvasElement | null) => {\n    canvasElRef.current = el;\n    assignRef(canvasRef, el);\n  }, [canvasRef]);\n\n  const { paint: paintCanvas } = useCanvasRenderer();\n  const paint = (): boolean => {\n    const el = canvasElRef.current;\n    if (!el) return false;\n    const content = typeof draw === 'function' ? draw({ width, height }) : draw;\n    const commands: DrawCommand[] = [];\n    if (background) {\n      commands.push({ kind: 'path', path: { kind: 'rect', x: 0, y: 0, width, height }, fill: background });\n    }\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return paintCanvas(el, commands, view, { width, height, dpr });\n  };\n  const paintRef = useLatest(paint);\n  const { requestRedraw } = useFrameLoop(\n    useCallback(() => paintRef.current(), [paintRef]),\n    { target: canvasElRef },\n  );\n\n  // Every committed render marks the surface dirty; the first paints in place\n  // so the first frame shown is the content rather than a blank canvas.\n  const paintedRef = useRef(false);\n  useLayoutEffect(() => {\n    if (paintedRef.current) { requestRedraw(); return; }\n    paintedRef.current = paintRef.current();\n    if (!paintedRef.current) requestRedraw();\n  });\n\n  useLateContentRedraw(requestRedraw);\n  useRedrawOn(redrawOn, requestRedraw);\n\n  // `useCanvasRenderer` frees the renderer on unmount; a remount (StrictMode)\n  // paints its first frame in place again.\n  useEffect(() => () => { paintedRef.current = false; }, []);\n\n  return <canvas ref={setRefs} width={width} height={height} className={className} />;\n}\n"],"mappings":";;;;;;;;;;AAwDA,IAAMA,IAAsB;CAAE,GAAG;CAAG,GAAG;CAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;AAAE;AAOhE,SAAgBC,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,SAAM,eAAY,aAAU,QAAK,cAAW,iBAAcC,GAC3EC,IAAOD,EAAM,OAAOE,EAAcF,EAAM,IAAI,IAAIF,GAEhDK,IAAcC,EAAiC,IAAI,GACnDC,IAAUC,GAAa,MAAiC;EAE5D,AADA,EAAY,UAAUC,GACtBC,EAAUC,GAAWF,CAAE;CACzB,GAAG,CAACE,CAAS,CAAC,GAER,EAAE,OAAOC,MAAgBC,EAAkB,GAY3CC,IAAWC,QAXY;EAC3B,IAAMN,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMO,IAAU,OAAOC,KAAS,aAAaA,EAAK;GAAE;GAAO;EAAO,CAAC,IAAIA,GACjEC,IAA0B,CAAC;EAKjC,OAJIC,KACFD,EAAS,KAAK;GAAE,MAAM;GAAQ,MAAM;IAAE,MAAM;IAAQ,GAAG;IAAG,GAAG;IAAG;IAAO;GAAO;GAAG,MAAMC;EAAW,CAAC,GAErGD,EAAS,KAAK;GAAE,MAAM;GAAS,WAAWE,EAAWjB,CAAI;GAAG,UAAU,CAAC,GAAGa,CAAO;EAAE,CAAC,GAC7EJ,EAAYH,GAAIS,GAAUf,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,CACgC,GAC1B,EAAE,qBAAkBkB,EACxBb,QAAkBM,EAAS,QAAQ,GAAG,CAACA,CAAQ,CAAC,GAChD,EAAE,QAAQT,EAAY,CACxB,GAIMiB,IAAahB,EAAO,EAAK;CAc/B,OAbAiB,QAAsB;EACpB,IAAID,EAAW,SAAS;GAAE,EAAc;GAAG;EAAQ;EAEnD,AADA,EAAW,UAAUR,EAAS,QAAQ,GACjCQ,EAAW,WAASE,EAAc;CACzC,CAAC,GAEDC,EAAqBD,CAAa,GAClCE,EAAYC,GAAUH,CAAa,GAInCI,cAAsB;EAAE,EAAW,UAAU;CAAO,GAAG,CAAC,CAAC,GAElD,kBAAC,UAAD;EAAQ,KAAKrB;EAAgB;EAAe;EAAmB;CAAY,CAAA;AACpF"}
+{"version":3,"file":"DrawCanvas.js","names":["IDENTITY_VIEW","DrawCanvas","props","view","normalizeView","canvasElRef","useRef","setRefs","useCallback","el","assignRef","canvasRef","lease","useCanvasRenderer","paintRef","useLatest","content","draw","commands","fill","background","commandFill","viewToMat3","useFrameLoop","paintedRef","useLayoutEffect","requestRedraw","useLateContentRedraw","useRedrawOnRestore","useRedrawOnDensityChange","dpr","useRedrawOn","redrawOn","useEffect"],"sources":["../../src/canvas/DrawCanvas.tsx"],"sourcesContent":["/**\n * `<DrawCanvas>` — a sized, DPR-correct WebGL2 surface that paints a list of\n * draw commands, with no scene, tools or dispatcher behind it.\n *\n * It paints through the same per-canvas renderer as `<SceneViewCanvas>`\n * (`useCanvasRenderer`), on a `useFrameLoop` that stops while the canvas is off\n * screen or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event\n * listeners. Its size is `width` × `height`, which the renderer writes as\n * inline style, so `className` positions the element and cannot resize it.\n */\nimport { useCallback, useEffect, useLayoutEffect, useRef } from 'react';\nimport { commandFill } from '../features/patterns/commandPaint';\nimport type { Ref } from 'react';\nimport { assignRef, useLatest } from '@weasel-js/react';\nimport type { FillStyle } from '@weasel-js/paint';\nimport { useFrameLoop } from './useFrameLoop';\nimport { useLateContentRedraw } from './useLateContentRedraw';\nimport { useRedrawOn } from './useRedrawOn';\nimport { useCanvasRenderer, useRedrawOnDensityChange, useRedrawOnRestore } from './useCanvasRenderer';\nimport { viewToMat3 } from '../renderer/math/viewToMat3';\nimport type { DrawCommand } from '../renderer/DrawCommand';\nimport type { RedrawSource } from '../core/layers/render';\nimport { normalizeView, type View } from '../core/viewport/view';\n\n/** What a `<DrawCanvas>` paints: a command list, or a function returning one\n *  that is called on every paint with the surface's CSS-pixel size. */\nexport type DrawCanvasDraw =\n  | readonly DrawCommand[]\n  | ((size: { width: number; height: number }) => readonly DrawCommand[]);\n\n/** Props for `<DrawCanvas>`. */\nexport interface DrawCanvasProps {\n  /** CSS-pixel width. The drawing buffer is `width × dpr`. */\n  width: number;\n  /** CSS-pixel height. */\n  height: number;\n  /** The commands to paint, in the coordinate space `view` maps to the\n   *  screen — CSS pixels when `view` is omitted. A new array repaints on the\n   *  next frame. A function is read at paint time, so state it reads outside\n   *  React repaints when one of `redrawOn`'s sources notifies. */\n  draw: DrawCanvasDraw;\n  /** Camera over `draw`'s commands. Defaults to the identity view. */\n  view?: View;\n  /** Fills the whole surface beneath `draw`, in screen space. The canvas is\n   *  transparent without it. */\n  background?: FillStyle;\n  /** External state a `draw` function reads. Each source is subscribed while\n   *  mounted and repaints the canvas when it notifies. */\n  redrawOn?: readonly RedrawSource[];\n  /** Device-pixel ratio. Defaults to `window.devicePixelRatio`, read per\n   *  paint. */\n  dpr?: number;\n  /** CSS class for the `<canvas>` element. */\n  className?: string;\n  /** Receives the underlying `<canvas>`, for pointer listeners or `toBlob`. */\n  canvasRef?: Ref<HTMLCanvasElement>;\n}\n\nconst IDENTITY_VIEW: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };\n\n/**\n * Paint draw commands onto a canvas of its own. For a surface that only draws —\n * a package demo, a swatch, a preview — where a `<SceneCanvas>` would bring a\n * scene, tools and an input dispatcher that nothing uses.\n */\nexport function DrawCanvas(props: DrawCanvasProps) {\n  const { width, height, draw, background, redrawOn, dpr, className, canvasRef } = props;\n  const view = props.view ? normalizeView(props.view) : IDENTITY_VIEW;\n\n  const canvasElRef = useRef<HTMLCanvasElement | null>(null);\n  const setRefs = useCallback((el: HTMLCanvasElement | null) => {\n    canvasElRef.current = el;\n    assignRef(canvasRef, el);\n  }, [canvasRef]);\n\n  const lease = useCanvasRenderer();\n  const paint = (): boolean => {\n    const el = canvasElRef.current;\n    if (!el) return false;\n    const content = typeof draw === 'function' ? draw({ width, height }) : draw;\n    const commands: DrawCommand[] = [];\n    const fill = background && commandFill(background, { x: 0, y: 0, width, height });\n    if (fill) commands.push({ kind: 'path', path: { kind: 'rect', x: 0, y: 0, width, height }, fill });\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return lease.paint(el, commands, view, { width, height, dpr });\n  };\n  const paintRef = useLatest(paint);\n  const { requestRedraw } = useFrameLoop(\n    useCallback(() => paintRef.current(), [paintRef]),\n    { target: canvasElRef },\n  );\n\n  // Every committed render marks the surface dirty; the first paints in place\n  // so the first frame shown is the content rather than a blank canvas.\n  const paintedRef = useRef(false);\n  useLayoutEffect(() => {\n    if (paintedRef.current) { requestRedraw(); return; }\n    paintedRef.current = paintRef.current();\n    if (!paintedRef.current) requestRedraw();\n  });\n\n  useLateContentRedraw(requestRedraw);\n  useRedrawOnRestore(lease, requestRedraw);\n  useRedrawOnDensityChange(requestRedraw, dpr);\n  useRedrawOn(redrawOn, requestRedraw);\n\n  // `useCanvasRenderer` frees the renderer on unmount; a remount (StrictMode)\n  // paints its first frame in place again.\n  useEffect(() => () => { paintedRef.current = false; }, []);\n\n  return <canvas ref={setRefs} width={width} height={height} className={className} />;\n}\n"],"mappings":";;;;;;;;;;;AA0DA,IAAMA,IAAsB;CAAE,GAAG;CAAG,GAAG;CAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;AAAE;AAOhE,SAAgBC,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,SAAM,eAAY,aAAU,QAAK,cAAW,iBAAcC,GAC3EC,IAAOD,EAAM,OAAOE,EAAcF,EAAM,IAAI,IAAIF,GAEhDK,IAAcC,EAAiC,IAAI,GACnDC,IAAUC,GAAa,MAAiC;EAE5D,AADA,EAAY,UAAUC,GACtBC,EAAUC,GAAWF,CAAE;CACzB,GAAG,CAACE,CAAS,CAAC,GAERC,IAAQC,EAAkB,GAW1BC,IAAWC,QAVY;EAC3B,IAAMN,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMO,IAAU,OAAOC,KAAS,aAAaA,EAAK;GAAE;GAAO;EAAO,CAAC,IAAIA,GACjEC,IAA0B,CAAC,GAC3BC,IAAOC,KAAcC,EAAYD,GAAY;GAAE,GAAG;GAAG,GAAG;GAAG;GAAO;EAAO,CAAC;EAGhF,OAFID,KAAMD,EAAS,KAAK;GAAE,MAAM;GAAQ,MAAM;IAAE,MAAM;IAAQ,GAAG;IAAG,GAAG;IAAG;IAAO;GAAO;GAAG;EAAK,CAAC,GACjGA,EAAS,KAAK;GAAE,MAAM;GAAS,WAAWI,EAAWnB,CAAI;GAAG,UAAU,CAAC,GAAGa,CAAO;EAAE,CAAC,GAC7EJ,EAAM,MAAMH,GAAIS,GAAUf,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,CACgC,GAC1B,EAAE,qBAAkBoB,EACxBf,QAAkBM,EAAS,QAAQ,GAAG,CAACA,CAAQ,CAAC,GAChD,EAAE,QAAQT,EAAY,CACxB,GAIMmB,IAAalB,EAAO,EAAK;CAgB/B,OAfAmB,QAAsB;EACpB,IAAID,EAAW,SAAS;GAAE,EAAc;GAAG;EAAQ;EAEnD,AADA,EAAW,UAAUV,EAAS,QAAQ,GACjCU,EAAW,WAASE,EAAc;CACzC,CAAC,GAEDC,EAAqBD,CAAa,GAClCE,EAAmBhB,GAAOc,CAAa,GACvCG,EAAyBH,GAAeI,CAAG,GAC3CC,EAAYC,GAAUN,CAAa,GAInCO,cAAsB;EAAE,EAAW,UAAU;CAAO,GAAG,CAAC,CAAC,GAElD,kBAAC,UAAD;EAAQ,KAAK1B;EAAgB;EAAe;EAAmB;CAAY,CAAA;AACpF"}

package/dist/canvas/MinimapCanvas.js

@@ -1,15 +1,15 @@
 import { normalizeView as e } from "../core/viewport/view.js";
 import { AUTO_POSE_DESCRIPTOR as t } from "../interactions/actions/resize/autoPoseDescriptor.js";
-import { usePointerContext as n, usePointerPosition as r } from "../features/pointer/PointerContext.js";
-import { PointerProviderIfRoot as i } from "./SceneCanvas/PointerProviderIfRoot.js";
-import { accentColorOf as a } from "./accentColor.js";
-import { SceneViewCanvas as o } from "./SceneViewCanvas.js";
-import { MINIMAP_CENTER as s, MINIMAP_PAN as c, minimapCenterAction as l, minimapPanAction as u } from "../features/minimap/actions.js";
-import { createLinkedCursorLayer as d } from "../features/minimap/layers.js";
-import { computeFitView as f, computeIndicatorCommand as p } from "./minimapMath.js";
+import { SceneViewCanvas as n } from "./SceneViewCanvas.js";
+import { usePointerContext as r, usePointerPosition as i } from "../features/pointer/PointerContext.js";
+import { PointerProviderIfRoot as a } from "./SceneCanvas/PointerProviderIfRoot.js";
+import { MINIMAP_CENTER as o, MINIMAP_PAN as s, minimapCenterAction as c, minimapPanAction as l } from "../features/minimap/actions.js";
+import { computeFitView as u, computeIndicatorCommand as d } from "./minimapMath.js";
+import { createLinkedCursorLayer as f } from "../features/minimap/layers.js";
+import { accentColorOf as p } from "./accentColor.js";
 import { useCallback as m, useEffect as h, useMemo as g, useRef as ee, useSyncExternalStore as te } from "react";
 import { assignRef as _, useLatest as v } from "@weasel-js/react";
-import { ActionsProvider as y, ActiveToolContextProvider as b, DepRegistryProvider as x, useActionsRegistry as S, useDepSource as C, useGestureDispatcher as ne } from "@weasel-js/routing/react";
+import { ActionsProvider as y, ActiveToolContextProvider as b, DepRegistryProvider as x, useActionsRegistry as S, useDepSource as ne, useGestureDispatcher as C } from "@weasel-js/routing/react";
 import { jsx as w } from "react/jsx-runtime";
 //#region src/canvas/MinimapCanvas.tsx
 var T = {
@@ -17,10 +17,10 @@ var T = {
 	eligibility: { always: !0 },
 	bindings: [{
 		spec: { kind: "pointerDown" },
-		actionId: s
+		actionId: o
 	}, {
 		spec: { kind: "drag" },
-		actionId: c
+		actionId: s
 	}]
 }, E = /* @__PURE__ */ new Map([[T.id, T]]), D = {
 	wheel: !1,
@@ -28,21 +28,22 @@ var T = {
 	contextMenu: !1,
 	ingest: !1
 };
-function O(i) {
-	let { scene: s, mainView: c, mainViewDims: y, onMainViewChange: b, width: x, height: T, drawOne: O, alphaFor: k, layerVisibility: A, layerOrder: j, animator: M, fit: N = "scene", poseDescriptor: re, indicatorStyle: P, className: F, canvasRef: I, id: L = "minimap" } = i, R = e(c), z = te(s.subscribe, s.getVersion, s.getVersion), B = re ?? t, V = g(() => f(s, {
+function O(a) {
+	let { scene: o, mainView: s, mainViewDims: y, onMainViewChange: b, width: x, height: T, drawOne: O, alphaFor: k, layerVisibility: A, layerOrder: j, animator: M, fit: N = "scene", poseDescriptor: re, indicatorStyle: P, className: F, canvasRef: I, id: L = "minimap" } = a, R = e(s), z = te(o.subscribe, o.getVersion, o.getVersion), B = re ?? t, V = g(() => e(u(o, {
 		width: x,
 		height: T
-	}, N, B), [
-		s,
+	}, N, B)), [
+		o,
 		z,
 		x,
 		T,
 		N,
 		B
-	]), H = g(() => p(R, y, P), [
+	]), H = g(() => d(R, y, P, V), [
 		R,
 		y,
-		P
+		P,
+		V
 	]), U = ee(null), W = v(R), G = v(y), K = v(b), q = v(V), J = g(() => ({
 		get: () => W.current,
 		set: (e) => K.current(e),
@@ -52,11 +53,11 @@ function O(i) {
 		K,
 		G
 	]);
-	C("rootView", () => J);
+	ne("rootView", () => J);
 	let Y = S();
 	h(() => {
 		if (!Y) return;
-		let e = [Y.register(l()), Y.register(u())];
+		let e = [Y.register(c()), Y.register(l())];
 		return () => {
 			for (let t of e) t();
 		};
@@ -68,7 +69,7 @@ function O(i) {
 			y: r.y + (t - (n?.top ?? 0)) / r.scale.y
 		};
 	}, [q]);
-	ne({
+	C({
 		canvasRef: U,
 		actions: Y,
 		entriesById: E,
@@ -76,7 +77,7 @@ function O(i) {
 		keyboard: !1,
 		channels: D
 	});
-	let Z = n();
+	let Z = r();
 	h(() => {
 		let e = U.current;
 		if (!e || !Z) return;
@@ -98,10 +99,10 @@ function O(i) {
 		X,
 		L
 	]);
-	let Q = r(), $ = g(() => d({
+	let Q = i(), $ = g(() => f({
 		id: `${L}.cursor`,
 		pointer: () => Q,
-		color: () => a(U.current)
+		color: () => p(U.current)
 	}), [L, Q]), ie = g(() => [H, ...$.draw({ viewId: L }, V, {
 		width: x,
 		height: T
@@ -115,8 +116,8 @@ function O(i) {
 	]), ae = m((e) => {
 		U.current = e, _(I, e);
 	}, [I]);
-	return /* @__PURE__ */ w(o, {
-		scene: s,
+	return /* @__PURE__ */ w(n, {
+		scene: o,
 		view: V,
 		width: x,
 		height: T,
@@ -131,7 +132,7 @@ function O(i) {
 	});
 }
 function k(e) {
-	return /* @__PURE__ */ w(x, { children: /* @__PURE__ */ w(y, { children: /* @__PURE__ */ w(b, { children: /* @__PURE__ */ w(i, { children: /* @__PURE__ */ w(O, { ...e }) }) }) }) });
+	return /* @__PURE__ */ w(x, { children: /* @__PURE__ */ w(y, { children: /* @__PURE__ */ w(b, { children: /* @__PURE__ */ w(a, { children: /* @__PURE__ */ w(O, { ...e }) }) }) }) });
 }
 //#endregion
 export { k as MinimapCanvas };

package/dist/canvas/MinimapCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinimapCanvas.js","names":["MINIMAP_INPUT","MINIMAP_CENTER","MINIMAP_PAN","TOOLS_BY_ID","CHANNELS","MinimapCanvasInner","mainViewProp","props","mainView","normalizeView","sceneVersion","useSyncExternalStore","scene","descriptor","poseDescriptor","AUTO_POSE_DESCRIPTOR","fitView","useMemo","computeFitView","fit","width","height","indicatorCmd","computeIndicatorCommand","mainViewDims","indicatorStyle","localCanvasRef","useRef","mainViewRef","useLatest","mainViewDimsRef","onMainViewChangeRef","onMainViewChange","fitViewRef","rootView","v","actions","useActionsRegistry","off","minimapCenterAction","minimapPanAction","u","clientToWorld","useCallback","rect","fv","cx","cy","pointerStore","usePointerContext","el","onMove","w","id","onLeave","pointer","usePointerPosition","cursorLayer","createLinkedCursorLayer","accentColorOf","extraCommands","setCanvasRef","assignRef","canvasRef","SceneViewCanvas","MinimapCanvas","DepRegistryProvider","ActionsProvider","ActiveToolContextProvider","PointerProviderIfRoot"],"sources":["../../src/canvas/MinimapCanvas.tsx"],"sourcesContent":["/**\n * `<MinimapCanvas>` — opinionated minimap on a canvas of its own, built on\n * `<SceneViewCanvas>`.\n *\n * Renders the same `scene` the main canvas is showing, through a derived\n * \"fit\" view, and overlays a dashed visible-window indicator showing where\n * the main canvas is currently looking. Press anywhere in the minimap to\n * recenter the main view on that world point; drag to pan continuously.\n *\n * Input runs on a dispatcher of its own, through the same `minimap.center` /\n * `minimap.pan` actions the in-surface minimap (`createMinimapContribution`)\n * binds. It publishes its pointer into the pointer store in scope, and draws a\n * crosshair wherever that store says the pointer is on another surface — put\n * one `<PointerContextProvider>` around it and the main canvas for linked\n * cursors both ways.\n */\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport type { Ref } from 'react';\nimport {\n  ActionsProvider,\n  ActiveToolContextProvider,\n  DepRegistryProvider,\n  useActionsRegistry,\n  useDepSource,\n  useGestureDispatcher,\n} from '@weasel-js/routing/react';\nimport { assignRef, useLatest } from '@weasel-js/react';\nimport type { Tool } from '@weasel-js/routing';\nimport { PointerProviderIfRoot } from './SceneCanvas/PointerProviderIfRoot';\nimport { usePointerContext, usePointerPosition } from 'features/pointer/PointerContext';\nimport {\n  MINIMAP_CENTER, MINIMAP_PAN, minimapCenterAction, minimapPanAction,\n} from 'features/minimap/actions';\nimport { createLinkedCursorLayer } from 'features/minimap/layers';\nimport type { ViewApi } from 'interactions/actions/depSchema';\nimport { SceneViewCanvas } from './SceneViewCanvas';\nimport {\n  computeFitView,\n  computeIndicatorCommand,\n} from './minimapMath';\nimport type { IndicatorStyle, MinimapFit } from './minimapMath';\nimport type { SceneViewDrawOne, SceneViewLayers } from './sceneViewRender';\nimport type { DrawCommand } from '../renderer/DrawCommand';\nimport { normalizeView, type View } from '../core/viewport/view';\nimport type { Scene } from '../core/scene/types';\nimport type { PoseDescriptor } from '../core/geometry/poseDescriptor';\nimport type { Animator } from '../animation/types';\nimport { AUTO_POSE_DESCRIPTOR } from '../interactions/actions/resize/autoPoseDescriptor';\nimport { accentColorOf } from './accentColor';\n\n/** Props for `<MinimapCanvas>`. */\nexport interface MinimapCanvasProps<TData, TLayer extends string, TPose> {\n  /** Same scene the main canvas is rendering. */\n  scene: Scene<TData, TLayer, TPose>;\n  /** Main canvas's view — used to position the visible-window indicator and\n   *  to preserve `scale` when the minimap recenters. */\n  mainView: View;\n  /** Main canvas's CSS-pixel dims. Used to compute the visible-window rect\n   *  and the recenter offset. */\n  mainViewDims: { width: number; height: number };\n  /** Setter called on click (single recenter) and during drag (continuous\n   *  recenter). Receives a `View` with the same `scale` as `mainView` and\n   *  `(x, y)` shifted so the pointer's world point lands at the main\n   *  canvas's center. */\n  onMainViewChange: (next: View) => void;\n  /** Minimap's own CSS-pixel dims. */\n  width: number;\n  height: number;\n  /** Consumer's draw callback. Applied through the derived fit view; same\n   *  signature as `<SceneCanvas>`'s scene-slot `drawOne` so the consumer\n   *  can reuse it (typically simplified — just colored AABBs). */\n  drawOne: SceneViewDrawOne<TData, TLayer, TPose>;\n  /** Fit policy. Defaults to `\"scene\"` (AABB union of leaf poses). See\n   *  `MinimapFit` for the full shape.\n   *\n   *  Framing is derived from **document** poses, not `scene.overrides` — a\n   *  node moved by an override paints where the override puts it, outside the\n   *  frame if it goes there, rather than making the whole minimap rescale on\n   *  every frame of a drag or a settle. */\n  fit?: MinimapFit<TData, TLayer, TPose>;\n  /** How to read poses. Default `AUTO_POSE_DESCRIPTOR`. */\n  poseDescriptor?: PoseDescriptor<TPose>;\n  /** Optional per-id alpha multiplier, mirroring `<SceneCanvas>`'s scene-slot\n   *  `alphaFor`. Pass the same function the main canvas uses so a\n   *  scoping-dim treatment shows up in the minimap too. */\n  alphaFor?: (id: string) => number;\n  /** Hide scene layers in the minimap, keyed `scene:<layerId>` as on\n   *  `<SceneCanvas>` — pass the main canvas's map so both show the same set. */\n  layerVisibility?: SceneViewLayers['layerVisibility'];\n  /** Paint order for the minimap, keyed as `layerVisibility`. */\n  layerOrder?: SceneViewLayers['layerOrder'];\n  /** Optional animator: the minimap repaints on its ticks and paints its\n   *  `colorOverrides`. Pass the main canvas's animator so both show the same\n   *  colors. */\n  animator?: Animator;\n  /** Visual tuning of the indicator stroke. */\n  indicatorStyle?: IndicatorStyle;\n  /** CSS class for sizing / positioning the canvas. */\n  className?: string;\n  /** Forwarded ref to the underlying `<canvas>`. */\n  canvasRef?: Ref<HTMLCanvasElement>;\n  /** The view id this minimap publishes its pointer under. Default\n   *  `'minimap'`. */\n  id?: string;\n}\n\n/** The minimap's own bindings. Unscoped: this dispatcher routes no views, so\n *  every input on it is the minimap's. */\nconst MINIMAP_INPUT: Tool = {\n  id: 'minimap',\n  eligibility: { always: true },\n  bindings: [\n    { spec: { kind: 'pointerDown' }, actionId: MINIMAP_CENTER },\n    { spec: { kind: 'drag' }, actionId: MINIMAP_PAN },\n  ],\n};\nconst TOOLS_BY_ID: ReadonlyMap<string, Tool> = new Map([[MINIMAP_INPUT.id, MINIMAP_INPUT]]);\nconst CHANNELS = { wheel: false, pinch: false, contextMenu: false, ingest: false } as const;\n\nfunction MinimapCanvasInner<TData, TLayer extends string, TPose>(\n  props: MinimapCanvasProps<TData, TLayer, TPose>,\n) {\n  const {\n    scene,\n    mainView: mainViewProp,\n    mainViewDims,\n    onMainViewChange,\n    width,\n    height,\n    drawOne,\n    alphaFor,\n    layerVisibility,\n    layerOrder,\n    animator,\n    fit = 'scene',\n    poseDescriptor,\n    indicatorStyle,\n    className,\n    canvasRef,\n    id = 'minimap',\n  } = props;\n  const mainView = normalizeView(mainViewProp);\n\n  // Subscribe to scene version so the fit view recomputes when the scene\n  // mutates. `<SceneViewCanvas>` also subscribes, but it owns its own\n  // rendering; we need the version *here* to invalidate the memoized fit.\n  const sceneVersion = useSyncExternalStore(\n    scene.subscribe,\n    scene.getVersion,\n    scene.getVersion,\n  );\n\n  const descriptor = (poseDescriptor ?? AUTO_POSE_DESCRIPTOR) as PoseDescriptor<TPose>;\n\n  const fitView = useMemo<View>(() => {\n    return computeFitView(scene, { width, height }, fit, descriptor);\n    // `sceneVersion` participates so the memo re-evaluates after scene mutations.\n    // `descriptor` is stable when the prop is omitted.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scene, sceneVersion, width, height, fit, descriptor]);\n\n  const indicatorCmd = useMemo<DrawCommand>(() => {\n    return computeIndicatorCommand(mainView, mainViewDims, indicatorStyle);\n  }, [mainView, mainViewDims, indicatorStyle]);\n\n  // -------------------------------------------------------------------------\n  // Input\n  // -------------------------------------------------------------------------\n  //\n  // The \"latest\" pattern (refs holding the current mainView / dims / setter\n  // / fitView) lets the dep and the listeners read up-to-date values without\n  // re-binding every frame.\n\n  const localCanvasRef = useRef<HTMLCanvasElement | null>(null);\n  const mainViewRef = useLatest(mainView);\n  const mainViewDimsRef = useLatest(mainViewDims);\n  const onMainViewChangeRef = useLatest(onMainViewChange);\n  const fitViewRef = useLatest(fitView);\n\n  // The main canvas's camera, which is what the minimap's actions move.\n  const rootView = useMemo<ViewApi>(() => ({\n    get: () => mainViewRef.current,\n    set: (v) => onMainViewChangeRef.current(v),\n    hostSize: () => mainViewDimsRef.current,\n  }), [mainViewRef, onMainViewChangeRef, mainViewDimsRef]);\n  useDepSource('rootView', () => rootView);\n\n  const actions = useActionsRegistry();\n  useEffect(() => {\n    if (!actions) return;\n    const off = [actions.register(minimapCenterAction()), actions.register(minimapPanAction())];\n    return () => { for (const u of off) u(); };\n  }, [actions]);\n\n  /** Client point → world, through the fit camera. */\n  const clientToWorld = useCallback((cx: number, cy: number) => {\n    const rect = localCanvasRef.current?.getBoundingClientRect();\n    const fv = fitViewRef.current;\n    return {\n      x: fv.x + (cx - (rect?.left ?? 0)) / fv.scale.x,\n      y: fv.y + (cy - (rect?.top ?? 0)) / fv.scale.y,\n    };\n  }, [fitViewRef]);\n\n  useGestureDispatcher({\n    canvasRef: localCanvasRef,\n    actions: actions!,\n    entriesById: TOOLS_BY_ID,\n    clientToWorld,\n    keyboard: false,\n    channels: CHANNELS,\n  });\n\n  // -------------------------------------------------------------------------\n  // Linked cursor\n  // -------------------------------------------------------------------------\n\n  const pointerStore = usePointerContext();\n  useEffect(() => {\n    const el = localCanvasRef.current;\n    if (!el || !pointerStore) return;\n    const onMove = (e: PointerEvent): void => {\n      const w = clientToWorld(e.clientX, e.clientY);\n      pointerStore.set({ worldX: w.x, worldY: w.y, viewId: id });\n    };\n    const onLeave = (e: PointerEvent): void => {\n      if (e.buttons !== 0) return;\n      if (pointerStore.get()?.viewId === id) pointerStore.set(null);\n    };\n    el.addEventListener('pointermove', onMove);\n    el.addEventListener('pointerleave', onLeave);\n    return () => {\n      el.removeEventListener('pointermove', onMove);\n      el.removeEventListener('pointerleave', onLeave);\n    };\n  }, [pointerStore, clientToWorld, id]);\n\n  const pointer = usePointerPosition();\n  const cursorLayer = useMemo(() => createLinkedCursorLayer({\n    id: `${id}.cursor`,\n    pointer: () => pointer,\n    color: () => accentColorOf(localCanvasRef.current),\n  }), [id, pointer]);\n\n  const extraCommands = useMemo<DrawCommand[]>(() => [\n    indicatorCmd,\n    ...cursorLayer.draw({ viewId: id }, fitView, { width, height }),\n  ], [indicatorCmd, cursorLayer, id, fitView, width, height]);\n\n  // `<SceneViewCanvas>` doesn't expose its element except via `canvasRef`, so\n  // we route both our internal ref and the consumer's ref through one setter.\n  const setCanvasRef = useCallback((el: HTMLCanvasElement | null) => {\n    localCanvasRef.current = el;\n    assignRef(canvasRef, el);\n  }, [canvasRef]);\n\n  return (\n    <SceneViewCanvas\n      scene={scene}\n      view={fitView}\n      width={width}\n      height={height}\n      drawOne={drawOne}\n      extraCommands={extraCommands}\n      alphaFor={alphaFor}\n      layerVisibility={layerVisibility}\n      layerOrder={layerOrder}\n      animator={animator}\n      className={className}\n      canvasRef={setCanvasRef}\n    />\n  );\n}\n\n/**\n * Opinionated minimap. See `MinimapCanvasProps` for the full surface and\n * the module docstring for the rendering / input model.\n *\n * Its dispatcher, actions and deps are its own, so it never competes with\n * the main canvas for input. The pointer store is shared when one is in scope.\n *\n * `forwardRef` is not used because the component is generic over\n * `<TData, TLayer, TPose>` and React's `forwardRef` erases generics. The\n * `canvasRef` prop is the plain-prop equivalent.\n */\nexport function MinimapCanvas<TData, TLayer extends string, TPose>(\n  props: MinimapCanvasProps<TData, TLayer, TPose>,\n) {\n  return (\n    <DepRegistryProvider>\n      <ActionsProvider>\n        <ActiveToolContextProvider>\n          <PointerProviderIfRoot>\n            <MinimapCanvasInner {...props} />\n          </PointerProviderIfRoot>\n        </ActiveToolContextProvider>\n      </ActionsProvider>\n    </DepRegistryProvider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MinimapCanvas.js","names":["MINIMAP_INPUT","MINIMAP_CENTER","MINIMAP_PAN","TOOLS_BY_ID","CHANNELS","MinimapCanvasInner","mainViewProp","props","mainView","normalizeView","sceneVersion","useSyncExternalStore","scene","descriptor","poseDescriptor","AUTO_POSE_DESCRIPTOR","fitView","useMemo","computeFitView","fit","width","height","indicatorCmd","computeIndicatorCommand","mainViewDims","indicatorStyle","localCanvasRef","useRef","mainViewRef","useLatest","mainViewDimsRef","onMainViewChangeRef","onMainViewChange","fitViewRef","rootView","v","actions","useActionsRegistry","off","minimapCenterAction","minimapPanAction","u","clientToWorld","useCallback","rect","fv","cx","cy","pointerStore","usePointerContext","el","onMove","w","id","onLeave","pointer","usePointerPosition","cursorLayer","createLinkedCursorLayer","accentColorOf","extraCommands","setCanvasRef","assignRef","canvasRef","SceneViewCanvas","MinimapCanvas","DepRegistryProvider","ActionsProvider","ActiveToolContextProvider","PointerProviderIfRoot"],"sources":["../../src/canvas/MinimapCanvas.tsx"],"sourcesContent":["/**\n * `<MinimapCanvas>` — opinionated minimap on a canvas of its own, built on\n * `<SceneViewCanvas>`.\n *\n * Renders the same `scene` the main canvas is showing, through a derived\n * \"fit\" view, and overlays a dashed visible-window indicator showing where\n * the main canvas is currently looking. Press anywhere in the minimap to\n * recenter the main view on that world point; drag to pan continuously.\n *\n * Input runs on a dispatcher of its own, through the same `minimap.center` /\n * `minimap.pan` actions the in-surface minimap (`createMinimapContribution`)\n * binds. It publishes its pointer into the pointer store in scope, and draws a\n * crosshair wherever that store says the pointer is on another surface — put\n * one `<PointerContextProvider>` around it and the main canvas for linked\n * cursors both ways.\n */\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport type { Ref } from 'react';\nimport {\n  ActionsProvider,\n  ActiveToolContextProvider,\n  DepRegistryProvider,\n  useActionsRegistry,\n  useDepSource,\n  useGestureDispatcher,\n} from '@weasel-js/routing/react';\nimport { assignRef, useLatest } from '@weasel-js/react';\nimport type { Tool } from '@weasel-js/routing';\nimport { PointerProviderIfRoot } from './SceneCanvas/PointerProviderIfRoot';\nimport { usePointerContext, usePointerPosition } from 'features/pointer/PointerContext';\nimport {\n  MINIMAP_CENTER, MINIMAP_PAN, minimapCenterAction, minimapPanAction,\n} from 'features/minimap/actions';\nimport { createLinkedCursorLayer } from 'features/minimap/layers';\nimport type { ViewApi } from 'interactions/actions/depSchema';\nimport { SceneViewCanvas } from './SceneViewCanvas';\nimport {\n  computeFitView,\n  computeIndicatorCommand,\n} from './minimapMath';\nimport type { IndicatorStyle, MinimapFit } from './minimapMath';\nimport type { SceneViewDrawOne, SceneViewLayers } from './sceneViewRender';\nimport type { DrawCommand } from '../renderer/DrawCommand';\nimport { normalizeView, type View } from '../core/viewport/view';\nimport type { Scene } from '../core/scene/types';\nimport type { PoseDescriptor } from '../core/geometry/poseDescriptor';\nimport type { Animator } from '../animation/types';\nimport { AUTO_POSE_DESCRIPTOR } from '../interactions/actions/resize/autoPoseDescriptor';\nimport { accentColorOf } from './accentColor';\n\n/** Props for `<MinimapCanvas>`. */\nexport interface MinimapCanvasProps<TData, TLayer extends string, TPose> {\n  /** Same scene the main canvas is rendering. */\n  scene: Scene<TData, TLayer, TPose>;\n  /** Main canvas's view — used to position the visible-window indicator and\n   *  to preserve `scale` when the minimap recenters. */\n  mainView: View;\n  /** Main canvas's CSS-pixel dims. Used to compute the visible-window rect\n   *  and the recenter offset. */\n  mainViewDims: { width: number; height: number };\n  /** Setter called on click (single recenter) and during drag (continuous\n   *  recenter). Receives a `View` with the same `scale` as `mainView` and\n   *  `(x, y)` shifted so the pointer's world point lands at the main\n   *  canvas's center. */\n  onMainViewChange: (next: View) => void;\n  /** Minimap's own CSS-pixel dims. */\n  width: number;\n  height: number;\n  /** Consumer's draw callback. Applied through the derived fit view; same\n   *  signature as `<SceneCanvas>`'s scene-slot `drawOne` so the consumer\n   *  can reuse it (typically simplified — just colored AABBs). */\n  drawOne: SceneViewDrawOne<TData, TLayer, TPose>;\n  /** Fit policy. Defaults to `\"scene\"` (AABB union of leaf poses). See\n   *  `MinimapFit` for the full shape.\n   *\n   *  Framing is derived from **document** poses, not `scene.overrides` — a\n   *  node moved by an override paints where the override puts it, outside the\n   *  frame if it goes there, rather than making the whole minimap rescale on\n   *  every frame of a drag or a settle. */\n  fit?: MinimapFit<TData, TLayer, TPose>;\n  /** How to read poses. Default `AUTO_POSE_DESCRIPTOR`. */\n  poseDescriptor?: PoseDescriptor<TPose>;\n  /** Optional per-id alpha multiplier, mirroring `<SceneCanvas>`'s scene-slot\n   *  `alphaFor`. Pass the same function the main canvas uses so a\n   *  scoping-dim treatment shows up in the minimap too. */\n  alphaFor?: (id: string) => number;\n  /** Hide scene layers in the minimap, keyed `scene:<layerId>` as on\n   *  `<SceneCanvas>` — pass the main canvas's map so both show the same set. */\n  layerVisibility?: SceneViewLayers['layerVisibility'];\n  /** Paint order for the minimap, keyed as `layerVisibility`. */\n  layerOrder?: SceneViewLayers['layerOrder'];\n  /** Optional animator: the minimap repaints on its ticks and paints its\n   *  `colorOverrides`. Pass the main canvas's animator so both show the same\n   *  colors. */\n  animator?: Animator;\n  /** Visual tuning of the indicator stroke. */\n  indicatorStyle?: IndicatorStyle;\n  /** CSS class for positioning the canvas. Its size is `width` × `height`. */\n  className?: string;\n  /** Forwarded ref to the underlying `<canvas>`. */\n  canvasRef?: Ref<HTMLCanvasElement>;\n  /** The view id this minimap publishes its pointer under. Default\n   *  `'minimap'`. */\n  id?: string;\n}\n\n/** The minimap's own bindings. Unscoped: this dispatcher routes no views, so\n *  every input on it is the minimap's. */\nconst MINIMAP_INPUT: Tool = {\n  id: 'minimap',\n  eligibility: { always: true },\n  bindings: [\n    { spec: { kind: 'pointerDown' }, actionId: MINIMAP_CENTER },\n    { spec: { kind: 'drag' }, actionId: MINIMAP_PAN },\n  ],\n};\nconst TOOLS_BY_ID: ReadonlyMap<string, Tool> = new Map([[MINIMAP_INPUT.id, MINIMAP_INPUT]]);\nconst CHANNELS = { wheel: false, pinch: false, contextMenu: false, ingest: false } as const;\n\nfunction MinimapCanvasInner<TData, TLayer extends string, TPose>(\n  props: MinimapCanvasProps<TData, TLayer, TPose>,\n) {\n  const {\n    scene,\n    mainView: mainViewProp,\n    mainViewDims,\n    onMainViewChange,\n    width,\n    height,\n    drawOne,\n    alphaFor,\n    layerVisibility,\n    layerOrder,\n    animator,\n    fit = 'scene',\n    poseDescriptor,\n    indicatorStyle,\n    className,\n    canvasRef,\n    id = 'minimap',\n  } = props;\n  const mainView = normalizeView(mainViewProp);\n\n  // Subscribe to scene version so the fit view recomputes when the scene\n  // mutates. `<SceneViewCanvas>` also subscribes, but it owns its own\n  // rendering; we need the version *here* to invalidate the memoized fit.\n  const sceneVersion = useSyncExternalStore(\n    scene.subscribe,\n    scene.getVersion,\n    scene.getVersion,\n  );\n\n  const descriptor = (poseDescriptor ?? AUTO_POSE_DESCRIPTOR) as PoseDescriptor<TPose>;\n\n  const fitView = useMemo<View>(() => {\n    // A `fit` function's result is the caller's; pointer math divides by its scale.\n    return normalizeView(computeFitView(scene, { width, height }, fit, descriptor));\n    // `sceneVersion` participates so the memo re-evaluates after scene mutations.\n    // `descriptor` is stable when the prop is omitted.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scene, sceneVersion, width, height, fit, descriptor]);\n\n  const indicatorCmd = useMemo<DrawCommand>(() => {\n    return computeIndicatorCommand(mainView, mainViewDims, indicatorStyle, fitView);\n  }, [mainView, mainViewDims, indicatorStyle, fitView]);\n\n  // -------------------------------------------------------------------------\n  // Input\n  // -------------------------------------------------------------------------\n  //\n  // The \"latest\" pattern (refs holding the current mainView / dims / setter\n  // / fitView) lets the dep and the listeners read up-to-date values without\n  // re-binding every frame.\n\n  const localCanvasRef = useRef<HTMLCanvasElement | null>(null);\n  const mainViewRef = useLatest(mainView);\n  const mainViewDimsRef = useLatest(mainViewDims);\n  const onMainViewChangeRef = useLatest(onMainViewChange);\n  const fitViewRef = useLatest(fitView);\n\n  // The main canvas's camera, which is what the minimap's actions move.\n  const rootView = useMemo<ViewApi>(() => ({\n    get: () => mainViewRef.current,\n    set: (v) => onMainViewChangeRef.current(v),\n    hostSize: () => mainViewDimsRef.current,\n  }), [mainViewRef, onMainViewChangeRef, mainViewDimsRef]);\n  useDepSource('rootView', () => rootView);\n\n  const actions = useActionsRegistry();\n  useEffect(() => {\n    if (!actions) return;\n    const off = [actions.register(minimapCenterAction()), actions.register(minimapPanAction())];\n    return () => { for (const u of off) u(); };\n  }, [actions]);\n\n  /** Client point → world, through the fit camera. */\n  const clientToWorld = useCallback((cx: number, cy: number) => {\n    const rect = localCanvasRef.current?.getBoundingClientRect();\n    const fv = fitViewRef.current;\n    return {\n      x: fv.x + (cx - (rect?.left ?? 0)) / fv.scale.x,\n      y: fv.y + (cy - (rect?.top ?? 0)) / fv.scale.y,\n    };\n  }, [fitViewRef]);\n\n  useGestureDispatcher({\n    canvasRef: localCanvasRef,\n    actions: actions!,\n    entriesById: TOOLS_BY_ID,\n    clientToWorld,\n    keyboard: false,\n    channels: CHANNELS,\n  });\n\n  // -------------------------------------------------------------------------\n  // Linked cursor\n  // -------------------------------------------------------------------------\n\n  const pointerStore = usePointerContext();\n  useEffect(() => {\n    const el = localCanvasRef.current;\n    if (!el || !pointerStore) return;\n    const onMove = (e: PointerEvent): void => {\n      const w = clientToWorld(e.clientX, e.clientY);\n      pointerStore.set({ worldX: w.x, worldY: w.y, viewId: id });\n    };\n    const onLeave = (e: PointerEvent): void => {\n      if (e.buttons !== 0) return;\n      if (pointerStore.get()?.viewId === id) pointerStore.set(null);\n    };\n    el.addEventListener('pointermove', onMove);\n    el.addEventListener('pointerleave', onLeave);\n    return () => {\n      el.removeEventListener('pointermove', onMove);\n      el.removeEventListener('pointerleave', onLeave);\n    };\n  }, [pointerStore, clientToWorld, id]);\n\n  const pointer = usePointerPosition();\n  const cursorLayer = useMemo(() => createLinkedCursorLayer({\n    id: `${id}.cursor`,\n    pointer: () => pointer,\n    color: () => accentColorOf(localCanvasRef.current),\n  }), [id, pointer]);\n\n  const extraCommands = useMemo<DrawCommand[]>(() => [\n    indicatorCmd,\n    ...cursorLayer.draw({ viewId: id }, fitView, { width, height }),\n  ], [indicatorCmd, cursorLayer, id, fitView, width, height]);\n\n  // `<SceneViewCanvas>` doesn't expose its element except via `canvasRef`, so\n  // we route both our internal ref and the consumer's ref through one setter.\n  const setCanvasRef = useCallback((el: HTMLCanvasElement | null) => {\n    localCanvasRef.current = el;\n    assignRef(canvasRef, el);\n  }, [canvasRef]);\n\n  return (\n    <SceneViewCanvas\n      scene={scene}\n      view={fitView}\n      width={width}\n      height={height}\n      drawOne={drawOne}\n      extraCommands={extraCommands}\n      alphaFor={alphaFor}\n      layerVisibility={layerVisibility}\n      layerOrder={layerOrder}\n      animator={animator}\n      className={className}\n      canvasRef={setCanvasRef}\n    />\n  );\n}\n\n/**\n * Opinionated minimap. See `MinimapCanvasProps` for the full surface and\n * the module docstring for the rendering / input model.\n *\n * Its dispatcher, actions and deps are its own, so it never competes with\n * the main canvas for input. The pointer store is shared when one is in scope.\n *\n * `forwardRef` is not used because the component is generic over\n * `<TData, TLayer, TPose>` and React's `forwardRef` erases generics. The\n * `canvasRef` prop is the plain-prop equivalent.\n */\nexport function MinimapCanvas<TData, TLayer extends string, TPose>(\n  props: MinimapCanvasProps<TData, TLayer, TPose>,\n) {\n  return (\n    <DepRegistryProvider>\n      <ActionsProvider>\n        <ActiveToolContextProvider>\n          <PointerProviderIfRoot>\n            <MinimapCanvasInner {...props} />\n          </PointerProviderIfRoot>\n        </ActiveToolContextProvider>\n      </ActionsProvider>\n    </DepRegistryProvider>\n  );\n}\n"],"mappings":"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"}