@weasel-js/core 1.10.1 → 1.11.1

package/dist/canvas/useClientToWorld.js

@@ -0,0 +1,27 @@
+import { clientToWorld } from "../core/viewport/clientToWorld.js";
+import { useCallback } from "react";
+import { useLatest } from "@weasel-js/react";
+
+//#region src/canvas/useClientToWorld.ts
+/**
+* The canvas's one client→world conversion: hover, the view registry and both handles answer
+* with it, so a `clientToWorld` override reaches all of them or none.
+*/
+function useClientToWorld(elementRef, clientToWorld$1, viewRef) {
+	const clientToWorldRef = useLatest(clientToWorld$1);
+	return useCallback((clientX, clientY) => {
+		const el = elementRef.current;
+		if (!el) return [clientX, clientY];
+		const override = clientToWorldRef.current;
+		if (override) return override(el, clientX, clientY);
+		return clientToWorld(clientX, clientY, el.getBoundingClientRect(), viewRef.current);
+	}, [
+		elementRef,
+		clientToWorldRef,
+		viewRef
+	]);
+}
+
+//#endregion
+export { useClientToWorld };
+//# sourceMappingURL=useClientToWorld.js.map

package/dist/canvas/useClientToWorld.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientToWorld.js","names":["clientToWorld","clientToWorldHelper"],"sources":["../../src/canvas/useClientToWorld.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld as clientToWorldHelper } from 'core/viewport/clientToWorld';\nimport type { CanvasProps } from './canvasProps';\n\n/**\n * The canvas's one client→world conversion: hover, the view registry and both handles answer\n * with it, so a `clientToWorld` override reaches all of them or none.\n */\nexport function useClientToWorld(\n  elementRef: { readonly current: HTMLElement | null },\n  clientToWorld: CanvasProps<unknown>['clientToWorld'],\n  viewRef: { readonly current: View },\n): (clientX: number, clientY: number) => [number, number] {\n  const clientToWorldRef = useLatest(clientToWorld);\n  return useCallback((clientX: number, clientY: number): [number, number] => {\n    const el = elementRef.current;\n    if (!el) return [clientX, clientY];\n    const override = clientToWorldRef.current;\n    if (override) return override(el, clientX, clientY);\n    return clientToWorldHelper(clientX, clientY, el.getBoundingClientRect(), viewRef.current);\n  }, [elementRef, clientToWorldRef, viewRef]);\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,iBACd,YACA,iBACA,SACwD;CACxD,MAAM,mBAAmB,UAAUA,eAAa;CAChD,OAAO,aAAa,SAAiB,YAAsC;EACzE,MAAM,KAAK,WAAW;EACtB,IAAI,CAAC,IAAI,OAAO,CAAC,SAAS,OAAO;EACjC,MAAM,WAAW,iBAAiB;EAClC,IAAI,UAAU,OAAO,SAAS,IAAI,SAAS,OAAO;EAClD,OAAOC,cAAoB,SAAS,SAAS,GAAG,sBAAsB,GAAG,QAAQ,OAAO;CAC1F,GAAG;EAAC;EAAY;EAAkB;CAAO,CAAC;AAC5C"}

package/dist/canvas/useExtraLayers.js

@@ -0,0 +1,45 @@
+import { isLayerPainted } from "../core/layers/render.js";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/canvas/useExtraLayers.ts
+var alwaysVisible = (_id) => true;
+var NO_LAYER_VISIBILITY = {};
+/** Layers attached from outside the `layers` prop (a HUD, a loupe), and hit-testing over them. */
+function useExtraLayers(gateRef) {
+	const [extrasVersion, setExtrasVersion] = useState(0);
+	const extrasRef = useRef(/* @__PURE__ */ new Set());
+	return {
+		extrasRef,
+		extrasVersion,
+		registerLayer: useCallback((layer) => {
+			extrasRef.current.add(layer);
+			setExtrasVersion((n) => n + 1);
+			return () => {
+				extrasRef.current.delete(layer);
+				setExtrasVersion((n) => n + 1);
+			};
+		}, []),
+		hitTestExtrasIn: useCallback((worldX, worldY, view, dims, data, only) => {
+			const layers = [...extrasRef.current].reverse();
+			const gate = gateRef.current;
+			const isVisible = gate.getIsVisible?.() ?? alwaysVisible;
+			const visibility = gate.layerVisibility ?? NO_LAYER_VISIBILITY;
+			const order = gate.layerOrder;
+			for (const layer of layers) {
+				if (!layer.hitTest) continue;
+				if (only && !only.includes(layer)) continue;
+				if (!isLayerPainted(layer, visibility, order)) continue;
+				const hit = layer.hitTest(worldX, worldY, data, view, dims, isVisible);
+				if (hit) return {
+					layerId: layer.id,
+					hit
+				};
+			}
+			return null;
+		}, [gateRef])
+	};
+}
+
+//#endregion
+export { NO_LAYER_VISIBILITY, alwaysVisible, useExtraLayers };
+//# sourceMappingURL=useExtraLayers.js.map

package/dist/canvas/useExtraLayers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExtraLayers.js","names":[],"sources":["../../src/canvas/useExtraLayers.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { isLayerPainted, type RenderLayer } from 'core/layers/render';\nimport type { CanvasProps } from './canvasProps';\nimport type { SurfaceHandle } from './viewRegistry';\n\n/** Which layers reach the screen, and which chrome within them. */\nexport type LayerGate = Pick<CanvasProps<unknown>, 'getIsVisible' | 'layerVisibility' | 'layerOrder'>;\n\nexport const alwaysVisible = (_id: string): boolean => true;\nexport const NO_LAYER_VISIBILITY: Record<string, boolean> = {};\n\n/** Hit-test registered layers against a given frame, topmost first. */\nexport type HitTestExtrasIn = SurfaceHandle['hitTestExtras'];\n\nexport interface ExtraLayers {\n  /** Registered layers, in registration order. */\n  extrasRef: { readonly current: ReadonlySet<RenderLayer<unknown>> };\n  /** Bumped on every registration and removal, so a memo reading `extrasRef` re-runs. */\n  extrasVersion: number;\n  registerLayer(layer: RenderLayer<unknown>): () => void;\n  hitTestExtrasIn: HitTestExtrasIn;\n}\n\n/** Layers attached from outside the `layers` prop (a HUD, a loupe), and hit-testing over them. */\nexport function useExtraLayers(gateRef: { readonly current: LayerGate }): ExtraLayers {\n  const [extrasVersion, setExtrasVersion] = useState(0);\n  const extrasRef = useRef<Set<RenderLayer<unknown>>>(new Set());\n  const registerLayer = useCallback((layer: RenderLayer<unknown>) => {\n    extrasRef.current.add(layer);\n    setExtrasVersion(n => n + 1);\n    return () => {\n      extrasRef.current.delete(layer);\n      setExtrasVersion(n => n + 1);\n    };\n  }, []);\n\n  // Registration order is draw order, so the last-registered layer gets first\n  // refusal. `<SceneCanvas>` folds this into its `affordanceAt` thunk; Canvas\n  // has the layers but not the dispatcher.\n  const hitTestExtrasIn = useCallback<HitTestExtrasIn>((worldX, worldY, view, dims, data, only) => {\n    const layers = [...extrasRef.current].reverse();\n    const gate = gateRef.current;\n    const isVisible = gate.getIsVisible?.() ?? alwaysVisible;\n    const visibility = gate.layerVisibility ?? NO_LAYER_VISIBILITY;\n    const order = gate.layerOrder;\n    for (const layer of layers) {\n      if (!layer.hitTest) continue;\n      if (only && !only.includes(layer)) continue;\n      if (!isLayerPainted(layer, visibility, order)) continue;\n      const hit = layer.hitTest(worldX, worldY, data, view, dims, isVisible);\n      if (hit) return { layerId: layer.id, hit };\n    }\n    return null;\n  }, [gateRef]);\n\n  return { extrasRef, extrasVersion, registerLayer, hitTestExtrasIn };\n}\n"],"mappings":";;;;AAQA,IAAa,iBAAiB,QAAyB;AACvD,IAAa,sBAA+C,CAAC;;AAe7D,SAAgB,eAAe,SAAuD;CACpF,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC;CACpD,MAAM,YAAY,uBAAkC,IAAI,IAAI,CAAC;CA6B7D,OAAO;EAAE;EAAW;EAAe,eA5Bb,aAAa,UAAgC;GACjE,UAAU,QAAQ,IAAI,KAAK;GAC3B,kBAAiB,MAAK,IAAI,CAAC;GAC3B,aAAa;IACX,UAAU,QAAQ,OAAO,KAAK;IAC9B,kBAAiB,MAAK,IAAI,CAAC;GAC7B;EACF,GAAG,CAAC,CAqB+B;EAAe,iBAhB1B,aAA8B,QAAQ,QAAQ,MAAM,MAAM,MAAM,SAAS;GAC/F,MAAM,SAAS,CAAC,GAAG,UAAU,OAAO,CAAC,CAAC,QAAQ;GAC9C,MAAM,OAAO,QAAQ;GACrB,MAAM,YAAY,KAAK,eAAe,KAAK;GAC3C,MAAM,aAAa,KAAK,mBAAmB;GAC3C,MAAM,QAAQ,KAAK;GACnB,KAAK,MAAM,SAAS,QAAQ;IAC1B,IAAI,CAAC,MAAM,SAAS;IACpB,IAAI,QAAQ,CAAC,KAAK,SAAS,KAAK,GAAG;IACnC,IAAI,CAAC,eAAe,OAAO,YAAY,KAAK,GAAG;IAC/C,MAAM,MAAM,MAAM,QAAQ,QAAQ,QAAQ,MAAM,MAAM,MAAM,SAAS;IACrE,IAAI,KAAK,OAAO;KAAE,SAAS,MAAM;KAAI;IAAI;GAC3C;GACA,OAAO;EACT,GAAG,CAAC,OAAO,CAEuC;CAAgB;AACpE"}

package/dist/canvas/useFrameLoop.js

@@ -1,68 +1,128 @@
-import { useCallback as e, useInsertionEffect as t, useLayoutEffect as n, useRef as r } from "react";
-import { useLatest as i, useVisibleRaf as a } from "@weasel-js/react";
+import { useCallback, useInsertionEffect, useLayoutEffect, useRef } from "react";
+import { useLatest, useVisibleRaf } from "@weasel-js/react";
+
 //#region src/canvas/useFrameLoop.ts
-function o(o, s = {}) {
-	let c = r(!0), l = r(!0), u = r(!1), d = i(o), f = i(s.syncPaint ?? !1), p = r(/* @__PURE__ */ new Set()), m = r(/* @__PURE__ */ new Set()), h = r(/* @__PURE__ */ new Set()), g = r(-Infinity), _ = r(!1), v = r(null), y = e((e) => {
-		let t = Math.max(e, g.current);
-		g.current = t, c.current = !1, u.current = !0;
-		let n = !1;
+/**
+* The frame loop behind `<Canvas>`: a dirty flag, one frame in flight at a
+* time, and a subscriber set notified after a paint lands. When frames may run
+* at all is `useVisibleRaf`'s question, not this hook's — a redraw requested
+* while nothing can see the surface is held there and re-armed on resume.
+*
+* @internal Not consumer surface. Canvas exposes `requestRedraw` and
+*   `subscribeFrame` on its ref handle; this is how they are implemented.
+*/
+/**
+* @param paint Runs on the frame; returns whether pixels landed. A `false`
+*   leaves the surface dirty and notifies nobody, so the next request retries.
+*/
+function useFrameLoop(paint, options = {}) {
+	const dirtyRef = useRef(true);
+	const aliveRef = useRef(true);
+	const paintingRef = useRef(false);
+	const paintRef = useLatest(paint);
+	const syncRef = useLatest(options.syncPaint ?? false);
+	const subsRef = useRef(/* @__PURE__ */ new Set());
+	const beforeRef = useRef(/* @__PURE__ */ new Set());
+	const resumeRef = useRef(/* @__PURE__ */ new Set());
+	/** The last time handed to subscribers. A sync paint reads the clock at the
+	*  call and a rAF frame carries its frame's start, so within one animation
+	*  frame the second can be the earlier of the two. */
+	const lastTimeRef = useRef(-Infinity);
+	/** Set while recovering from a paint that threw, so one bad frame is retried
+	*  and a permanently throwing one still doesn't spin at frame rate. */
+	const retriedRef = useRef(false);
+	/** `frame.request`, which doesn't exist until after `runPaint` is built. */
+	const rearmRef = useRef(null);
+	const runPaint = useCallback((at) => {
+		const time = Math.max(at, lastTimeRef.current);
+		lastTimeRef.current = time;
+		dirtyRef.current = false;
+		paintingRef.current = true;
+		let landed = false;
 		try {
-			for (let e of m.current) e(t);
-			if (n = d.current(), !n) {
-				c.current = !0;
+			for (const fn of beforeRef.current) fn(time);
+			landed = paintRef.current();
+			if (!landed) {
+				dirtyRef.current = true;
 				return;
 			}
-			_.current = !1;
-			for (let e of p.current) e(t);
-		} catch (e) {
-			throw c.current = !0, _.current || (_.current = !0, v.current?.()), e;
+			retriedRef.current = false;
+			for (const fn of subsRef.current) fn(time);
+		} catch (err) {
+			dirtyRef.current = true;
+			if (!retriedRef.current) {
+				retriedRef.current = true;
+				rearmRef.current?.();
+			}
+			throw err;
 		} finally {
-			u.current = !1;
+			paintingRef.current = false;
 		}
-	}, [d]), b = a(e((e) => {
-		l.current && c.current && y(e);
-	}, [y]), {
-		target: s.target,
-		onResume: e(() => {
-			for (let e of h.current) e();
+	}, [paintRef]);
+	const frame = useVisibleRaf(useCallback((time) => {
+		if (!aliveRef.current || !dirtyRef.current) return;
+		runPaint(time);
+	}, [runPaint]), {
+		target: options.target,
+		onResume: useCallback(() => {
+			for (const fn of resumeRef.current) fn();
 		}, [])
 	});
-	t(() => {
-		v.current = () => {
-			b.request();
+	useInsertionEffect(() => {
+		rearmRef.current = () => {
+			frame.request();
 		};
 	});
-	let x = e(() => {
-		if (c.current = !0, f.current && l.current && !u.current && b.isVisible()) {
-			y(performance.now());
+	const requestRedraw = useCallback(() => {
+		dirtyRef.current = true;
+		if (syncRef.current && aliveRef.current && !paintingRef.current && frame.isVisible()) {
+			runPaint(performance.now());
 			return;
 		}
-		b.request();
+		frame.request();
 	}, [
-		b,
-		y,
-		f
-	]), S = e((e) => (p.current.add(e), () => {
-		p.current.delete(e);
-	}), []), C = e((e) => (m.current.add(e), () => {
-		m.current.delete(e);
-	}), []), w = e((e) => (h.current.add(e), () => {
-		h.current.delete(e);
-	}), []);
-	return n(() => {
-		l.current = !0;
-		let e = p.current, t = m.current, n = h.current;
+		frame,
+		runPaint,
+		syncRef
+	]);
+	const subscribeFrame = useCallback((fn) => {
+		subsRef.current.add(fn);
+		return () => {
+			subsRef.current.delete(fn);
+		};
+	}, []);
+	const subscribeBeforePaint = useCallback((fn) => {
+		beforeRef.current.add(fn);
+		return () => {
+			beforeRef.current.delete(fn);
+		};
+	}, []);
+	const subscribeResume = useCallback((fn) => {
+		resumeRef.current.add(fn);
+		return () => {
+			resumeRef.current.delete(fn);
+		};
+	}, []);
+	useLayoutEffect(() => {
+		aliveRef.current = true;
+		const subs = subsRef.current;
+		const before = beforeRef.current;
+		const resume = resumeRef.current;
 		return () => {
-			l.current = !1, e.clear(), t.clear(), n.clear();
+			aliveRef.current = false;
+			subs.clear();
+			before.clear();
+			resume.clear();
 		};
-	}, []), {
-		requestRedraw: x,
-		subscribeFrame: S,
-		subscribeBeforePaint: C,
-		subscribeResume: w
+	}, []);
+	return {
+		requestRedraw,
+		subscribeFrame,
+		subscribeBeforePaint,
+		subscribeResume
 	};
 }
-//#endregion
-export { o as useFrameLoop };
 
+//#endregion
+export { useFrameLoop };
 //# sourceMappingURL=useFrameLoop.js.map

package/dist/canvas/useFrameLoop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFrameLoop.js","names":["useFrameLoop","dirtyRef","useRef","aliveRef","paintingRef","paintRef","useLatest","paint","syncRef","options","subsRef","beforeRef","resumeRef","lastTimeRef","retriedRef","rearmRef","runPaint","useCallback","time","at","landed","fn","err","frame","useVisibleRaf","requestRedraw","subscribeFrame","subscribeBeforePaint","subscribeResume","useLayoutEffect","subs","before","resume"],"sources":["../../src/canvas/useFrameLoop.ts"],"sourcesContent":["/**\n * The frame loop behind `<Canvas>`: a dirty flag, one frame in flight at a\n * time, and a subscriber set notified after a paint lands. When frames may run\n * at all is `useVisibleRaf`'s question, not this hook's — a redraw requested\n * while nothing can see the surface is held there and re-armed on resume.\n *\n * @internal Not consumer surface. Canvas exposes `requestRedraw` and\n *   `subscribeFrame` on its ref handle; this is how they are implemented.\n */\n\nimport { useCallback, useInsertionEffect, useLayoutEffect, useRef } from 'react';\nimport { useLatest, useVisibleRaf, type VisibleRafTarget } from '@weasel-js/react';\n\nexport interface FrameLoop {\n  /** Mark the surface dirty and schedule a frame. Identity is stable for the\n   *  lifetime of the component — consumers capture it. */\n  requestRedraw(): void;\n  /** Run `fn` after every landed paint, with the frame's time. Returns an\n   *  unsubscribe. */\n  subscribeFrame(fn: (time: number) => void): () => void;\n  /** Run `fn` on every frame just before its paint, with the frame's time.\n   *  Returns an unsubscribe. */\n  subscribeBeforePaint(fn: (time: number) => void): () => void;\n  /** Run `fn` when the loop leaves suspension, before the frame that follows.\n   *  Returns an unsubscribe. */\n  subscribeResume(fn: () => void): () => void;\n}\n\nexport interface FrameLoopOptions {\n  /** Paint in the caller's own stack — the commit or event that asked for the\n   *  redraw — instead of on the next animation frame. Read live, so toggling\n   *  it takes effect from the next `requestRedraw` on. */\n  syncPaint?: boolean;\n  /** The surface being painted. Given one, the loop also stops while that\n   *  element sits outside the viewport, not only while the tab is hidden. */\n  target?: VisibleRafTarget;\n}\n\n/**\n * @param paint Runs on the frame; returns whether pixels landed. A `false`\n *   leaves the surface dirty and notifies nobody, so the next request retries.\n */\nexport function useFrameLoop(paint: () => boolean, options: FrameLoopOptions = {}): FrameLoop {\n  const dirtyRef = useRef(true);\n  const aliveRef = useRef(true);\n  const paintingRef = useRef(false);\n  const paintRef = useLatest(paint);\n  const syncRef = useLatest(options.syncPaint ?? false);\n  const subsRef = useRef<Set<(time: number) => void>>(new Set());\n  const beforeRef = useRef<Set<(time: number) => void>>(new Set());\n  const resumeRef = useRef<Set<() => void>>(new Set());\n  /** The last time handed to subscribers. A sync paint reads the clock at the\n   *  call and a rAF frame carries its frame's start, so within one animation\n   *  frame the second can be the earlier of the two. */\n  const lastTimeRef = useRef(-Infinity);\n\n  /** Set while recovering from a paint that threw, so one bad frame is retried\n   *  and a permanently throwing one still doesn't spin at frame rate. */\n  const retriedRef = useRef(false);\n  /** `frame.request`, which doesn't exist until after `runPaint` is built. */\n  const rearmRef = useRef<(() => void) | null>(null);\n\n  const runPaint = useCallback((at: number) => {\n    const time = Math.max(at, lastTimeRef.current);\n    lastTimeRef.current = time;\n    dirtyRef.current = false;\n    paintingRef.current = true;\n    let landed = false;\n    try {\n      for (const fn of beforeRef.current) fn(time);\n      landed = paintRef.current();\n      if (!landed) {\n        dirtyRef.current = true;\n        return;\n      }\n      retriedRef.current = false;\n      // Notified inside the guard: a subscriber calling `requestRedraw` under\n      // `syncPaint` would otherwise re-enter this synchronously, without bound.\n      for (const fn of subsRef.current) fn(time);\n    } catch (err) {\n      // A throw skips the `!landed` branch above, so without this the surface\n      // is left clean but unpainted — the pixels on screen are whatever the\n      // last landed frame left, and nothing repaints until something\n      // unrelated happens to request a redraw. That is how a single\n      // malformed node blanked a whole document until the pointer moved.\n      dirtyRef.current = true;\n      if (!retriedRef.current) {\n        retriedRef.current = true;\n        rearmRef.current?.();\n      }\n      throw err;\n    } finally {\n      paintingRef.current = false;\n    }\n  }, [paintRef]);\n\n  const frame = useVisibleRaf(\n    useCallback((time: number) => {\n      if (!aliveRef.current || !dirtyRef.current) return;\n      runPaint(time);\n    }, [runPaint]),\n    {\n      target: options.target,\n      onResume: useCallback(() => { for (const fn of resumeRef.current) fn(); }, []),\n    },\n  );\n  useInsertionEffect(() => {\n    rearmRef.current = () => { frame.request(); };\n  });\n\n  const requestRedraw = useCallback(() => {\n    dirtyRef.current = true;\n    // The gate suppresses the sync path too: a background tab still commits\n    // React updates, and that is the one paint browser throttling does not stop.\n    // A request made from inside a draw or a frame subscriber would recurse\n    // forever if it painted here, so re-entrant ones fall through to a frame.\n    if (syncRef.current && aliveRef.current && !paintingRef.current && frame.isVisible()) {\n      runPaint(performance.now());\n      return;\n    }\n    frame.request();\n  }, [frame, runPaint, syncRef]);\n\n  const subscribeFrame = useCallback((fn: (time: number) => void) => {\n    subsRef.current.add(fn);\n    return () => { subsRef.current.delete(fn); };\n  }, []);\n  const subscribeBeforePaint = useCallback((fn: (time: number) => void) => {\n    beforeRef.current.add(fn);\n    return () => { beforeRef.current.delete(fn); };\n  }, []);\n\n  const subscribeResume = useCallback((fn: () => void) => {\n    resumeRef.current.add(fn);\n    return () => { resumeRef.current.delete(fn); };\n  }, []);\n\n  // `requestRedraw` outlives the component: `@weasel-js/hud` calls it from a\n  // `.then()`, and `viewRegistry.attachSurface` hands it to the consumer.\n  // Re-armed in setup because refs survive StrictMode's simulated remount, and\n  // a layout effect so the arming precedes Canvas's own layout effects — the\n  // sync-paint path runs in one of those.\n  useLayoutEffect(() => {\n    aliveRef.current = true;\n    const subs = subsRef.current;\n    const before = beforeRef.current;\n    const resume = resumeRef.current;\n    return () => {\n      aliveRef.current = false;\n      subs.clear();\n      before.clear();\n      resume.clear();\n    };\n  }, []);\n\n  return { requestRedraw, subscribeFrame, subscribeBeforePaint, subscribeResume };\n}\n"],"mappings":";;;AA0CA,SAAgBA,EAAa,GAAsB,IAA4B,CAAC,GAAc;CAC5F,IAAMC,IAAWC,EAAO,EAAI,GACtBC,IAAWD,EAAO,EAAI,GACtBE,IAAcF,EAAO,EAAK,GAC1BG,IAAWC,EAAUC,CAAK,GAC1BC,IAAUF,EAAUG,EAAQ,aAAa,EAAK,GAC9CC,IAAUR,kBAAoC,IAAI,IAAI,CAAC,GACvDS,IAAYT,kBAAoC,IAAI,IAAI,CAAC,GACzDU,IAAYV,kBAAwB,IAAI,IAAI,CAAC,GAI7CW,IAAcX,EAAO,SAAS,GAI9BY,IAAaZ,EAAO,EAAK,GAEzBa,IAAWb,EAA4B,IAAI,GAE3Cc,IAAWC,GAAa,MAAe;EAC3C,IAAMC,IAAO,KAAK,IAAIC,GAAIN,EAAY,OAAO;EAG7C,AAFA,EAAY,UAAUK,GACtB,EAAS,UAAU,IACnB,EAAY,UAAU;EACtB,IAAIE,IAAS;EACb,IAAI;GACF,KAAK,IAAMC,KAAMV,EAAU,SAAS,EAAGO,CAAI;GAE3C,IADA,IAASb,EAAS,QAAQ,GACtB,CAACe,GAAQ;IACX,EAAS,UAAU;IACnB;GACF;GACA,EAAW,UAAU;GAGrB,KAAK,IAAMC,KAAMX,EAAQ,SAAS,EAAGQ,CAAI;EAC3C,SAASI,GAAK;GAWZ,MALA,EAAS,UAAU,IACdR,EAAW,YACd,EAAW,UAAU,IACrBC,EAAS,UAAU,IAEfO;EACR,UAAU;GACR,EAAY,UAAU;EACxB;CACF,GAAG,CAACjB,CAAQ,CAAC,GAEPkB,IAAQC,EACZP,GAAa,MAAiB;EAC5B,AAAKd,EAAS,WAAYF,EAAS,WACnCe,EAASE,CAAI;CACf,GAAG,CAACF,CAAQ,CAAC,GACb;EACE,QAAQP,EAAQ;EAChB,UAAUQ,QAAkB;GAAE,KAAK,IAAMI,KAAMT,EAAU,SAAS,EAAG;EAAG,GAAG,CAAC,CAAC;CAC/E,CACF;CACA,QAAyB;EACvB,EAAS,gBAAgB;GAAE,EAAM,QAAQ;EAAG;CAC9C,CAAC;CAED,IAAMa,IAAgBR,QAAkB;EAMtC,IALA,EAAS,UAAU,IAKfT,EAAQ,WAAWL,EAAS,WAAW,CAACC,EAAY,WAAWmB,EAAM,UAAU,GAAG;GACpF,EAAS,YAAY,IAAI,CAAC;GAC1B;EACF;EACA,EAAM,QAAQ;CAChB,GAAG;EAACA;EAAOP;EAAUR;CAAO,CAAC,GAEvBkB,IAAiBT,GAAa,OAClCP,EAAQ,QAAQ,IAAIW,CAAE,SACT;EAAE,EAAQ,QAAQ,OAAOA,CAAE;CAAG,IAC1C,CAAC,CAAC,GACCM,IAAuBV,GAAa,OACxCN,EAAU,QAAQ,IAAIU,CAAE,SACX;EAAE,EAAU,QAAQ,OAAOA,CAAE;CAAG,IAC5C,CAAC,CAAC,GAECO,IAAkBX,GAAa,OACnCL,EAAU,QAAQ,IAAIS,CAAE,SACX;EAAE,EAAU,QAAQ,OAAOA,CAAE;CAAG,IAC5C,CAAC,CAAC;CAoBL,OAbAQ,QAAsB;EACpB,EAAS,UAAU;EACnB,IAAMC,IAAOpB,EAAQ,SACfqB,IAASpB,EAAU,SACnBqB,IAASpB,EAAU;EACzB,aAAa;GAIX,AAHA,EAAS,UAAU,IACnBkB,EAAK,MAAM,GACXC,EAAO,MAAM,GACbC,EAAO,MAAM;EACf;CACF,GAAG,CAAC,CAAC,GAEE;EAAE;EAAe;EAAgB;EAAsB;CAAgB;AAChF"}
+{"version":3,"file":"useFrameLoop.js","names":[],"sources":["../../src/canvas/useFrameLoop.ts"],"sourcesContent":["/**\n * The frame loop behind `<Canvas>`: a dirty flag, one frame in flight at a\n * time, and a subscriber set notified after a paint lands. When frames may run\n * at all is `useVisibleRaf`'s question, not this hook's — a redraw requested\n * while nothing can see the surface is held there and re-armed on resume.\n *\n * @internal Not consumer surface. Canvas exposes `requestRedraw` and\n *   `subscribeFrame` on its ref handle; this is how they are implemented.\n */\n\nimport { useCallback, useInsertionEffect, useLayoutEffect, useRef } from 'react';\nimport { useLatest, useVisibleRaf, type VisibleRafTarget } from '@weasel-js/react';\n\nexport interface FrameLoop {\n  /** Mark the surface dirty and schedule a frame. Identity is stable for the\n   *  lifetime of the component — consumers capture it. */\n  requestRedraw(): void;\n  /** Run `fn` after every landed paint, with the frame's time. Returns an\n   *  unsubscribe. */\n  subscribeFrame(fn: (time: number) => void): () => void;\n  /** Run `fn` on every frame just before its paint, with the frame's time.\n   *  Returns an unsubscribe. */\n  subscribeBeforePaint(fn: (time: number) => void): () => void;\n  /** Run `fn` when the loop leaves suspension, before the frame that follows.\n   *  Returns an unsubscribe. */\n  subscribeResume(fn: () => void): () => void;\n}\n\nexport interface FrameLoopOptions {\n  /** Paint in the caller's own stack — the commit or event that asked for the\n   *  redraw — instead of on the next animation frame. Read live, so toggling\n   *  it takes effect from the next `requestRedraw` on. */\n  syncPaint?: boolean;\n  /** The surface being painted. Given one, the loop also stops while that\n   *  element sits outside the viewport, not only while the tab is hidden. */\n  target?: VisibleRafTarget;\n}\n\n/**\n * @param paint Runs on the frame; returns whether pixels landed. A `false`\n *   leaves the surface dirty and notifies nobody, so the next request retries.\n */\nexport function useFrameLoop(paint: () => boolean, options: FrameLoopOptions = {}): FrameLoop {\n  const dirtyRef = useRef(true);\n  const aliveRef = useRef(true);\n  const paintingRef = useRef(false);\n  const paintRef = useLatest(paint);\n  const syncRef = useLatest(options.syncPaint ?? false);\n  const subsRef = useRef<Set<(time: number) => void>>(new Set());\n  const beforeRef = useRef<Set<(time: number) => void>>(new Set());\n  const resumeRef = useRef<Set<() => void>>(new Set());\n  /** The last time handed to subscribers. A sync paint reads the clock at the\n   *  call and a rAF frame carries its frame's start, so within one animation\n   *  frame the second can be the earlier of the two. */\n  const lastTimeRef = useRef(-Infinity);\n\n  /** Set while recovering from a paint that threw, so one bad frame is retried\n   *  and a permanently throwing one still doesn't spin at frame rate. */\n  const retriedRef = useRef(false);\n  /** `frame.request`, which doesn't exist until after `runPaint` is built. */\n  const rearmRef = useRef<(() => void) | null>(null);\n\n  const runPaint = useCallback((at: number) => {\n    const time = Math.max(at, lastTimeRef.current);\n    lastTimeRef.current = time;\n    dirtyRef.current = false;\n    paintingRef.current = true;\n    let landed = false;\n    try {\n      for (const fn of beforeRef.current) fn(time);\n      landed = paintRef.current();\n      if (!landed) {\n        dirtyRef.current = true;\n        return;\n      }\n      retriedRef.current = false;\n      // Notified inside the guard: a subscriber calling `requestRedraw` under\n      // `syncPaint` would otherwise re-enter this synchronously, without bound.\n      for (const fn of subsRef.current) fn(time);\n    } catch (err) {\n      // A throw skips the `!landed` branch above, so without this the surface\n      // is left clean but unpainted — the pixels on screen are whatever the\n      // last landed frame left, and nothing repaints until something\n      // unrelated happens to request a redraw. That is how a single\n      // malformed node blanked a whole document until the pointer moved.\n      dirtyRef.current = true;\n      if (!retriedRef.current) {\n        retriedRef.current = true;\n        rearmRef.current?.();\n      }\n      throw err;\n    } finally {\n      paintingRef.current = false;\n    }\n  }, [paintRef]);\n\n  const frame = useVisibleRaf(\n    useCallback((time: number) => {\n      if (!aliveRef.current || !dirtyRef.current) return;\n      runPaint(time);\n    }, [runPaint]),\n    {\n      target: options.target,\n      onResume: useCallback(() => { for (const fn of resumeRef.current) fn(); }, []),\n    },\n  );\n  useInsertionEffect(() => {\n    rearmRef.current = () => { frame.request(); };\n  });\n\n  const requestRedraw = useCallback(() => {\n    dirtyRef.current = true;\n    // The gate suppresses the sync path too: a background tab still commits\n    // React updates, and that is the one paint browser throttling does not stop.\n    // A request made from inside a draw or a frame subscriber would recurse\n    // forever if it painted here, so re-entrant ones fall through to a frame.\n    if (syncRef.current && aliveRef.current && !paintingRef.current && frame.isVisible()) {\n      runPaint(performance.now());\n      return;\n    }\n    frame.request();\n  }, [frame, runPaint, syncRef]);\n\n  const subscribeFrame = useCallback((fn: (time: number) => void) => {\n    subsRef.current.add(fn);\n    return () => { subsRef.current.delete(fn); };\n  }, []);\n  const subscribeBeforePaint = useCallback((fn: (time: number) => void) => {\n    beforeRef.current.add(fn);\n    return () => { beforeRef.current.delete(fn); };\n  }, []);\n\n  const subscribeResume = useCallback((fn: () => void) => {\n    resumeRef.current.add(fn);\n    return () => { resumeRef.current.delete(fn); };\n  }, []);\n\n  // `requestRedraw` outlives the component: `@weasel-js/hud` calls it from a\n  // `.then()`, and `viewRegistry.attachSurface` hands it to the consumer.\n  // Re-armed in setup because refs survive StrictMode's simulated remount, and\n  // a layout effect so the arming precedes Canvas's own layout effects — the\n  // sync-paint path runs in one of those.\n  useLayoutEffect(() => {\n    aliveRef.current = true;\n    const subs = subsRef.current;\n    const before = beforeRef.current;\n    const resume = resumeRef.current;\n    return () => {\n      aliveRef.current = false;\n      subs.clear();\n      before.clear();\n      resume.clear();\n    };\n  }, []);\n\n  return { requestRedraw, subscribeFrame, subscribeBeforePaint, subscribeResume };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA0CA,SAAgB,aAAa,OAAsB,UAA4B,CAAC,GAAc;CAC5F,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,WAAW,UAAU,KAAK;CAChC,MAAM,UAAU,UAAU,QAAQ,aAAa,KAAK;CACpD,MAAM,UAAU,uBAAoC,IAAI,IAAI,CAAC;CAC7D,MAAM,YAAY,uBAAoC,IAAI,IAAI,CAAC;CAC/D,MAAM,YAAY,uBAAwB,IAAI,IAAI,CAAC;;;;CAInD,MAAM,cAAc,OAAO,SAAS;;;CAIpC,MAAM,aAAa,OAAO,KAAK;;CAE/B,MAAM,WAAW,OAA4B,IAAI;CAEjD,MAAM,WAAW,aAAa,OAAe;EAC3C,MAAM,OAAO,KAAK,IAAI,IAAI,YAAY,OAAO;EAC7C,YAAY,UAAU;EACtB,SAAS,UAAU;EACnB,YAAY,UAAU;EACtB,IAAI,SAAS;EACb,IAAI;GACF,KAAK,MAAM,MAAM,UAAU,SAAS,GAAG,IAAI;GAC3C,SAAS,SAAS,QAAQ;GAC1B,IAAI,CAAC,QAAQ;IACX,SAAS,UAAU;IACnB;GACF;GACA,WAAW,UAAU;GAGrB,KAAK,MAAM,MAAM,QAAQ,SAAS,GAAG,IAAI;EAC3C,SAAS,KAAK;GAMZ,SAAS,UAAU;GACnB,IAAI,CAAC,WAAW,SAAS;IACvB,WAAW,UAAU;IACrB,SAAS,UAAU;GACrB;GACA,MAAM;EACR,UAAU;GACR,YAAY,UAAU;EACxB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,QAAQ,cACZ,aAAa,SAAiB;EAC5B,IAAI,CAAC,SAAS,WAAW,CAAC,SAAS,SAAS;EAC5C,SAAS,IAAI;CACf,GAAG,CAAC,QAAQ,CAAC,GACb;EACE,QAAQ,QAAQ;EAChB,UAAU,kBAAkB;GAAE,KAAK,MAAM,MAAM,UAAU,SAAS,GAAG;EAAG,GAAG,CAAC,CAAC;CAC/E,CACF;CACA,yBAAyB;EACvB,SAAS,gBAAgB;GAAE,MAAM,QAAQ;EAAG;CAC9C,CAAC;CAED,MAAM,gBAAgB,kBAAkB;EACtC,SAAS,UAAU;EAKnB,IAAI,QAAQ,WAAW,SAAS,WAAW,CAAC,YAAY,WAAW,MAAM,UAAU,GAAG;GACpF,SAAS,YAAY,IAAI,CAAC;GAC1B;EACF;EACA,MAAM,QAAQ;CAChB,GAAG;EAAC;EAAO;EAAU;CAAO,CAAC;CAE7B,MAAM,iBAAiB,aAAa,OAA+B;EACjE,QAAQ,QAAQ,IAAI,EAAE;EACtB,aAAa;GAAE,QAAQ,QAAQ,OAAO,EAAE;EAAG;CAC7C,GAAG,CAAC,CAAC;CACL,MAAM,uBAAuB,aAAa,OAA+B;EACvE,UAAU,QAAQ,IAAI,EAAE;EACxB,aAAa;GAAE,UAAU,QAAQ,OAAO,EAAE;EAAG;CAC/C,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,aAAa,OAAmB;EACtD,UAAU,QAAQ,IAAI,EAAE;EACxB,aAAa;GAAE,UAAU,QAAQ,OAAO,EAAE;EAAG;CAC/C,GAAG,CAAC,CAAC;CAOL,sBAAsB;EACpB,SAAS,UAAU;EACnB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EACzB,MAAM,SAAS,UAAU;EACzB,aAAa;GACX,SAAS,UAAU;GACnB,KAAK,MAAM;GACX,OAAO,MAAM;GACb,OAAO,MAAM;EACf;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EAAE;EAAe;EAAgB;EAAsB;CAAgB;AAChF"}

package/dist/canvas/useHitObserver.js

@@ -1,23 +1,30 @@
-import { useMemo as e } from "react";
-import { useLatest as t } from "@weasel-js/react";
+import { useMemo } from "react";
+import { useLatest } from "@weasel-js/react";
+
 //#region src/canvas/useHitObserver.ts
-function n(n, r) {
-	let i = t(n), a = !!n;
-	return e(() => {
-		if (a) return (e) => {
-			let t = r.current?.(e.x, e.y);
-			i.current?.(t ? {
-				id: t.id,
-				kind: t.kind
+/** Turns a consumer's hit callback into the world-point observer the gesture
+*  dispatcher takes, resolving the hit with the canvas's own picker. Identity
+*  changes only between wired and not, so the dispatcher isn't rebuilt per
+*  render. */
+function useHitObserver(cb, pickerRef) {
+	const cbRef = useLatest(cb);
+	const wired = Boolean(cb);
+	return useMemo(() => {
+		if (!wired) return void 0;
+		return (world) => {
+			const result = pickerRef.current?.(world.x, world.y);
+			cbRef.current?.(result ? {
+				id: result.id,
+				kind: result.kind
 			} : null);
 		};
 	}, [
-		a,
-		i,
-		r
+		wired,
+		cbRef,
+		pickerRef
 	]);
 }
-//#endregion
-export { n as useHitObserver };
 
+//#endregion
+export { useHitObserver };
 //# sourceMappingURL=useHitObserver.js.map

package/dist/canvas/useHitObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHitObserver.js","names":["useHitObserver","cbRef","useLatest","cb","wired","useMemo","result","pickerRef","world"],"sources":["../../src/canvas/useHitObserver.ts"],"sourcesContent":["import { useMemo, type MutableRefObject } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { SceneCanvasHit } from './SceneCanvas';\n\ntype Picker = ((x: number, y: number) => { id: string; kind: string } | null | undefined) | undefined;\n\n/** Turns a consumer's hit callback into the world-point observer the gesture\n *  dispatcher takes, resolving the hit with the canvas's own picker. Identity\n *  changes only between wired and not, so the dispatcher isn't rebuilt per\n *  render. */\nexport function useHitObserver(\n  cb: ((hit: SceneCanvasHit | null) => void) | undefined,\n  pickerRef: MutableRefObject<Picker>,\n): ((world: { x: number; y: number }) => void) | undefined {\n  const cbRef = useLatest(cb);\n  const wired = Boolean(cb);\n  return useMemo(() => {\n    if (!wired) return undefined;\n    return (world) => {\n      const result = pickerRef.current?.(world.x, world.y);\n      cbRef.current?.(result ? { id: result.id, kind: result.kind } : null);\n    };\n  }, [wired, cbRef, pickerRef]);\n}\n"],"mappings":";;;AAUA,SAAgBA,EACd,GACA,GACyD;CACzD,IAAMC,IAAQC,EAAUC,CAAE,GACpBC,IAAQ,EAAQD;CACtB,OAAOE,QAAc;EACnB,IAAKD,GACL,QAAQ,MAAU;GAChB,IAAME,IAASC,EAAU,UAAUC,EAAM,GAAGA,EAAM,CAAC;GACnD,EAAM,UAAUF,IAAS;IAAE,IAAIA,EAAO;IAAI,MAAMA,EAAO;GAAK,IAAI,IAAI;EACtE;CACF,GAAG;EAACF;EAAOH;EAAOM;CAAS,CAAC;AAC9B"}
+{"version":3,"file":"useHitObserver.js","names":[],"sources":["../../src/canvas/useHitObserver.ts"],"sourcesContent":["import { useMemo, type MutableRefObject } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { SceneCanvasHit } from './SceneCanvas';\n\ntype Picker = ((x: number, y: number) => { id: string; kind: string } | null | undefined) | undefined;\n\n/** Turns a consumer's hit callback into the world-point observer the gesture\n *  dispatcher takes, resolving the hit with the canvas's own picker. Identity\n *  changes only between wired and not, so the dispatcher isn't rebuilt per\n *  render. */\nexport function useHitObserver(\n  cb: ((hit: SceneCanvasHit | null) => void) | undefined,\n  pickerRef: MutableRefObject<Picker>,\n): ((world: { x: number; y: number }) => void) | undefined {\n  const cbRef = useLatest(cb);\n  const wired = Boolean(cb);\n  return useMemo(() => {\n    if (!wired) return undefined;\n    return (world) => {\n      const result = pickerRef.current?.(world.x, world.y);\n      cbRef.current?.(result ? { id: result.id, kind: result.kind } : null);\n    };\n  }, [wired, cbRef, pickerRef]);\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,eACd,IACA,WACyD;CACzD,MAAM,QAAQ,UAAU,EAAE;CAC1B,MAAM,QAAQ,QAAQ,EAAE;CACxB,OAAO,cAAc;EACnB,IAAI,CAAC,OAAO,OAAO;EACnB,QAAQ,UAAU;GAChB,MAAM,SAAS,UAAU,UAAU,MAAM,GAAG,MAAM,CAAC;GACnD,MAAM,UAAU,SAAS;IAAE,IAAI,OAAO;IAAI,MAAM,OAAO;GAAK,IAAI,IAAI;EACtE;CACF,GAAG;EAAC;EAAO;EAAO;CAAS,CAAC;AAC9B"}

package/dist/canvas/useHostAnchor.js

@@ -1,73 +1,103 @@
-import { hostAnchorCss as e, hostAnchorRect as t } from "./hostAnchor.js";
-import { watchElementMove as n } from "./watchElementMove.js";
-import { useCallback as r, useEffect as i, useState as a } from "react";
-import { useLatest as o, useVisibleRaf as s } from "@weasel-js/react";
+import { hostAnchorCss, hostAnchorRect } from "./hostAnchor.js";
+import { watchElementMove } from "./watchElementMove.js";
+import { useCallback, useEffect, useState } from "react";
+import { useLatest, useVisibleRaf } from "@weasel-js/react";
+
 //#region src/canvas/useHostAnchor.ts
-function c(c, l) {
-	let [u, d] = a(null), [f, p] = a(null), m = r((e) => d(e), []), h = o(c), { align: g, offset: _, padding: v = 0 } = l, { x: y, y: b } = g, { x, y: S } = _, C = r(() => {
-		let n = h.current();
-		if (!n) {
-			p(null);
+/**
+* Hold a fixed-position panel against a host element's corner, kept inside the
+* viewport, following it through scrolls, resizes, and reflows, a host moved by
+* its neighbors included.
+*
+* `resolveHost` runs on every recompute, so a host that mounts late or is found
+* by selector works the same as one held in a ref. Put the returned `ref` on the
+* panel: until it is measured the panel counts as zero-sized, which resolves to
+* the bare corner, so the first paint lands where an unclamped anchor would and
+* measurement only ever pulls it back on screen.
+*/
+function useHostAnchor(resolveHost, options) {
+	const [panel, setPanel] = useState(null);
+	const [style, setStyle] = useState(null);
+	const ref = useCallback((el) => setPanel(el), []);
+	const resolve = useLatest(resolveHost);
+	const { align, offset, padding = 0 } = options;
+	const { x: alignX, y: alignY } = align;
+	const { x: offsetX, y: offsetY } = offset;
+	const recompute = useCallback(() => {
+		const hostEl = resolve.current();
+		if (!hostEl) {
+			setStyle(null);
 			return;
 		}
-		let r = n.getBoundingClientRect(), i = u?.getBoundingClientRect(), a = {
+		const h = hostEl.getBoundingClientRect();
+		const p = panel?.getBoundingClientRect();
+		const viewport = {
 			width: window.innerWidth,
 			height: window.innerHeight
-		}, o = {
-			x: y,
-			y: b
-		}, s = t({
+		};
+		const align = {
+			x: alignX,
+			y: alignY
+		};
+		const rect = hostAnchorRect({
 			host: {
-				x: r.left,
-				y: r.top,
-				width: r.width,
-				height: r.height
+				x: h.left,
+				y: h.top,
+				width: h.width,
+				height: h.height
 			},
 			panel: {
-				width: i?.width ?? 0,
-				height: i?.height ?? 0
+				width: p?.width ?? 0,
+				height: p?.height ?? 0
 			},
-			viewport: a,
-			align: o,
+			viewport,
+			align,
 			offset: {
-				x,
-				y: S
+				x: offsetX,
+				y: offsetY
 			},
-			padding: v
+			padding
 		});
-		p(e(s, o, a));
+		setStyle(hostAnchorCss(rect, align, viewport));
 	}, [
-		h,
-		u,
-		y,
-		b,
-		x,
-		S,
-		v
-	]), w = s(C);
-	return i(() => {
-		C();
-		let e = () => w.request();
-		window.addEventListener("scroll", e, !0), window.addEventListener("resize", e);
-		let t = typeof ResizeObserver < "u" ? new ResizeObserver(e) : null;
-		u && t?.observe(u);
-		let r = h.current();
-		r && t?.observe(r);
-		let i = r ? n(r, e) : void 0;
+		resolve,
+		panel,
+		alignX,
+		alignY,
+		offsetX,
+		offsetY,
+		padding
+	]);
+	const raf = useVisibleRaf(recompute);
+	useEffect(() => {
+		recompute();
+		const schedule = () => raf.request();
+		window.addEventListener("scroll", schedule, true);
+		window.addEventListener("resize", schedule);
+		const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : null;
+		if (panel) observer?.observe(panel);
+		const hostEl = resolve.current();
+		if (hostEl) observer?.observe(hostEl);
+		const unwatchMove = hostEl ? watchElementMove(hostEl, schedule) : void 0;
 		return () => {
-			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), w.cancel(), t?.disconnect(), i?.();
+			window.removeEventListener("scroll", schedule, true);
+			window.removeEventListener("resize", schedule);
+			raf.cancel();
+			observer?.disconnect();
+			unwatchMove?.();
 		};
 	}, [
-		C,
-		w,
-		u,
-		h
-	]), {
-		ref: m,
-		style: f
+		recompute,
+		raf,
+		panel,
+		resolve
+	]);
+	return {
+		ref,
+		style
 	};
 }
-//#endregion
-export { c as useHostAnchor };
 
+//#endregion
+export { useHostAnchor };
 //# sourceMappingURL=useHostAnchor.js.map

package/dist/canvas/useHostAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHostAnchor.js","names":["useHostAnchor","panel","setPanel","useState","style","setStyle","ref","useCallback","el","resolve","useLatest","resolveHost","options","alignX","alignY","align","offsetX","offsetY","offset","recompute","hostEl","h","p","viewport","rect","hostAnchorRect","hostAnchorCss","padding","raf","useVisibleRaf","useEffect","schedule","observer","unwatchMove","watchElementMove"],"sources":["../../src/canvas/useHostAnchor.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useLatest, useVisibleRaf } from '@weasel-js/react';\nimport {\n  hostAnchorCss, hostAnchorRect,\n  type HostAnchorAlign, type HostAnchorOffset,\n} from './hostAnchor';\nimport { watchElementMove } from './watchElementMove';\n\n/** Options for {@link useHostAnchor}. */\nexport interface UseHostAnchorOptions {\n  align: HostAnchorAlign;\n  offset: HostAnchorOffset;\n  /** Minimum gap kept between the panel and the viewport edge. Default 0. */\n  padding?: number;\n}\n\n/** CSS the caller spreads onto the panel; which edges appear follows `align`. */\nexport type HostAnchorStyle = { top?: number; right?: number; bottom?: number; left?: number };\n\n/**\n * Hold a fixed-position panel against a host element's corner, kept inside the\n * viewport, following it through scrolls, resizes, and reflows, a host moved by\n * its neighbors included.\n *\n * `resolveHost` runs on every recompute, so a host that mounts late or is found\n * by selector works the same as one held in a ref. Put the returned `ref` on the\n * panel: until it is measured the panel counts as zero-sized, which resolves to\n * the bare corner, so the first paint lands where an unclamped anchor would and\n * measurement only ever pulls it back on screen.\n */\nexport function useHostAnchor(\n  resolveHost: () => Element | null,\n  options: UseHostAnchorOptions,\n): { ref: (el: HTMLElement | null) => void; style: HostAnchorStyle | null } {\n  const [panel, setPanel] = useState<HTMLElement | null>(null);\n  const [style, setStyle] = useState<HostAnchorStyle | null>(null);\n  const ref = useCallback((el: HTMLElement | null) => setPanel(el), []);\n\n  // Held in a ref so a caller passing an inline arrow doesn't re-subscribe\n  // every render.\n  const resolve = useLatest(resolveHost);\n\n  const { align, offset, padding = 0 } = options;\n  const { x: alignX, y: alignY } = align;\n  const { x: offsetX, y: offsetY } = offset;\n\n  const recompute = useCallback(() => {\n    const hostEl = resolve.current();\n    if (!hostEl) {\n      setStyle(null);\n      return;\n    }\n    const h = hostEl.getBoundingClientRect();\n    const p = panel?.getBoundingClientRect();\n    const viewport = { width: window.innerWidth, height: window.innerHeight };\n    const align = { x: alignX, y: alignY };\n    const rect = hostAnchorRect({\n      host: { x: h.left, y: h.top, width: h.width, height: h.height },\n      panel: { width: p?.width ?? 0, height: p?.height ?? 0 },\n      viewport,\n      align,\n      offset: { x: offsetX, y: offsetY },\n      padding,\n    });\n    setStyle(hostAnchorCss(rect, align, viewport));\n  }, [resolve, panel, alignX, alignY, offsetX, offsetY, padding]);\n\n  // Coalesces bursts of scroll/resize into one frame, and holds the work while\n  // the tab is hidden rather than dropping it.\n  const raf = useVisibleRaf(recompute);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- measures layout\n    recompute();\n    const schedule = () => raf.request();\n    window.addEventListener('scroll', schedule, true);\n    window.addEventListener('resize', schedule);\n    const observer =\n      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;\n    if (panel) observer?.observe(panel);\n    const hostEl = resolve.current();\n    if (hostEl) observer?.observe(hostEl);\n    const unwatchMove = hostEl ? watchElementMove(hostEl, schedule) : undefined;\n\n    return () => {\n      window.removeEventListener('scroll', schedule, true);\n      window.removeEventListener('resize', schedule);\n      raf.cancel();\n      observer?.disconnect();\n      unwatchMove?.();\n    };\n  }, [recompute, raf, panel, resolve]);\n\n  return { ref, style };\n}\n"],"mappings":";;;;;AA8BA,SAAgBA,EACd,GACA,GAC0E;CAC1E,IAAM,CAACC,GAAOC,KAAYC,EAA6B,IAAI,GACrD,CAACC,GAAOC,KAAYF,EAAiC,IAAI,GACzDG,IAAMC,GAAa,MAA2BL,EAASM,CAAE,GAAG,CAAC,CAAC,GAI9DC,IAAUC,EAAUC,CAAW,GAE/B,EAAE,UAAO,WAAQ,aAAU,MAAMC,GACjC,EAAE,GAAGC,GAAQ,GAAGC,MAAWC,GAC3B,EAAKC,GAAS,GAAGC,MAAYC,GAE7BC,IAAYZ,QAAkB;EAClC,IAAMa,IAASX,EAAQ,QAAQ;EAC/B,IAAI,CAACW,GAAQ;GACX,EAAS,IAAI;GACb;EACF;EACA,IAAMC,IAAID,EAAO,sBAAsB,GACjCE,IAAIrB,GAAO,sBAAsB,GACjCsB,IAAW;GAAE,OAAO,OAAO;GAAY,QAAQ,OAAO;EAAY,GAClER,IAAQ;GAAE,GAAGF;GAAQ,GAAGC;EAAO,GAC/BU,IAAOC,EAAe;GAC1B,MAAM;IAAE,GAAGJ,EAAE;IAAM,GAAGA,EAAE;IAAK,OAAOA,EAAE;IAAO,QAAQA,EAAE;GAAO;GAC9D,OAAO;IAAE,OAAOC,GAAG,SAAS;IAAG,QAAQA,GAAG,UAAU;GAAE;GACtD;GACA;GACA,QAAQ;IAAKN;IAAS,GAAGC;GAAQ;GACjC;EACF,CAAC;EACD,EAASS,EAAcF,GAAMT,GAAOQ,CAAQ,CAAC;CAC/C,GAAG;EAACd;EAASR;EAAOY;EAAQC;EAAQE;EAASC;EAASU;CAAO,CAAC,GAIxDC,IAAMC,EAAcV,CAAS;CAwBnC,OAtBAW,QAAgB;EAEd,EAAU;EACV,IAAMC,UAAiBH,EAAI,QAAQ;EAEnC,AADA,OAAO,iBAAiB,UAAUG,GAAU,EAAI,GAChD,OAAO,iBAAiB,UAAUA,CAAQ;EAC1C,IAAMC,IACJ,OAAO,iBAAmB,MAAc,IAAI,eAAeD,CAAQ,IAAI;EACzE,AAAI9B,KAAO+B,GAAU,QAAQ/B,CAAK;EAClC,IAAMmB,IAASX,EAAQ,QAAQ;EAC/B,AAAIW,KAAQY,GAAU,QAAQZ,CAAM;EACpC,IAAMa,IAAcb,IAASc,EAAiBd,GAAQW,CAAQ,IAAI,KAAA;EAElE,aAAa;GAKX,AAJA,OAAO,oBAAoB,UAAUA,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUA,CAAQ,GAC7CH,EAAI,OAAO,GACXI,GAAU,WAAW,GACrBC,IAAc;EAChB;CACF,GAAG;EAACd;EAAWS;EAAK3B;EAAOQ;CAAO,CAAC,GAE5B;EAAE;EAAK;CAAM;AACtB"}
+{"version":3,"file":"useHostAnchor.js","names":[],"sources":["../../src/canvas/useHostAnchor.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useLatest, useVisibleRaf } from '@weasel-js/react';\nimport {\n  hostAnchorCss, hostAnchorRect,\n  type HostAnchorAlign, type HostAnchorOffset,\n} from './hostAnchor';\nimport { watchElementMove } from './watchElementMove';\n\n/** Options for {@link useHostAnchor}. */\nexport interface UseHostAnchorOptions {\n  align: HostAnchorAlign;\n  offset: HostAnchorOffset;\n  /** Minimum gap kept between the panel and the viewport edge. Default 0. */\n  padding?: number;\n}\n\n/** CSS the caller spreads onto the panel; which edges appear follows `align`. */\nexport type HostAnchorStyle = { top?: number; right?: number; bottom?: number; left?: number };\n\n/**\n * Hold a fixed-position panel against a host element's corner, kept inside the\n * viewport, following it through scrolls, resizes, and reflows, a host moved by\n * its neighbors included.\n *\n * `resolveHost` runs on every recompute, so a host that mounts late or is found\n * by selector works the same as one held in a ref. Put the returned `ref` on the\n * panel: until it is measured the panel counts as zero-sized, which resolves to\n * the bare corner, so the first paint lands where an unclamped anchor would and\n * measurement only ever pulls it back on screen.\n */\nexport function useHostAnchor(\n  resolveHost: () => Element | null,\n  options: UseHostAnchorOptions,\n): { ref: (el: HTMLElement | null) => void; style: HostAnchorStyle | null } {\n  const [panel, setPanel] = useState<HTMLElement | null>(null);\n  const [style, setStyle] = useState<HostAnchorStyle | null>(null);\n  const ref = useCallback((el: HTMLElement | null) => setPanel(el), []);\n\n  // Held in a ref so a caller passing an inline arrow doesn't re-subscribe\n  // every render.\n  const resolve = useLatest(resolveHost);\n\n  const { align, offset, padding = 0 } = options;\n  const { x: alignX, y: alignY } = align;\n  const { x: offsetX, y: offsetY } = offset;\n\n  const recompute = useCallback(() => {\n    const hostEl = resolve.current();\n    if (!hostEl) {\n      setStyle(null);\n      return;\n    }\n    const h = hostEl.getBoundingClientRect();\n    const p = panel?.getBoundingClientRect();\n    const viewport = { width: window.innerWidth, height: window.innerHeight };\n    const align = { x: alignX, y: alignY };\n    const rect = hostAnchorRect({\n      host: { x: h.left, y: h.top, width: h.width, height: h.height },\n      panel: { width: p?.width ?? 0, height: p?.height ?? 0 },\n      viewport,\n      align,\n      offset: { x: offsetX, y: offsetY },\n      padding,\n    });\n    setStyle(hostAnchorCss(rect, align, viewport));\n  }, [resolve, panel, alignX, alignY, offsetX, offsetY, padding]);\n\n  // Coalesces bursts of scroll/resize into one frame, and holds the work while\n  // the tab is hidden rather than dropping it.\n  const raf = useVisibleRaf(recompute);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- measures layout\n    recompute();\n    const schedule = () => raf.request();\n    window.addEventListener('scroll', schedule, true);\n    window.addEventListener('resize', schedule);\n    const observer =\n      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;\n    if (panel) observer?.observe(panel);\n    const hostEl = resolve.current();\n    if (hostEl) observer?.observe(hostEl);\n    const unwatchMove = hostEl ? watchElementMove(hostEl, schedule) : undefined;\n\n    return () => {\n      window.removeEventListener('scroll', schedule, true);\n      window.removeEventListener('resize', schedule);\n      raf.cancel();\n      observer?.disconnect();\n      unwatchMove?.();\n    };\n  }, [recompute, raf, panel, resolve]);\n\n  return { ref, style };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,SAAgB,cACd,aACA,SAC0E;CAC1E,MAAM,CAAC,OAAO,YAAY,SAA6B,IAAI;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAiC,IAAI;CAC/D,MAAM,MAAM,aAAa,OAA2B,SAAS,EAAE,GAAG,CAAC,CAAC;CAIpE,MAAM,UAAU,UAAU,WAAW;CAErC,MAAM,EAAE,OAAO,QAAQ,UAAU,MAAM;CACvC,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW;CACjC,MAAM,EAAE,GAAG,SAAS,GAAG,YAAY;CAEnC,MAAM,YAAY,kBAAkB;EAClC,MAAM,SAAS,QAAQ,QAAQ;EAC/B,IAAI,CAAC,QAAQ;GACX,SAAS,IAAI;GACb;EACF;EACA,MAAM,IAAI,OAAO,sBAAsB;EACvC,MAAM,IAAI,OAAO,sBAAsB;EACvC,MAAM,WAAW;GAAE,OAAO,OAAO;GAAY,QAAQ,OAAO;EAAY;EACxE,MAAM,QAAQ;GAAE,GAAG;GAAQ,GAAG;EAAO;EACrC,MAAM,OAAO,eAAe;GAC1B,MAAM;IAAE,GAAG,EAAE;IAAM,GAAG,EAAE;IAAK,OAAO,EAAE;IAAO,QAAQ,EAAE;GAAO;GAC9D,OAAO;IAAE,OAAO,GAAG,SAAS;IAAG,QAAQ,GAAG,UAAU;GAAE;GACtD;GACA;GACA,QAAQ;IAAE,GAAG;IAAS,GAAG;GAAQ;GACjC;EACF,CAAC;EACD,SAAS,cAAc,MAAM,OAAO,QAAQ,CAAC;CAC/C,GAAG;EAAC;EAAS;EAAO;EAAQ;EAAQ;EAAS;EAAS;CAAO,CAAC;CAI9D,MAAM,MAAM,cAAc,SAAS;CAEnC,gBAAgB;EAEd,UAAU;EACV,MAAM,iBAAiB,IAAI,QAAQ;EACnC,OAAO,iBAAiB,UAAU,UAAU,IAAI;EAChD,OAAO,iBAAiB,UAAU,QAAQ;EAC1C,MAAM,WACJ,OAAO,mBAAmB,cAAc,IAAI,eAAe,QAAQ,IAAI;EACzE,IAAI,OAAO,UAAU,QAAQ,KAAK;EAClC,MAAM,SAAS,QAAQ,QAAQ;EAC/B,IAAI,QAAQ,UAAU,QAAQ,MAAM;EACpC,MAAM,cAAc,SAAS,iBAAiB,QAAQ,QAAQ,IAAI;EAElE,aAAa;GACX,OAAO,oBAAoB,UAAU,UAAU,IAAI;GACnD,OAAO,oBAAoB,UAAU,QAAQ;GAC7C,IAAI,OAAO;GACX,UAAU,WAAW;GACrB,cAAc;EAChB;CACF,GAAG;EAAC;EAAW;EAAK;EAAO;CAAO,CAAC;CAEnC,OAAO;EAAE;EAAK;CAAM;AACtB"}

package/dist/canvas/useInFlightBounds.js

@@ -0,0 +1,52 @@
+import { useCallback, useRef } from "react";
+import { useLatest } from "@weasel-js/react";
+
+//#region src/canvas/useInFlightBounds.ts
+/**
+* Where a view boxes the nodes an in-flight gesture names: at the pose a
+* source previews, else at the node's effective pose — a transform's poses
+* live in the scene's overrides, not on its handle. Boxed through `boxOf`
+* either way, since a consumer `boundsOf` answers for the document pose only.
+*/
+function useInFlightBounds(args) {
+	const { gestureSource, boxOf, committedPoseOf } = args;
+	const previewPoseExtraRef = useLatest(args.previewPoseExtra);
+	const previewPoseOf = useCallback((id) => {
+		const p = previewPoseExtraRef.current?.(id);
+		return p != null ? p : null;
+	}, [previewPoseExtraRef]);
+	const inFlight = useRef(null);
+	const isInFlight = useCallback((id) => {
+		if (!gestureSource) return false;
+		const version = gestureSource.getVersion();
+		let entry = inFlight.current;
+		if (entry === null || entry.source !== gestureSource || entry.version !== version) {
+			entry = {
+				source: gestureSource,
+				version,
+				ids: new Set(gestureSource.ids() ?? [])
+			};
+			inFlight.current = entry;
+		}
+		return entry.ids.has(id);
+	}, [gestureSource]);
+	return {
+		previewPoseOf,
+		previewBoundsOf: useCallback((id) => {
+			const p = previewPoseOf(id);
+			if (p != null) return boxOf(id, p);
+			if (!isInFlight(id)) return null;
+			const shown = committedPoseOf(id);
+			return shown != null ? boxOf(id, shown) : null;
+		}, [
+			previewPoseOf,
+			boxOf,
+			isInFlight,
+			committedPoseOf
+		])
+	};
+}
+
+//#endregion
+export { useInFlightBounds };
+//# sourceMappingURL=useInFlightBounds.js.map

package/dist/canvas/useInFlightBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInFlightBounds.js","names":[],"sources":["../../src/canvas/useInFlightBounds.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { GestureSource } from './gestureBounds';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\n\n/**\n * Where a view boxes the nodes an in-flight gesture names: at the pose a\n * source previews, else at the node's effective pose — a transform's poses\n * live in the scene's overrides, not on its handle. Boxed through `boxOf`\n * either way, since a consumer `boundsOf` answers for the document pose only.\n */\nexport function useInFlightBounds<TPose>(args: {\n  gestureSource: GestureSource | undefined;\n  /** Read through a ref, so a change mid-gesture rebuilds nothing. */\n  previewPoseExtra: ((id: string) => unknown) | undefined;\n  boxOf: (id: string, pose: TPose) => Bounds | null;\n  /** The node's effective world pose. */\n  committedPoseOf: (id: string) => TPose | null;\n}): {\n  previewPoseOf: (id: string) => TPose | null;\n  previewBoundsOf: (id: string) => Bounds | null;\n} {\n  const { gestureSource, boxOf, committedPoseOf } = args;\n  const previewPoseExtraRef = useLatest(args.previewPoseExtra);\n  const previewPoseOf = useCallback((id: string): TPose | null => {\n    const p = previewPoseExtraRef.current?.(id);\n    return p != null ? (p as TPose) : null;\n  }, [previewPoseExtraRef]);\n\n  // The source's ids, re-read only when its version moves.\n  const inFlight = useRef<{ source: GestureSource; version: number; ids: ReadonlySet<string> } | null>(null);\n  const isInFlight = useCallback((id: string): boolean => {\n    if (!gestureSource) return false;\n    const version = gestureSource.getVersion();\n    let entry = inFlight.current;\n    if (entry === null || entry.source !== gestureSource || entry.version !== version) {\n      entry = { source: gestureSource, version, ids: new Set(gestureSource.ids() ?? []) };\n      inFlight.current = entry;\n    }\n    return entry.ids.has(id);\n  }, [gestureSource]);\n\n  const previewBoundsOf = useCallback((id: string): Bounds | null => {\n    const p = previewPoseOf(id);\n    if (p != null) return boxOf(id, p);\n    if (!isInFlight(id)) return null;\n    const shown = committedPoseOf(id);\n    return shown != null ? boxOf(id, shown) : null;\n  }, [previewPoseOf, boxOf, isInFlight, committedPoseOf]);\n\n  return { previewPoseOf, previewBoundsOf };\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,kBAAyB,MAUvC;CACA,MAAM,EAAE,eAAe,OAAO,oBAAoB;CAClD,MAAM,sBAAsB,UAAU,KAAK,gBAAgB;CAC3D,MAAM,gBAAgB,aAAa,OAA6B;EAC9D,MAAM,IAAI,oBAAoB,UAAU,EAAE;EAC1C,OAAO,KAAK,OAAQ,IAAc;CACpC,GAAG,CAAC,mBAAmB,CAAC;CAGxB,MAAM,WAAW,OAAoF,IAAI;CACzG,MAAM,aAAa,aAAa,OAAwB;EACtD,IAAI,CAAC,eAAe,OAAO;EAC3B,MAAM,UAAU,cAAc,WAAW;EACzC,IAAI,QAAQ,SAAS;EACrB,IAAI,UAAU,QAAQ,MAAM,WAAW,iBAAiB,MAAM,YAAY,SAAS;GACjF,QAAQ;IAAE,QAAQ;IAAe;IAAS,KAAK,IAAI,IAAI,cAAc,IAAI,KAAK,CAAC,CAAC;GAAE;GAClF,SAAS,UAAU;EACrB;EACA,OAAO,MAAM,IAAI,IAAI,EAAE;CACzB,GAAG,CAAC,aAAa,CAAC;CAUlB,OAAO;EAAE;EAAe,iBARA,aAAa,OAA8B;GACjE,MAAM,IAAI,cAAc,EAAE;GAC1B,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI,CAAC;GACjC,IAAI,CAAC,WAAW,EAAE,GAAG,OAAO;GAC5B,MAAM,QAAQ,gBAAgB,EAAE;GAChC,OAAO,SAAS,OAAO,MAAM,IAAI,KAAK,IAAI;EAC5C,GAAG;GAAC;GAAe;GAAO;GAAY;EAAe,CAE7B;CAAgB;AAC1C"}