@weasel-js/core 1.10.0 → 1.11.0

package/dist/canvas/CursorCoordsHud.js

@@ -1,106 +1,145 @@
-import { clientToWorld as e } from "../core/viewport/clientToWorld.js";
-import t from "./hud.module.js";
-import { useHostAnchor as n } from "./useHostAnchor.js";
-import { useEffect as r, useRef as i, useState as a } from "react";
-import { useLatest as o, useVisibleRaf 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";
+import { clientToWorld } from "../core/viewport/clientToWorld.js";
+import hud_module_default from "./hud.module.js";
+import { useHostAnchor } from "./useHostAnchor.js";
+import { useEffect, useRef, useState } from "react";
+import { useLatest, useVisibleRaf } from "@weasel-js/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { decimal, qty } from "@weasel-js/quantity";
+
 //#region src/canvas/CursorCoordsHud.tsx
-function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
-	let g = o(m), [_, v] = a({
+/**
+* Fixed-position dev HUD that shows the cursor's current viewport
+* (client) coords next to the equivalent canvas (world) coords. Pins to the
+* top-right corner of the canvas's host; listens to `document` pointermove so it
+* reads the cursor even when it leaves the canvas.
+*
+* Mount inside a `<SceneCanvas>` subtree (or anywhere with access to a
+* canvas + view ref) for quick coord-reconciliation during gesture
+* debugging.
+*/
+/** Debug overlay showing the pointer's client and world coordinates and the
+*  current frame rate, pinned to the canvas's top-right corner. */
+function CursorCoordsHud({ canvasRef, anchorRef, viewRef, toWorld, offset }) {
+	const toWorldRef = useLatest(toWorld);
+	const [state, setState] = useState({
 		client: {
 			x: 0,
 			y: 0
 		},
 		world: null,
-		inCanvas: !1
-	}), [y, b] = a(0), { ref: x, style: S } = n(() => d?.current ?? u.current?.parentElement ?? u.current, {
+		inCanvas: false
+	});
+	const [fps, setFps] = useState(0);
+	const { ref, style: anchorStyle } = useHostAnchor(() => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current, {
 		align: {
 			x: "end",
 			y: "start"
 		},
 		offset: {
-			x: h?.right ?? 8,
-			y: h?.top ?? 8
+			x: offset?.right ?? 8,
+			y: offset?.top ?? 8
+		}
+	});
+	const framesRef = useRef(0);
+	const lastFlushRef = useRef(0);
+	const fpsLoop = useVisibleRaf((_time, fpsLoop) => {
+		framesRef.current++;
+		const now = performance.now();
+		const dt = now - lastFlushRef.current;
+		if (dt >= 1e3) {
+			setFps(Math.round(framesRef.current * 1e3 / dt));
+			framesRef.current = 0;
+			lastFlushRef.current = now;
 		}
-	}), C = i(0), w = i(0), T = s(() => {
-		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();
+		fpsLoop.request();
 	}, { onResume: () => {
-		C.current = 0, w.current = performance.now();
+		framesRef.current = 0;
+		lastFlushRef.current = performance.now();
 	} });
-	return r(() => (w.current = performance.now(), T.request(), () => T.cancel()), [T]), r(() => {
-		let t = (t) => {
-			let n = u.current, r = f.current, i = {
-				x: t.clientX,
-				y: t.clientY
+	useEffect(() => {
+		lastFlushRef.current = performance.now();
+		fpsLoop.request();
+		return () => fpsLoop.cancel();
+	}, [fpsLoop]);
+	useEffect(() => {
+		const onMove = (e) => {
+			const canvas = canvasRef.current;
+			const view = viewRef.current;
+			const client = {
+				x: e.clientX,
+				y: e.clientY
 			};
-			if (!n || !r) {
-				v({
-					client: i,
+			if (!canvas || !view) {
+				setState({
+					client,
 					world: null,
-					inCanvas: !1
+					inCanvas: false
 				});
 				return;
 			}
-			let a = n.getBoundingClientRect(), o = t.clientX >= a.left && t.clientX <= a.right && t.clientY >= a.top && t.clientY <= a.bottom, [s, c] = g.current?.(t.clientX, t.clientY) ?? e(t.clientX, t.clientY, a, r);
-			v({
-				client: i,
+			const rect = canvas.getBoundingClientRect();
+			const inCanvas = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+			const [wx, wy] = toWorldRef.current?.(e.clientX, e.clientY) ?? clientToWorld(e.clientX, e.clientY, rect, view);
+			setState({
+				client,
 				world: {
-					x: s,
-					y: c
+					x: wx,
+					y: wy
 				},
-				inCanvas: o
+				inCanvas
 			});
 		};
-		return document.addEventListener("pointermove", t), () => {
-			document.removeEventListener("pointermove", t);
+		document.addEventListener("pointermove", onMove);
+		return () => {
+			document.removeEventListener("pointermove", onMove);
 		};
 	}, [
-		u,
-		f,
-		g
-	]), S ? /* @__PURE__ */ c("div", {
-		ref: x,
-		className: t.hud,
-		style: S,
-		children: /* @__PURE__ */ l("dl", {
-			className: t.readings,
+		canvasRef,
+		viewRef,
+		toWorldRef
+	]);
+	if (!anchorStyle) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: hud_module_default.hud,
+		style: anchorStyle,
+		children: /* @__PURE__ */ jsxs("dl", {
+			className: hud_module_default.readings,
 			children: [
-				/* @__PURE__ */ c("dt", {
-					className: t.muted,
+				/* @__PURE__ */ jsx("dt", {
+					className: hud_module_default.muted,
 					children: "fps"
 				}),
-				/* @__PURE__ */ c("dd", { children: y }),
-				/* @__PURE__ */ c("dt", {
-					className: t.muted,
+				/* @__PURE__ */ jsx("dd", { children: fps }),
+				/* @__PURE__ */ jsx("dt", {
+					className: hud_module_default.muted,
 					children: "client"
 				}),
-				/* @__PURE__ */ c("dd", { children: p(_.client, 0) }),
-				/* @__PURE__ */ c("dt", {
-					className: t.muted,
+				/* @__PURE__ */ jsx("dd", { children: point(state.client, 0) }),
+				/* @__PURE__ */ jsx("dt", {
+					className: hud_module_default.muted,
 					children: "world"
 				}),
-				_.world ? /* @__PURE__ */ l("dd", { children: [p(_.world, 1), _.inCanvas ? null : /* @__PURE__ */ c("span", {
-					className: t.absent,
+				state.world ? /* @__PURE__ */ jsxs("dd", { children: [point(state.world, 1), state.inCanvas ? null : /* @__PURE__ */ jsx("span", {
+					className: hud_module_default.absent,
 					children: " off-canvas"
-				})] }) : /* @__PURE__ */ c("dd", {
-					className: t.absent,
+				})] }) : /* @__PURE__ */ jsx("dd", {
+					className: hud_module_default.absent,
 					children: "— no canvas or view yet"
 				})
 			]
 		})
-	}) : null;
+	});
 }
-function p({ x: e, y: t }, n) {
-	let r = u({
-		places: n,
-		grouping: !1
+/** `(x, y)` at `places` decimals, its negatives written with U+2212. */
+function point({ x, y }, places) {
+	const at = decimal({
+		places,
+		grouping: false
 	});
-	return `(${d(e, r).text}, ${d(t, r).text})`;
+	return `(${qty(x, at).text}, ${qty(y, at).text})`;
 }
-//#endregion
-export { f as CursorCoordsHud };
 
+//#endregion
+export { CursorCoordsHud };
 //# sourceMappingURL=CursorCoordsHud.js.map

package/dist/canvas/CursorCoordsHud.js.map

@@ -1 +1 @@
-{"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","e","rect","inCanvas","wx","wy","clientToWorld","point","at","decimal","qty","x","y"],"sources":["../../src/canvas/CursorCoordsHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\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, useVisibleRaf } from '@weasel-js/react';\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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"}
+{"version":3,"file":"CursorCoordsHud.js","names":["s"],"sources":["../../src/canvas/CursorCoordsHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\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, useVisibleRaf } from '@weasel-js/react';\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    (_time, fpsLoop) => {\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,13 +1,26 @@
-import { backgroundFillCommands as e } from "../core/layers/backgroundFill.js";
-import { normalizeView as t } from "../core/viewport/view.js";
-import { useCanvasSurface as n } from "./useCanvasSurface.js";
-import { surfaceBox as r } from "./surfaceBox.js";
-import { viewToMat3 as i } from "@weasel-js/geom";
-import { useCallback as a, useRef as o } from "react";
-import { assignRef as s } from "@weasel-js/react";
-import { jsx as c } from "react/jsx-runtime";
+import { backgroundFillCommands } from "../core/layers/backgroundFill.js";
+import { normalizeView } from "../core/viewport/view.js";
+import { useCanvasSurface } from "./useCanvasSurface.js";
+import { SurfaceCanvas } from "./SurfaceCanvas.js";
+import { useSurfaceSize } from "./useSurfaceSize.js";
+import { viewToMat3 } from "@weasel-js/geom";
+import { useCallback, useRef } from "react";
+import { assignRef } from "@weasel-js/react";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/canvas/DrawCanvas.tsx
-var l = {
+/**
+* `<DrawCanvas>` — a sized, DPR-correct WebGL2 surface that paints a list of
+* draw commands, with no scene, tools or dispatcher behind it.
+*
+* It paints through the same surface hook as `<SceneViewCanvas>`
+* (`useCanvasSurface`), whose frame loop stops while the canvas is off screen
+* or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event
+* listeners. Its size is `width` × `height` unless a `className` rule sizes
+* the element; the drawing buffer stays `width` × `height` either way. Given
+* neither, it fills its parent.
+*/
+var IDENTITY_VIEW = {
 	x: 0,
 	y: 0,
 	scale: {
@@ -15,42 +28,56 @@ var l = {
 		y: 1
 	}
 };
-function u(u) {
-	let { width: d, height: f, draw: p, background: m, redrawOn: h, dpr: g, className: _, canvasRef: v } = u, y = u.view ? t(u.view) : l, b = o(null), x = a((e) => {
-		b.current = e, s(v, e);
-	}, [v]);
-	return n((t) => {
-		let n = b.current;
-		if (!n) return !1;
-		let r = typeof p == "function" ? p({
-			width: d,
-			height: f
-		}) : p, a = m ? e(m, {
-			width: d,
-			height: f
+/**
+* Paint draw commands onto a canvas of its own. For a surface that only draws —
+* a package demo, a swatch, a preview — where a `<SceneCanvas>` would bring a
+* scene, tools and an input dispatcher that nothing uses.
+*/
+function DrawCanvas(props) {
+	const { draw, background, redrawOn, dpr, className, canvasRef } = props;
+	const view = props.view ? normalizeView(props.view) : IDENTITY_VIEW;
+	const canvasElRef = useRef(null);
+	const setRefs = useCallback((el) => {
+		canvasElRef.current = el;
+		assignRef(canvasRef, el);
+	}, [canvasRef]);
+	const { width, height } = useSurfaceSize(props, canvasElRef);
+	const paint = (lease) => {
+		const el = canvasElRef.current;
+		if (!el || width === 0 || height === 0) return false;
+		const content = typeof draw === "function" ? draw({
+			width,
+			height
+		}) : draw;
+		const commands = background ? backgroundFillCommands(background, {
+			width,
+			height
 		}) : [];
-		return a.push({
+		commands.push({
 			kind: "group",
-			transform: i(y),
-			children: [...r]
-		}), t.paint(n, a, y, {
-			width: d,
-			height: f,
-			dpr: g
+			transform: viewToMat3(view),
+			children: [...content]
+		});
+		return lease.paint(el, commands, view, {
+			width,
+			height,
+			dpr
 		});
-	}, {
-		target: b,
-		dpr: g,
-		redrawOn: h,
-		paintOnCommit: !0
-	}), /* @__PURE__ */ c("canvas", {
-		ref: x,
-		width: d,
-		height: f,
-		...r(d, f, _)
+	};
+	useCanvasSurface(paint, {
+		target: canvasElRef,
+		dpr,
+		redrawOn,
+		onCommit: "paint"
+	});
+	return /* @__PURE__ */ jsx(SurfaceCanvas, {
+		ref: setRefs,
+		width: props.width,
+		height: props.height,
+		className
 	});
 }
-//#endregion
-export { u as DrawCanvas };
 
+//#endregion
+export { 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","useCanvasSurface","content","draw","commands","background","backgroundFillCommands","viewToMat3","lease","surfaceBox","width","height","className"],"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 surface hook as `<SceneViewCanvas>`\n * (`useCanvasSurface`), whose frame loop stops while the canvas is off screen\n * or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event\n * listeners. Its size is `width` × `height` unless a `className` rule sizes\n * the element; the drawing buffer stays `width` × `height` either way.\n */\nimport { useCallback, useRef } from 'react';\nimport type { Ref } from 'react';\nimport { assignRef } from '@weasel-js/react';\nimport type { Paint } from '@weasel-js/paint';\nimport { useCanvasSurface } from './useCanvasSurface';\nimport { surfaceBox } from './surfaceBox';\nimport type { CanvasRendererLease } from './canvasRenderer';\nimport { viewToMat3 } from '@weasel-js/geom';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport type { RedrawSource } from '../core/layers/render';\nimport { backgroundFillCommands } from '../core/layers/backgroundFill';\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?: Paint;\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 = (lease: CanvasRendererLease): 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[] = background ? backgroundFillCommands(background, { width, height }) : [];\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return lease.paint(el, commands, view, { width, height, dpr });\n  };\n  useCanvasSurface(paint, { target: canvasElRef, dpr, redrawOn, paintOnCommit: true });\n\n  return <canvas ref={setRefs} width={width} height={height} {...surfaceBox(width, height, className)} />;\n}\n"],"mappings":";;;;;;;;;AAyDA,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;CAYd,OAFAC,GARe,MAAwC;EACrD,IAAMH,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMI,IAAU,OAAOC,KAAS,aAAaA,EAAK;GAAE;GAAO;EAAO,CAAC,IAAIA,GACjEC,IAA0BC,IAAaC,EAAuBD,GAAY;GAAE;GAAO;EAAO,CAAC,IAAI,CAAC;EAEtG,OADAD,EAAS,KAAK;GAAE,MAAM;GAAS,WAAWG,EAAWf,CAAI;GAAG,UAAU,CAAC,GAAGU,CAAO;EAAE,CAAC,GAC7EM,EAAM,MAAMV,GAAIM,GAAUZ,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,GACwB;EAAE,QAAQE;EAAa;EAAK;EAAU,eAAe;CAAK,CAAC,GAE5E,kBAAC,UAAD;EAAQ,KAAKE;EAAgB;EAAe;EAAQ,GAAIa,EAAWC,GAAOC,GAAQC,CAAS;CAAI,CAAA;AACxG"}
+{"version":3,"file":"DrawCanvas.js","names":[],"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 surface hook as `<SceneViewCanvas>`\n * (`useCanvasSurface`), whose frame loop stops while the canvas is off screen\n * or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event\n * listeners. Its size is `width` × `height` unless a `className` rule sizes\n * the element; the drawing buffer stays `width` × `height` either way. Given\n * neither, it fills its parent.\n */\nimport { useCallback, useRef } from 'react';\nimport type { Ref } from 'react';\nimport { assignRef } from '@weasel-js/react';\nimport type { Paint } from '@weasel-js/paint';\nimport { useCanvasSurface } from './useCanvasSurface';\nimport { SurfaceCanvas } from './SurfaceCanvas';\nimport { useSurfaceSize, type SurfaceSizeProps } from './useSurfaceSize';\nimport type { CanvasRendererLease } from './canvasRenderer';\nimport { viewToMat3 } from '@weasel-js/geom';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport type { RedrawSource } from '../core/layers/render';\nimport { backgroundFillCommands } from '../core/layers/backgroundFill';\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 extends SurfaceSizeProps {\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?: Paint;\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 { 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  const { width, height } = useSurfaceSize(props, canvasElRef);\n\n  const paint = (lease: CanvasRendererLease): boolean => {\n    const el = canvasElRef.current;\n    if (!el || width === 0 || height === 0) return false;\n    const content = typeof draw === 'function' ? draw({ width, height }) : draw;\n    const commands: DrawCommand[] = background ? backgroundFillCommands(background, { width, height }) : [];\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return lease.paint(el, commands, view, { width, height, dpr });\n  };\n  useCanvasSurface(paint, { target: canvasElRef, dpr, redrawOn, onCommit: 'paint' });\n\n  return <SurfaceCanvas ref={setRefs} width={props.width} height={props.height} className={className} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAM,gBAAsB;CAAE,GAAG;CAAG,GAAG;CAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;AAAE;;;;;;AAOhE,SAAgB,WAAW,OAAwB;CACjD,MAAM,EAAE,MAAM,YAAY,UAAU,KAAK,WAAW,cAAc;CAClE,MAAM,OAAO,MAAM,OAAO,cAAc,MAAM,IAAI,IAAI;CAEtD,MAAM,cAAc,OAAiC,IAAI;CACzD,MAAM,UAAU,aAAa,OAAiC;EAC5D,YAAY,UAAU;EACtB,UAAU,WAAW,EAAE;CACzB,GAAG,CAAC,SAAS,CAAC;CACd,MAAM,EAAE,OAAO,WAAW,eAAe,OAAO,WAAW;CAE3D,MAAM,SAAS,UAAwC;EACrD,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,MAAM,UAAU,KAAK,WAAW,GAAG,OAAO;EAC/C,MAAM,UAAU,OAAO,SAAS,aAAa,KAAK;GAAE;GAAO;EAAO,CAAC,IAAI;EACvE,MAAM,WAA0B,aAAa,uBAAuB,YAAY;GAAE;GAAO;EAAO,CAAC,IAAI,CAAC;EACtG,SAAS,KAAK;GAAE,MAAM;GAAS,WAAW,WAAW,IAAI;GAAG,UAAU,CAAC,GAAG,OAAO;EAAE,CAAC;EACpF,OAAO,MAAM,MAAM,IAAI,UAAU,MAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D;CACA,iBAAiB,OAAO;EAAE,QAAQ;EAAa;EAAK;EAAU,UAAU;CAAQ,CAAC;CAEjF,OAAO,oBAAC,eAAD;EAAe,KAAK;EAAS,OAAO,MAAM;EAAO,QAAQ,MAAM;EAAmB;CAAY,CAAA;AACvG"}

package/dist/canvas/LeanSceneCanvas.js

@@ -0,0 +1,23 @@
+import { toolDrivenActions } from "./SceneCanvas/presets/toolDriven.js";
+import { renderSceneCanvas } from "./SceneCanvas.js";
+import { forwardRef } from "react";
+
+//#region src/canvas/LeanSceneCanvas.tsx
+var LEAN_SOURCE = {
+	named: null,
+	pool: toolDrivenActions
+};
+function LeanSceneCanvasWrapper(props, ref) {
+	return renderSceneCanvas(LEAN_SOURCE, props, ref);
+}
+/**
+* `<SceneCanvas>` without core's preset names: `features` takes preset
+* objects (`selectPreset`, `editPreset`, a package's own), and a preset the
+* app does not import is not in its bundle. `viewport` does not imply
+* `viewPreset` here; pass it.
+*/
+var LeanSceneCanvas = forwardRef(LeanSceneCanvasWrapper);
+
+//#endregion
+export { LeanSceneCanvas };
+//# sourceMappingURL=LeanSceneCanvas.js.map

package/dist/canvas/LeanSceneCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeanSceneCanvas.js","names":[],"sources":["../../src/canvas/LeanSceneCanvas.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef } from 'react';\nimport type { SceneCanvasApi } from './canvasExtension';\nimport { renderSceneCanvas } from './SceneCanvas';\nimport type { FeaturePreset, PresetSource } from './SceneCanvas/features';\nimport type { SceneCanvasProps } from './SceneCanvas/props';\nimport { toolDrivenActions } from './SceneCanvas/presets/toolDriven';\n\nconst LEAN_SOURCE: PresetSource = { named: null, pool: toolDrivenActions };\n\n/** Props for {@link LeanSceneCanvas}: `<SceneCanvas>`'s, with `features`\n *  taking preset objects only. */\nexport type LeanSceneCanvasProps<TData, TLayer extends string, TPose> =\n  Omit<SceneCanvasProps<TData, TLayer, TPose>, 'features'> & { features?: readonly FeaturePreset[] };\n\nfunction LeanSceneCanvasWrapper<TData, TLayer extends string, TPose>(\n  props: LeanSceneCanvasProps<TData, TLayer, TPose>,\n  ref: React.ForwardedRef<SceneCanvasApi>,\n) {\n  return renderSceneCanvas(LEAN_SOURCE, props, ref);\n}\n\n/**\n * `<SceneCanvas>` without core's preset names: `features` takes preset\n * objects (`selectPreset`, `editPreset`, a package's own), and a preset the\n * app does not import is not in its bundle. `viewport` does not imply\n * `viewPreset` here; pass it.\n */\nexport const LeanSceneCanvas = forwardRef(LeanSceneCanvasWrapper) as <\n  TData, TLayer extends string, TPose,\n>(\n  props: LeanSceneCanvasProps<TData, TLayer, TPose> & { ref?: React.Ref<SceneCanvasApi> },\n) => React.ReactElement;\n"],"mappings":";;;;;AAQA,IAAM,cAA4B;CAAE,OAAO;CAAM,MAAM;AAAkB;AAOzE,SAAS,uBACP,OACA,KACA;CACA,OAAO,kBAAkB,aAAa,OAAO,GAAG;AAClD;;;;;;;AAQA,IAAa,kBAAkB,WAAW,sBAAsB"}

package/dist/canvas/ModalityHud.js

@@ -1,66 +1,81 @@
-import e from "./hud.module.js";
-import { useHostAnchor as t } from "./useHostAnchor.js";
-import { useOptionalActiveToolContext as n } from "@weasel-js/routing/react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import hud_module_default from "./hud.module.js";
+import { useHostAnchor } from "./useHostAnchor.js";
+import { useOptionalActiveToolContext } from "@weasel-js/routing/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/canvas/ModalityHud.tsx
-function a({ canvasRef: a, anchorRef: o, modeId: s, offset: c }) {
-	let l = n(), { ref: u, style: d } = t(() => o?.current ?? a.current?.parentElement ?? a.current, {
+/**
+* Dev HUD reporting the modality state: active mode, active-slot tool, and
+* the hotkey-engaged tool stack. Anchors below `PickHud` in the canvas's
+* top-right corner.
+*
+* Mode id is supplied by the consumer (apps that haven't yet wired the
+* modality machine pass `undefined`; the line renders as `—`). Active /
+* hotkey state is read live from `useOptionalActiveToolContext` so the HUD
+* stays in sync with tool switches and hotkey engage/disengage without
+* prop plumbing.
+*/
+function ModalityHud({ canvasRef, anchorRef, modeId, offset }) {
+	const toolCtx = useOptionalActiveToolContext();
+	const { ref, style } = useHostAnchor(() => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current, {
 		align: {
 			x: "end",
 			y: "start"
 		},
 		offset: {
-			x: c?.right ?? 8,
-			y: c?.top ?? 220
+			x: offset?.right ?? 8,
+			y: offset?.top ?? 220
 		}
 	});
-	if (!d) return null;
-	let f = l?.active ?? null, p = l?.hotkeyStack ?? [], m = p.length > 0 ? p[p.length - 1] : null;
-	return /* @__PURE__ */ i("div", {
-		ref: u,
-		className: `${e.hud} ${e.sized}`,
-		style: d,
+	if (!style) return null;
+	const active = toolCtx?.active ?? null;
+	const hotkeys = toolCtx?.hotkeyStack ?? [];
+	const hotkeyTop = hotkeys.length > 0 ? hotkeys[hotkeys.length - 1] : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: `${hud_module_default.hud} ${hud_module_default.sized}`,
+		style,
 		children: [
-			/* @__PURE__ */ i("div", {
-				className: e.row,
-				children: [/* @__PURE__ */ r("span", {
-					className: e.muted,
+			/* @__PURE__ */ jsxs("div", {
+				className: hud_module_default.row,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: hud_module_default.muted,
 					children: "mode"
-				}), /* @__PURE__ */ r("span", {
-					className: s ? void 0 : e.absent,
-					children: s ?? "—"
+				}), /* @__PURE__ */ jsx("span", {
+					className: modeId ? void 0 : hud_module_default.absent,
+					children: modeId ?? "—"
 				})]
 			}),
-			/* @__PURE__ */ i("div", {
-				className: e.row,
-				children: [/* @__PURE__ */ r("span", {
-					className: e.muted,
+			/* @__PURE__ */ jsxs("div", {
+				className: hud_module_default.row,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: hud_module_default.muted,
 					children: "active"
-				}), /* @__PURE__ */ r("span", {
-					className: f ? void 0 : e.absent,
-					children: f ?? "—"
+				}), /* @__PURE__ */ jsx("span", {
+					className: active ? void 0 : hud_module_default.absent,
+					children: active ?? "—"
 				})]
 			}),
-			/* @__PURE__ */ i("div", {
-				className: e.row,
-				children: [/* @__PURE__ */ r("span", {
-					className: e.muted,
+			/* @__PURE__ */ jsxs("div", {
+				className: hud_module_default.row,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: hud_module_default.muted,
 					children: "hotkey"
-				}), p.length <= 1 ? /* @__PURE__ */ r("span", {
-					className: m ? void 0 : e.absent,
-					children: m ?? "—"
-				}) : /* @__PURE__ */ r("span", {
-					className: e.stack,
-					children: p.slice().reverse().map((t, n) => /* @__PURE__ */ r("span", {
-						className: n === 0 ? void 0 : e.absent,
-						children: t
-					}, `${t}-${n}`))
+				}), hotkeys.length <= 1 ? /* @__PURE__ */ jsx("span", {
+					className: hotkeyTop ? void 0 : hud_module_default.absent,
+					children: hotkeyTop ?? "—"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: hud_module_default.stack,
+					children: hotkeys.slice().reverse().map((id, i) => /* @__PURE__ */ jsx("span", {
+						className: i === 0 ? void 0 : hud_module_default.absent,
+						children: id
+					}, `${id}-${i}`))
 				})]
 			})
 		]
 	});
 }
-//#endregion
-export { a as ModalityHud };
 
+//#endregion
+export { ModalityHud };
 //# sourceMappingURL=ModalityHud.js.map

package/dist/canvas/ModalityHud.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalityHud.js","names":["s","hud_module_default","ModalityHud","toolCtx","useOptionalActiveToolContext","useHostAnchor","anchorRef","canvasRef","offset","style","active","hotkeys","hotkeyTop","modeId","i","id"],"sources":["../../src/canvas/ModalityHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\n * Dev HUD reporting the modality state: active mode, active-slot tool, and\n * the hotkey-engaged tool stack. Anchors below `PickHud` in the canvas's\n * top-right corner.\n *\n * Mode id is supplied by the consumer (apps that haven't yet wired the\n * modality machine pass `undefined`; the line renders as `—`). Active /\n * hotkey state is read live from `useOptionalActiveToolContext` so the HUD\n * stays in sync with tool switches and hotkey engage/disengage without\n * prop plumbing.\n */\nimport { useOptionalActiveToolContext } from '@weasel-js/routing/react';\nimport { useHostAnchor } from './useHostAnchor';\nimport s from './hud.module.css';\n\nexport interface ModalityHudProps {\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  /** Active modality mode id. Omit until the mode machine is wired —\n   *  the row renders `—` in that case. */\n  modeId?: string;\n  /** Inset from the canvas's top-right corner. Default `{ top: 220, right: 8 }`\n   *  so the HUD clears `PickHud` (which itself sits at ~76, with variable\n   *  height for the id list). Override if the pick list is unusually tall. */\n  offset?: { top?: number; right?: number };\n}\n\nexport function ModalityHud({ canvasRef, anchorRef, modeId, offset }: ModalityHudProps) {\n  const toolCtx = useOptionalActiveToolContext();\n  const { ref, style } = 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 ?? 220 },\n    },\n  );\n\n  if (!style) return null;\n\n  const active = toolCtx?.active ?? null;\n  const hotkeys = toolCtx?.hotkeyStack ?? [];\n  const hotkeyTop = hotkeys.length > 0 ? hotkeys[hotkeys.length - 1] : null;\n\n  return (\n    <div ref={ref} className={`${s.hud} ${s.sized}`} style={style}>\n      <div className={s.row}>\n        <span className={s.muted}>mode</span>\n        <span className={modeId ? undefined : s.absent}>{modeId ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>active</span>\n        <span className={active ? undefined : s.absent}>{active ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>hotkey</span>\n        {hotkeys.length <= 1 ? (\n          <span className={hotkeyTop ? undefined : s.absent}>{hotkeyTop ?? '—'}</span>\n        ) : (\n          <span className={s.stack}>\n            {hotkeys.slice().reverse().map((id, i) => (\n              <span key={`${id}-${i}`} className={i === 0 ? undefined : s.absent}>\n                {id}\n              </span>\n            ))}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AA+BA,SAAgBE,EAAY,EAAE,cAAW,cAAW,WAAQ,aAA4B;CACtF,IAAMC,IAAUC,EAA6B,GACvC,EAAE,QAAK,aAAUC,QACfC,GAAW,WAAWC,EAAU,SAAS,iBAAiBA,EAAU,SAC1E;EACE,OAAO;GAAE,GAAG;GAAO,GAAG;EAAQ;EAC9B,QAAQ;GAAE,GAAGC,GAAQ,SAAS;GAAG,GAAGA,GAAQ,OAAO;EAAI;CACzD,CACF;CAEA,IAAI,CAACC,GAAO,OAAO;CAEnB,IAAMC,IAASP,GAAS,UAAU,MAC5BQ,IAAUR,GAAS,eAAe,CAAC,GACnCS,IAAYD,EAAQ,SAAS,IAAIA,EAAQA,EAAQ,SAAS,KAAK;CAErE,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,GAAGX,EAAE,IAAI,GAAGA,EAAE;EAAgB;EAAxD,UAAA;GACE,kBAAC,OAAD;IAAK,WAAWA,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAU,CAAA,GACpC,kBAAC,QAAD;KAAM,WAAWa,IAAS,KAAA,IAAYb,EAAE;KAAS,UAAAa,KAAU;IAAU,CAAA,CAClE;;GACL,kBAAC,OAAD;IAAK,WAAWb,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAY,CAAA,GACtC,kBAAC,QAAD;KAAM,WAAWU,IAAS,KAAA,IAAYV,EAAE;KAAS,UAAAU,KAAU;IAAU,CAAA,CAClE;;GACL,kBAAC,OAAD;IAAK,WAAWV,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAY,CAAA,GACrCW,EAAQ,UAAU,IACjB,kBAAC,QAAD;KAAM,WAAWC,IAAY,KAAA,IAAYZ,EAAE;KAAS,UAAAY,KAAa;IAAU,CAAA,IAE3E,kBAAC,QAAD;KAAM,WAAWZ,EAAE;KAChB,UAAAW,EAAQ,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAI,MAClC,kBAAC,QAAD;MAAyB,WAAWG,MAAM,IAAI,KAAA,IAAYd,EAAE;MACzD,UAAAe;KACG,GAFK,GAAGA,EAAG,GAAGD,GAEd,CACP;IACG,CAAA,CAEL;;EACF;;AAET"}
+{"version":3,"file":"ModalityHud.js","names":["s"],"sources":["../../src/canvas/ModalityHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\n * Dev HUD reporting the modality state: active mode, active-slot tool, and\n * the hotkey-engaged tool stack. Anchors below `PickHud` in the canvas's\n * top-right corner.\n *\n * Mode id is supplied by the consumer (apps that haven't yet wired the\n * modality machine pass `undefined`; the line renders as `—`). Active /\n * hotkey state is read live from `useOptionalActiveToolContext` so the HUD\n * stays in sync with tool switches and hotkey engage/disengage without\n * prop plumbing.\n */\nimport { useOptionalActiveToolContext } from '@weasel-js/routing/react';\nimport { useHostAnchor } from './useHostAnchor';\nimport s from './hud.module.css';\n\nexport interface ModalityHudProps {\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  /** Active modality mode id. Omit until the mode machine is wired —\n   *  the row renders `—` in that case. */\n  modeId?: string;\n  /** Inset from the canvas's top-right corner. Default `{ top: 220, right: 8 }`\n   *  so the HUD clears `PickHud` (which itself sits at ~76, with variable\n   *  height for the id list). Override if the pick list is unusually tall. */\n  offset?: { top?: number; right?: number };\n}\n\nexport function ModalityHud({ canvasRef, anchorRef, modeId, offset }: ModalityHudProps) {\n  const toolCtx = useOptionalActiveToolContext();\n  const { ref, style } = 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 ?? 220 },\n    },\n  );\n\n  if (!style) return null;\n\n  const active = toolCtx?.active ?? null;\n  const hotkeys = toolCtx?.hotkeyStack ?? [];\n  const hotkeyTop = hotkeys.length > 0 ? hotkeys[hotkeys.length - 1] : null;\n\n  return (\n    <div ref={ref} className={`${s.hud} ${s.sized}`} style={style}>\n      <div className={s.row}>\n        <span className={s.muted}>mode</span>\n        <span className={modeId ? undefined : s.absent}>{modeId ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>active</span>\n        <span className={active ? undefined : s.absent}>{active ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>hotkey</span>\n        {hotkeys.length <= 1 ? (\n          <span className={hotkeyTop ? undefined : s.absent}>{hotkeyTop ?? '—'}</span>\n        ) : (\n          <span className={s.stack}>\n            {hotkeys.slice().reverse().map((id, i) => (\n              <span key={`${id}-${i}`} className={i === 0 ? undefined : s.absent}>\n                {id}\n              </span>\n            ))}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,SAAgB,YAAY,EAAE,WAAW,WAAW,QAAQ,UAA4B;CACtF,MAAM,UAAU,6BAA6B;CAC7C,MAAM,EAAE,KAAK,UAAU,oBACf,WAAW,WAAW,UAAU,SAAS,iBAAiB,UAAU,SAC1E;EACE,OAAO;GAAE,GAAG;GAAO,GAAG;EAAQ;EAC9B,QAAQ;GAAE,GAAG,QAAQ,SAAS;GAAG,GAAG,QAAQ,OAAO;EAAI;CACzD,CACF;CAEA,IAAI,CAAC,OAAO,OAAO;CAEnB,MAAM,SAAS,SAAS,UAAU;CAClC,MAAM,UAAU,SAAS,eAAe,CAAC;CACzC,MAAM,YAAY,QAAQ,SAAS,IAAI,QAAQ,QAAQ,SAAS,KAAK;CAErE,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAGA,mBAAE,IAAI,GAAGA,mBAAE;EAAgB;EAAxD,UAAA;GACE,qBAAC,OAAD;IAAK,WAAWA,mBAAE;IAAlB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAWA,mBAAE;KAAO,UAAA;IAAU,CAAA,GACpC,oBAAC,QAAD;KAAM,WAAW,SAAS,SAAYA,mBAAE;KAAS,UAAA,UAAU;IAAU,CAAA,CAClE;;GACL,qBAAC,OAAD;IAAK,WAAWA,mBAAE;IAAlB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAWA,mBAAE;KAAO,UAAA;IAAY,CAAA,GACtC,oBAAC,QAAD;KAAM,WAAW,SAAS,SAAYA,mBAAE;KAAS,UAAA,UAAU;IAAU,CAAA,CAClE;;GACL,qBAAC,OAAD;IAAK,WAAWA,mBAAE;IAAlB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAWA,mBAAE;KAAO,UAAA;IAAY,CAAA,GACrC,QAAQ,UAAU,IACjB,oBAAC,QAAD;KAAM,WAAW,YAAY,SAAYA,mBAAE;KAAS,UAAA,aAAa;IAAU,CAAA,IAE3E,oBAAC,QAAD;KAAM,WAAWA,mBAAE;KAChB,UAAA,QAAQ,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,IAAI,MAClC,oBAAC,QAAD;MAAyB,WAAW,MAAM,IAAI,SAAYA,mBAAE;MACzD,UAAA;KACG,GAFK,GAAG,GAAG,GAAG,GAEd,CACP;IACG,CAAA,CAEL;;EACF;;AAET"}