@weasel-js/core 1.6.1 → 1.7.1

package/dist/canvas/DrawCanvas.js

@@ -0,0 +1,67 @@
+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 { 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 { useLatest as u } from "@weasel-js/react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/canvas/DrawCanvas.tsx
+var f = {
+	x: 0,
+	y: 0,
+	scale: {
+		x: 1,
+		y: 1
+	}
+};
+function p(p) {
+	let { width: m, height: h, draw: g, background: _, redrawOn: v, dpr: y, className: b, canvasRef: x } = p, S = p.view ? t(p.view) : f, C = l(null), w = o((e) => {
+		C.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+	}, [x]), { paint: T } = a(), E = u(() => {
+		let t = C.current;
+		if (!t) return !1;
+		let n = typeof g == "function" ? g({
+			width: m,
+			height: h
+		}) : g, r = [];
+		return _ && r.push({
+			kind: "path",
+			path: {
+				kind: "rect",
+				x: 0,
+				y: 0,
+				width: m,
+				height: h
+			},
+			fill: _
+		}), r.push({
+			kind: "group",
+			transform: e(S),
+			children: [...n]
+		}), T(t, r, S, {
+			width: m,
+			height: h,
+			dpr: y
+		});
+	}), { requestRedraw: D } = r(o(() => E.current(), [E]), { target: C }), O = l(!1);
+	return c(() => {
+		if (O.current) {
+			D();
+			return;
+		}
+		O.current = E.current(), O.current || D();
+	}), n(D), i(v, D), s(() => () => {
+		O.current = !1;
+	}, []), /* @__PURE__ */ d("canvas", {
+		ref: w,
+		width: m,
+		height: h,
+		className: b
+	});
+}
+//#endregion
+export { p as DrawCanvas };
+
+//# sourceMappingURL=DrawCanvas.js.map

package/dist/canvas/DrawCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawCanvas.js","names":["IDENTITY_VIEW","DrawCanvas","props","view","normalizeView","canvasElRef","useRef","setRefs","useCallback","el","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 { 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    if (typeof canvasRef === 'function') canvasRef(el);\n    else if (canvasRef) (canvasRef as { current: HTMLCanvasElement | null }).current = 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,GAClB,OAAOC,KAAc,aAAYA,EAAUD,CAAE,IACxCC,MAAW,EAAqD,UAAUD;CACrF,GAAG,CAACC,CAAS,CAAC,GAER,EAAE,OAAOC,MAAgBC,EAAkB,GAY3CC,IAAWC,QAXY;EAC3B,IAAML,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMM,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,EAAWhB,CAAI;GAAG,UAAU,CAAC,GAAGY,CAAO;EAAE,CAAC,GAC7EJ,EAAYF,GAAIQ,GAAUd,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,CACgC,GAC1B,EAAE,qBAAkBiB,EACxBZ,QAAkBK,EAAS,QAAQ,GAAG,CAACA,CAAQ,CAAC,GAChD,EAAE,QAAQR,EAAY,CACxB,GAIMgB,IAAaf,EAAO,EAAK;CAc/B,OAbAgB,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,KAAKpB;EAAgB;EAAe;EAAmB;CAAY,CAAA;AACpF"}

package/dist/canvas/MinimapCanvas.js

@@ -0,0 +1,139 @@
+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 ee } from "./SceneViewCanvas.js";
+import { MINIMAP_CENTER as o, MINIMAP_PAN as s, minimapCenterAction as c, minimapPanAction as l } from "../features/minimap/actions.js";
+import { createLinkedCursorLayer as u } from "../features/minimap/layers.js";
+import { computeFitView as d, computeIndicatorCommand as f } from "./minimapMath.js";
+import { useCallback as p, useEffect as m, useMemo as h, useRef as g, useSyncExternalStore as _ } from "react";
+import { 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 te } from "@weasel-js/routing/react";
+import { jsx as w } from "react/jsx-runtime";
+//#region src/canvas/MinimapCanvas.tsx
+var T = {
+	id: "minimap",
+	eligibility: { always: !0 },
+	bindings: [{
+		spec: { kind: "pointerDown" },
+		actionId: o
+	}, {
+		spec: { kind: "drag" },
+		actionId: s
+	}]
+}, E = /* @__PURE__ */ new Map([[T.id, T]]), D = {
+	wheel: !1,
+	pinch: !1,
+	contextMenu: !1,
+	ingest: !1
+};
+function O(i) {
+	let { scene: o, mainView: s, mainViewDims: y, onMainViewChange: b, width: x, height: T, drawOne: O, alphaFor: k, layerVisibility: A, layerOrder: j, animator: ne, fit: M = "scene", poseDescriptor: N, indicatorStyle: P, className: F, canvasRef: I, id: L = "minimap" } = i, R = e(s), z = _(o.subscribe, o.getVersion, o.getVersion), B = N ?? t, V = h(() => d(o, {
+		width: x,
+		height: T
+	}, M, B), [
+		o,
+		z,
+		x,
+		T,
+		M,
+		B
+	]), H = h(() => f(R, y, P), [
+		R,
+		y,
+		P
+	]), U = g(null), W = v(R), G = v(y), K = v(b), q = v(V), J = h(() => ({
+		get: () => W.current,
+		set: (e) => K.current(e),
+		hostSize: () => G.current
+	}), [
+		W,
+		K,
+		G
+	]);
+	C("rootView", () => J);
+	let Y = S();
+	m(() => {
+		if (!Y) return;
+		let e = [Y.register(c()), Y.register(l())];
+		return () => {
+			for (let t of e) t();
+		};
+	}, [Y]);
+	let X = p((e, t) => {
+		let n = U.current?.getBoundingClientRect(), r = q.current;
+		return {
+			x: r.x + (e - (n?.left ?? 0)) / r.scale.x,
+			y: r.y + (t - (n?.top ?? 0)) / r.scale.y
+		};
+	}, [q]);
+	te({
+		canvasRef: U,
+		actions: Y,
+		entriesById: E,
+		clientToWorld: X,
+		keyboard: !1,
+		channels: D
+	});
+	let Z = n();
+	m(() => {
+		let e = U.current;
+		if (!e || !Z) return;
+		let t = (e) => {
+			let t = X(e.clientX, e.clientY);
+			Z.set({
+				worldX: t.x,
+				worldY: t.y,
+				viewId: L
+			});
+		}, n = (e) => {
+			e.buttons === 0 && Z.get()?.viewId === L && Z.set(null);
+		};
+		return e.addEventListener("pointermove", t), e.addEventListener("pointerleave", n), () => {
+			e.removeEventListener("pointermove", t), e.removeEventListener("pointerleave", n);
+		};
+	}, [
+		Z,
+		X,
+		L
+	]);
+	let Q = r(), $ = h(() => u({
+		id: `${L}.cursor`,
+		pointer: () => Q,
+		color: () => a(U.current)
+	}), [L, Q]), re = h(() => [H, ...$.draw({ viewId: L }, V, {
+		width: x,
+		height: T
+	})], [
+		H,
+		$,
+		L,
+		V,
+		x,
+		T
+	]), ie = p((e) => {
+		U.current = e, typeof I == "function" ? I(e) : I && typeof I == "object" && (I.current = e);
+	}, [I]);
+	return /* @__PURE__ */ w(ee, {
+		scene: o,
+		view: V,
+		width: x,
+		height: T,
+		drawOne: O,
+		extraCommands: re,
+		alphaFor: k,
+		layerVisibility: A,
+		layerOrder: j,
+		animator: ne,
+		className: F,
+		canvasRef: ie
+	});
+}
+function k(e) {
+	return /* @__PURE__ */ w(x, { children: /* @__PURE__ */ w(y, { children: /* @__PURE__ */ w(b, { children: /* @__PURE__ */ w(i, { children: /* @__PURE__ */ w(O, { ...e }) }) }) }) });
+}
+//#endregion
+export { k as MinimapCanvas };
+
+//# sourceMappingURL=MinimapCanvas.js.map

package/dist/canvas/MinimapCanvas.js.map

@@ -0,0 +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","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 { 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    if (typeof canvasRef === 'function') {\n      canvasRef(el);\n    } else if (canvasRef && typeof canvasRef === 'object') {\n      (canvasRef as { current: HTMLCanvasElement | null }).current = el;\n    }\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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"}

package/dist/canvas/ModalityHud.js

@@ -0,0 +1,66 @@
+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";
+//#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, {
+		align: {
+			x: "end",
+			y: "start"
+		},
+		offset: {
+			x: c?.right ?? 8,
+			y: c?.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,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: e.row,
+				children: [/* @__PURE__ */ r("span", {
+					className: e.muted,
+					children: "mode"
+				}), /* @__PURE__ */ r("span", {
+					className: s ? void 0 : e.absent,
+					children: s ?? "—"
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: e.row,
+				children: [/* @__PURE__ */ r("span", {
+					className: e.muted,
+					children: "active"
+				}), /* @__PURE__ */ r("span", {
+					className: f ? void 0 : e.absent,
+					children: f ?? "—"
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: e.row,
+				children: [/* @__PURE__ */ r("span", {
+					className: e.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}`))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { a as ModalityHud };
+
+//# sourceMappingURL=ModalityHud.js.map

package/dist/canvas/ModalityHud.js.map

@@ -0,0 +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":["/**\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":";;;;;AA8BA,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"}