@weasel-js/core 1.9.4 → 1.10.1

package/dist/canvas/useCanvasSurface.js

@@ -0,0 +1,31 @@
+import { useCanvasRenderer as e, useRedrawOnDensityChange as t, useRedrawOnRestore as n, useRedrawOnShaderSource as r } from "./useCanvasRenderer.js";
+import { useFrameLoop as i } from "./useFrameLoop.js";
+import { useLateContentRedraw as a } from "./useLateContentRedraw.js";
+import { useRedrawOn as o } from "./useRedrawOn.js";
+import { useEffect as s, useLayoutEffect as c, useRef as l } from "react";
+//#region src/canvas/useCanvasSurface.ts
+function u(s, c = {}) {
+	let l = e(), u = i(() => s(l), c), { requestRedraw: f } = u;
+	return n(l, f), t(f, c.dpr), a(f), r(c.shaders, f), o(c.redrawOn, f), d(c.paintOnCommit === !0, () => s(l), f), {
+		...u,
+		lease: l
+	};
+}
+function d(e, t, n) {
+	let r = l(!1);
+	c(() => {
+		if (e) {
+			if (r.current) {
+				n();
+				return;
+			}
+			r.current = t(), r.current || n();
+		}
+	}), s(() => () => {
+		r.current = !1;
+	}, []);
+}
+//#endregion
+export { u as useCanvasSurface };
+
+//# sourceMappingURL=useCanvasSurface.js.map

package/dist/canvas/useCanvasSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasSurface.js","names":["useCanvasSurface","lease","useCanvasRenderer","loop","useFrameLoop","paint","options","useRedrawOnRestore","requestRedraw","useRedrawOnDensityChange","useLateContentRedraw","useRedrawOnShaderSource","useRedrawOn","usePaintOnCommit","paintedRef","useRef","useLayoutEffect","on","paintNow","useEffect"],"sources":["../../src/canvas/useCanvasSurface.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport type { ShaderProgramHandle } from '@weasel-js/renderer';\nimport type { RedrawSource } from '../core/layers/render';\nimport type { CanvasRendererLease } from './canvasRenderer';\nimport {\n  useCanvasRenderer, useRedrawOnDensityChange, useRedrawOnRestore, useRedrawOnShaderSource,\n} from './useCanvasRenderer';\nimport { useFrameLoop, type FrameLoop, type FrameLoopOptions } from './useFrameLoop';\nimport { useLateContentRedraw } from './useLateContentRedraw';\nimport { useRedrawOn } from './useRedrawOn';\n\n/** What a surface tells {@link useCanvasSurface} about itself, beyond its paint. */\nexport interface CanvasSurfaceOptions extends FrameLoopOptions {\n  /** The surface's own density. Omit to follow `devicePixelRatio`. */\n  dpr?: number;\n  /** External state the paint reads; each source repaints when it notifies. */\n  redrawOn?: readonly RedrawSource[];\n  /** Custom programs the paint draws with; new source for one repaints. */\n  shaders?: readonly ShaderProgramHandle[];\n  /** Mark the surface dirty on every committed render, and paint the first\n   *  one in place, in the caller's stack, so the first frame shown is the\n   *  content and not a blank canvas. For a surface whose paint reads its\n   *  props. */\n  paintOnCommit?: boolean;\n}\n\n/** A surface's frame loop and the renderer lease its paint draws through. */\nexport interface CanvasSurface extends FrameLoop {\n  lease: CanvasRendererLease;\n}\n\n/**\n * Everything a canvas surface in core needs around its paint: the renderer\n * lease, the frame loop, and a repaint for each thing that changes pixels with\n * no React render behind it — a restored GL context, a density change, late\n * content, a re-registered shader, and the caller's own `redrawOn` sources.\n *\n * @param paint As `useFrameLoop`'s, handed the lease to draw through.\n */\nexport function useCanvasSurface(\n  paint: (lease: CanvasRendererLease) => boolean,\n  options: CanvasSurfaceOptions = {},\n): CanvasSurface {\n  const lease = useCanvasRenderer();\n  const loop = useFrameLoop(() => paint(lease), options);\n  const { requestRedraw } = loop;\n  useRedrawOnRestore(lease, requestRedraw);\n  useRedrawOnDensityChange(requestRedraw, options.dpr);\n  useLateContentRedraw(requestRedraw);\n  useRedrawOnShaderSource(options.shaders, requestRedraw);\n  useRedrawOn(options.redrawOn, requestRedraw);\n  usePaintOnCommit(options.paintOnCommit === true, () => paint(lease), requestRedraw);\n  return { ...loop, lease };\n}\n\nfunction usePaintOnCommit(on: boolean, paintNow: () => boolean, requestRedraw: () => void): void {\n  const paintedRef = useRef(false);\n  // No dependency array: the paint reads whatever the render did.\n  useLayoutEffect(() => {\n    if (!on) return;\n    if (paintedRef.current) { requestRedraw(); return; }\n    paintedRef.current = paintNow();\n    if (!paintedRef.current) requestRedraw();\n  });\n  // The renderer is freed on unmount; a remount (StrictMode) paints its first\n  // frame in place again.\n  useEffect(() => () => { paintedRef.current = false; }, []);\n}\n"],"mappings":";;;;;;AAuCA,SAAgBA,EACd,GACA,IAAgC,CAAC,GAClB;CACf,IAAMC,IAAQC,EAAkB,GAC1BC,IAAOC,QAAmBC,EAAMJ,CAAK,GAAGK,CAAO,GAC/C,EAAE,qBAAkBH;CAO1B,OANAI,EAAmBN,GAAOO,CAAa,GACvCC,EAAyBD,GAAeF,EAAQ,GAAG,GACnDI,EAAqBF,CAAa,GAClCG,EAAwBL,EAAQ,SAASE,CAAa,GACtDI,EAAYN,EAAQ,UAAUE,CAAa,GAC3CK,EAAiBP,EAAQ,kBAAkB,UAAYD,EAAMJ,CAAK,GAAGO,CAAa,GAC3E;EAAE,GAAGL;EAAM;CAAM;AAC1B;AAEA,SAASU,EAAiB,GAAa,GAAyB,GAAiC;CAC/F,IAAMC,IAAaC,EAAO,EAAK;CAU/B,AARAC,QAAsB;EACpB,IAAKC,GACL;OAAIH,EAAW,SAAS;IAAE,EAAc;IAAG;GAAQ;GAEnD,AADA,EAAW,UAAUI,EAAS,GACzBJ,EAAW,WAASN,EAAc;EAFY;CAGrD,CAAC,GAGDW,cAAsB;EAAE,EAAW,UAAU;CAAO,GAAG,CAAC,CAAC;AAC3D"}

package/dist/canvas/useCanvasView.js

@@ -1,58 +1,65 @@
-import { normalizeView as e } from "../core/viewport/view.js";
-import { clampView as t } from "../core/viewport/clampView.js";
-import { useCallback as n, useRef as r } from "react";
-import { useLatest as i } from "@weasel-js/react";
+import { normalizeView as e, sameView as t } from "../core/viewport/view.js";
+import { clampView as n } from "../core/viewport/clampView.js";
+import { useCallback as r, useRef as i } from "react";
+import { useLatest as a } from "@weasel-js/react";
 //#region src/canvas/useCanvasView.ts
-function a(a) {
-	let { view: o, defaultView: s, onViewChange: c, viewBounds: l, dimsRef: u, requestRedraw: d } = a, f = r(e(o ?? s ?? {
-		x: 0,
-		y: 0,
-		scale: {
-			x: 1,
-			y: 1
-		}
-	})), p = o !== void 0, m = p ? e(o) : void 0, h = r(/* @__PURE__ */ new Set()), g = i(c), _ = i(l), v = i(p), y = r(!1), b = n((n) => {
-		let r = e(typeof n == "function" ? n(f.current) : n), i = _.current, a = i ? t(r, i, u.current) : r;
-		if (v.current) {
-			let e = g.current;
-			y.current || (y.current = !0, console.warn(e ? "[weasel] setView not applied locally: this canvas is controlled by its `view` prop. The value was forwarded to `onViewChange` — update the prop from there, or drop it to take the imperative path." : "[weasel] setView ignored: this canvas is controlled by its `view` prop and has no `onViewChange`, so the value has nowhere to go. Update the prop, or drop it to take the imperative path.")), e?.(a);
+var o = {
+	x: 0,
+	y: 0,
+	scale: {
+		x: 1,
+		y: 1
+	}
+};
+function s(s) {
+	let { view: c, defaultView: l, onViewChange: u, viewBounds: d, dims: f, requestRedraw: p } = s, m = typeof c == "function" ? c : void 0, h = c === void 0 || m ? void 0 : e(c), g = i(h ?? e(l ?? o)), _ = i(/* @__PURE__ */ new Set()), v = a({
+		controlled: c !== void 0,
+		derived: m,
+		onViewChange: u,
+		viewBounds: d,
+		dims: f,
+		requestRedraw: p
+	}), y = i(!1), b = r(() => {
+		let t = v.current.derived;
+		return t ? e(t()) : g.current;
+	}, [v]), x = r((t, r) => {
+		let { controlled: i, derived: a, onViewChange: o, viewBounds: s, dims: c, requestRedraw: l } = v.current, u = e(t), d = s ? n(u, s, c()) : u;
+		if (i) {
+			r && !y.current && (y.current = !0, console.warn(o ? "[weasel] setView not applied locally: this canvas is controlled by its `view` prop. The value was forwarded to `onViewChange` — update the prop from there, or drop it to take the imperative path." : "[weasel] setView ignored: this canvas is controlled by its `view` prop and has no `onViewChange`, so the value has nowhere to go. Update the prop, or drop it to take the imperative path.")), o?.(d), a && l();
 			return;
 		}
-		f.current = a;
-		for (let e of h.current) e(a);
-		g.current?.(a), d();
-	}, [
-		d,
-		u,
-		v,
-		g,
-		_
-	]), x = n(() => f.current, []), S = n((e) => (h.current.add(e), () => {
-		h.current.delete(e);
-	}), []), C = r(!1);
+		g.current = d;
+		for (let e of _.current) e(d);
+		o?.(d), l();
+	}, [v]), S = r((e) => {
+		x(typeof e == "function" ? e(b()) : e, !0);
+	}, [x, b]), C = r((e) => {
+		x(e, !1);
+	}, [x]), w = r((e) => (_.current.add(e), () => {
+		_.current.delete(e);
+	}), []), T = i(!1);
 	return {
-		viewRef: f,
-		controlledView: m,
-		setView: b,
-		getView: x,
-		subscribeView: S,
+		viewRef: g,
+		controlled: h,
+		setView: S,
+		setViewFromInput: C,
+		getView: b,
+		subscribeView: w,
 		adoptControlled: () => {
-			if (!m) return;
-			let e = f.current;
-			C.current ||= e.x !== m.x || e.y !== m.y || e.scale.x !== m.scale.x || e.scale.y !== m.scale.y, f.current = m;
+			h && (T.current ||= !t(g.current, h), g.current = h);
 		},
-		announceControlled: n(() => {
-			if (C.current) {
-				C.current = !1;
-				for (let e of h.current) e(f.current);
+		announceControlled: r(() => {
+			if (T.current) {
+				T.current = !1;
+				for (let e of _.current) e(g.current);
 			}
 		}, []),
-		clearSubscribers: n(() => {
-			h.current.clear();
+		clearSubscribers: r(() => {
+			_.current.clear();
 		}, [])
 	};
 }
 //#endregion
-export { a as useCanvasView };
+export { s as useCanvasView };
 
 //# sourceMappingURL=useCanvasView.js.map

package/dist/canvas/useCanvasView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasView.js","names":["useCanvasView","viewProp","opts","viewRef","useRef","normalizeView","defaultView","isControlled","controlledView","viewSubsRef","onViewChangeRef","useLatest","onViewChange","viewBoundsRef","viewBounds","isControlledRef","controlledWarnedRef","setView","useCallback","resolved","next","bounds","clamped","clampView","dimsRef","forward","fn","requestRedraw","getView","subscribeView","controlledMovedRef","was"],"sources":["../../src/canvas/useCanvasView.ts"],"sourcesContent":["/**\n * A `<Canvas>`'s view: held in a ref when uncontrolled, taken from the `view`\n * prop when controlled, with one `setView` and one subscriber list over both.\n */\nimport { useCallback, useRef, type MutableRefObject } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { Dims } from 'core/layers/render';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\nimport { clampView } from 'core/viewport/clampView';\nimport { normalizeView, type View } from 'core/viewport/view';\n\n/** Inputs to {@link useCanvasView}: the canvas's view props and what a view\n *  write needs from the canvas around it. */\nexport interface CanvasViewOptions {\n  view: View | undefined;\n  defaultView: View | undefined;\n  onViewChange: ((next: View) => void) | undefined;\n  viewBounds: Bounds | undefined;\n  dimsRef: { readonly current: Dims };\n  requestRedraw: () => void;\n}\n\n/** What {@link useCanvasView} hands back. The canvas decides when in a commit\n *  the two controlled steps run, since they have to sit among its own effects. */\nexport interface CanvasViewState {\n  /** The view in effect. Written by `setView` when uncontrolled and by\n   *  `adoptControlled` when controlled. */\n  viewRef: MutableRefObject<View>;\n  /** The normalized `view` prop, or undefined when uncontrolled. */\n  controlledView: View | undefined;\n  setView: (next: View | ((current: View) => View)) => void;\n  getView: () => View;\n  subscribeView: (fn: (v: View) => void) => () => void;\n  /** Take this render's controlled view into `viewRef`. Call from an insertion effect. */\n  adoptControlled: () => void;\n  /** Tell subscribers of a controlled view that moved since the last call.\n   *  A controlled view reaches the ref with no `setView`, so this is where\n   *  they hear of it. Call from a layout effect. */\n  announceControlled: () => void;\n  /** Drop every subscriber, on unmount. */\n  clearSubscribers: () => void;\n}\n\nexport function useCanvasView(opts: CanvasViewOptions): CanvasViewState {\n  const { view: viewProp, defaultView, onViewChange, viewBounds, dimsRef, requestRedraw } = opts;\n  // The uncontrolled view lives in a ref, not `useState`, so a camera moving\n  // at 60 Hz costs no React render; DOM that mirrors it subscribes instead.\n  const viewRef = useRef<View>(normalizeView(viewProp ?? defaultView ?? { x: 0, y: 0, scale: { x: 1, y: 1 } }));\n  const isControlled = viewProp !== undefined;\n  const controlledView = isControlled ? normalizeView(viewProp) : undefined;\n  const viewSubsRef = useRef<Set<(v: View) => void>>(new Set());\n  const onViewChangeRef = useLatest(onViewChange);\n  const viewBoundsRef = useLatest(viewBounds);\n  const isControlledRef = useLatest(isControlled);\n  const controlledWarnedRef = useRef(false);\n\n  const setView = useCallback((next: View | ((current: View) => View)) => {\n    const resolved = normalizeView(typeof next === 'function' ? next(viewRef.current) : next);\n    const bounds = viewBoundsRef.current;\n    const clamped = bounds ? clampView(resolved, bounds, dimsRef.current) : resolved;\n    if (isControlledRef.current) {\n      // The prop is the authority; writing the ref would put pixels and props\n      // out of step with nothing to reconcile them.\n      const forward = onViewChangeRef.current;\n      if (!controlledWarnedRef.current) {\n        controlledWarnedRef.current = true;\n        console.warn(forward\n          ? '[weasel] setView not applied locally: this canvas is controlled by its `view` prop. The value was forwarded to `onViewChange` — update the prop from there, or drop it to take the imperative path.'\n          : '[weasel] setView ignored: this canvas is controlled by its `view` prop and has no `onViewChange`, so the value has nowhere to go. Update the prop, or drop it to take the imperative path.');\n      }\n      forward?.(clamped);\n      return;\n    }\n    viewRef.current = clamped;\n    for (const fn of viewSubsRef.current) fn(clamped);\n    onViewChangeRef.current?.(clamped);\n    requestRedraw();\n  }, [requestRedraw, dimsRef, isControlledRef, onViewChangeRef, viewBoundsRef]);\n\n  const getView = useCallback(() => viewRef.current, []);\n  const subscribeView = useCallback((fn: (v: View) => void) => {\n    viewSubsRef.current.add(fn);\n    return () => { viewSubsRef.current.delete(fn); };\n  }, []);\n\n  const controlledMovedRef = useRef(false);\n  // A closure over this render's prop, not a ref read: the canvas calls it\n  // from the same render's insertion effect.\n  const adoptControlled = (): void => {\n    if (!controlledView) return;\n    const was = viewRef.current;\n    controlledMovedRef.current ||= was.x !== controlledView.x || was.y !== controlledView.y\n      || was.scale.x !== controlledView.scale.x || was.scale.y !== controlledView.scale.y;\n    viewRef.current = controlledView;\n  };\n  const announceControlled = useCallback(() => {\n    if (!controlledMovedRef.current) return;\n    controlledMovedRef.current = false;\n    for (const fn of viewSubsRef.current) fn(viewRef.current);\n  }, []);\n  const clearSubscribers = useCallback(() => { viewSubsRef.current.clear(); }, []);\n\n  return {\n    viewRef, controlledView, setView, getView, subscribeView,\n    adoptControlled, announceControlled, clearSubscribers,\n  };\n}\n"],"mappings":";;;;;AA2CA,SAAgBA,EAAc,GAA0C;CACtE,IAAM,EAAE,MAAMC,GAAU,gBAAa,iBAAc,eAAY,YAAS,qBAAkBC,GAGpFC,IAAUC,EAAaC,EAAcJ,KAAYK,KAAe;EAAE,GAAG;EAAG,GAAG;EAAG,OAAO;GAAE,GAAG;GAAG,GAAG;EAAE;CAAE,CAAC,CAAC,GACtGC,IAAeN,MAAa,KAAA,GAC5BO,IAAiBD,IAAeF,EAAcJ,CAAQ,IAAI,KAAA,GAC1DQ,IAAcL,kBAA+B,IAAI,IAAI,CAAC,GACtDM,IAAkBC,EAAUC,CAAY,GACxCC,IAAgBF,EAAUG,CAAU,GACpCC,IAAkBJ,EAAUJ,CAAY,GACxCS,IAAsBZ,EAAO,EAAK,GAElCa,IAAUC,GAAa,MAA2C;EACtE,IAAMC,IAAWd,EAAc,OAAOe,KAAS,aAAaA,EAAKjB,EAAQ,OAAO,IAAIiB,CAAI,GAClFC,IAASR,EAAc,SACvBS,IAAUD,IAASE,EAAUJ,GAAUE,GAAQG,EAAQ,OAAO,IAAIL;EACxE,IAAIJ,EAAgB,SAAS;GAG3B,IAAMU,IAAUf,EAAgB;GAOhC,AANKM,EAAoB,YACvB,EAAoB,UAAU,IAC9B,QAAQ,KAAKS,IACT,wMACA,4LAA4L,IAElMA,IAAUH,CAAO;GACjB;EACF;EACA,EAAQ,UAAUA;EAClB,KAAK,IAAMI,KAAMjB,EAAY,SAAS,EAAGa,CAAO;EAEhD,AADAZ,EAAgB,UAAUY,CAAO,GACjCK,EAAc;CAChB,GAAG;EAACA;EAAeH;EAAST;EAAiBL;EAAiBG;CAAa,CAAC,GAEtEe,IAAUV,QAAkBf,EAAQ,SAAS,CAAC,CAAC,GAC/C0B,IAAgBX,GAAa,OACjCT,EAAY,QAAQ,IAAIiB,CAAE,SACb;EAAE,EAAY,QAAQ,OAAOA,CAAE;CAAG,IAC9C,CAAC,CAAC,GAECI,IAAqB1B,EAAO,EAAK;CAiBvC,OAAO;EACL;EAAS;EAAgB;EAAS;EAAS;EAC3C,uBAhBkC;GAClC,IAAI,CAACI,GAAgB;GACrB,IAAMuB,IAAM5B,EAAQ;GAGpB,AAFA,EAAmB,YAAY4B,EAAI,MAAMvB,EAAe,KAAKuB,EAAI,MAAMvB,EAAe,KACjFuB,EAAI,MAAM,MAAMvB,EAAe,MAAM,KAAKuB,EAAI,MAAM,MAAMvB,EAAe,MAAM,GACpF,EAAQ,UAAUA;EACpB;EAUmB,oBATQU,QAAkB;GAC3C,IAAKY,EAAmB,SACxB;MAAmB,UAAU;IAC7B,KAAK,IAAMJ,KAAMjB,EAAY,SAAS,EAAGN,EAAQ,OAAO;GAD3B;EAE/B,GAAG,CAAC,CAKe;EAAoB,kBAJde,QAAkB;GAAE,EAAY,QAAQ,MAAM;EAAG,GAAG,CAAC,CAIvC;CACvC;AACF"}
+{"version":3,"file":"useCanvasView.js","names":["IDENTITY","useCanvasView","viewProp","opts","derived","controlledView","normalizeView","viewRef","useRef","defaultView","viewSubsRef","live","useLatest","controlledWarnedRef","getView","useCallback","thunk","write","forward","bounds","size","redraw","valid","next","clamped","clampView","controlled","imperative","fn","setView","setViewFromInput","subscribeView","controlledMovedRef","sameView"],"sources":["../../src/canvas/useCanvasView.ts"],"sourcesContent":["/**\n * A camera: held in a ref when uncontrolled, taken from the `view` option when\n * controlled, with one write path and one subscriber list over both.\n * `<SceneCanvas>` makes the one its `<Canvas>` looks through, and each\n * `<CanvasView>` makes its own.\n */\nimport { useCallback, useRef, type MutableRefObject } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { Dims } from 'core/layers/render';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\nimport { clampView } from 'core/viewport/clampView';\nimport { normalizeView, sameView, type View } from 'core/viewport/view';\n\n/** The view props a canvas takes for its camera. */\nexport interface CameraProps {\n  /** Controlled viewport. When supplied, the canvas does not own the value —\n   *  the consumer must supply `onViewChange` and re-render with the new\n   *  view. See `View` JSDoc for the camera-position convention. */\n  view?: View;\n  /** Initial viewport for the uncontrolled path. Default `{x:0, y:0}`. */\n  defaultView?: View;\n  /** Fires whenever the viewport changes — in both controlled and\n   *  uncontrolled modes. */\n  onViewChange?: (next: View) => void;\n  /**\n   * Optional world-space rect that constrains pan: every write to the view passes through\n   * `clampView` first, keeping the visible rect inside `viewBounds`. An axis where the\n   * visible rect is larger than the bounds is centered. Has no effect on `scale`.\n   */\n  viewBounds?: { x: number; y: number; width: number; height: number };\n}\n\n/** Inputs to {@link useCanvasView}: the camera's view props and what a write\n *  needs from whatever the camera looks through. */\nexport interface CanvasViewOptions {\n  /** Supplied, the camera is controlled. A thunk is a camera derived from\n   *  something else, read fresh at every {@link CanvasViewState.getView}. */\n  view: View | (() => View) | undefined;\n  defaultView: View | undefined;\n  onViewChange: ((next: View) => void) | undefined;\n  viewBounds: Bounds | undefined;\n  /** The size the camera looks through, which `viewBounds` clamps against. */\n  dims: () => Dims;\n  requestRedraw: () => void;\n}\n\n/** What `useCanvasView` hands back. The owner decides when in a commit\n *  the two controlled steps run, since they have to sit among its own effects. */\nexport interface CanvasViewState {\n  /** The view in effect. Written by a write when uncontrolled and by\n   *  `adoptControlled` when controlled. A camera derived by a thunk is not\n   *  kept here: read `getView`. */\n  viewRef: MutableRefObject<View>;\n  /** This render's controlled view, absent when the camera is uncontrolled or\n   *  derived. A new object every render, so compare its numbers. */\n  controlled: View | undefined;\n  /** The imperative write. Controlled, it is forwarded to `onViewChange`\n   *  instead of applied, and says so once per mount. */\n  setView: (next: View | ((current: View) => View)) => void;\n  /** The write input makes. Controlled, forwarding it to `onViewChange` is how\n   *  the owner hears of a pan at all, so nothing is warned. */\n  setViewFromInput: (next: View) => void;\n  getView: () => View;\n  subscribeView: (fn: (v: View) => void) => () => void;\n  /** Take this render's controlled view into `viewRef`. Call from an insertion effect. */\n  adoptControlled: () => void;\n  /** Tell subscribers of a controlled view that moved since the last call.\n   *  A controlled view reaches the ref with no write, so this is where they\n   *  hear of it. Call from a layout effect. */\n  announceControlled: () => void;\n  /** Drop every subscriber, on unmount. */\n  clearSubscribers: () => void;\n}\n\nconst IDENTITY: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };\n\nexport function useCanvasView(opts: CanvasViewOptions): CanvasViewState {\n  const { view: viewProp, defaultView, onViewChange, viewBounds, dims, requestRedraw } = opts;\n  const derived = typeof viewProp === 'function' ? viewProp : undefined;\n  const controlledView = viewProp === undefined || derived ? undefined : normalizeView(viewProp as View);\n  // The uncontrolled view lives in a ref, not `useState`, so a camera moving\n  // at 60 Hz costs no React render; DOM that mirrors it subscribes instead.\n  const viewRef = useRef<View>(controlledView ?? normalizeView(defaultView ?? IDENTITY));\n  const viewSubsRef = useRef<Set<(v: View) => void>>(new Set());\n  const live = useLatest({\n    controlled: viewProp !== undefined, derived, onViewChange, viewBounds, dims, requestRedraw,\n  });\n  const controlledWarnedRef = useRef(false);\n\n  const getView = useCallback((): View => {\n    const thunk = live.current.derived;\n    return thunk ? normalizeView(thunk()) : viewRef.current;\n  }, [live]);\n\n  const write = useCallback((next: View, imperative: boolean): void => {\n    const {\n      controlled, derived, onViewChange: forward, viewBounds: bounds, dims: size, requestRedraw: redraw,\n    } = live.current;\n    const valid = normalizeView(next);\n    const clamped = bounds ? clampView(valid, bounds, size()) : valid;\n    if (controlled) {\n      // The prop is the authority; writing the ref would put pixels and props\n      // out of step with nothing to reconcile them.\n      if (imperative && !controlledWarnedRef.current) {\n        controlledWarnedRef.current = true;\n        console.warn(forward\n          ? '[weasel] setView not applied locally: this canvas is controlled by its `view` prop. The value was forwarded to `onViewChange` — update the prop from there, or drop it to take the imperative path.'\n          : '[weasel] setView ignored: this canvas is controlled by its `view` prop and has no `onViewChange`, so the value has nowhere to go. Update the prop, or drop it to take the imperative path.');\n      }\n      forward?.(clamped);\n      // A derived camera has no prop to change, so nothing else repaints it.\n      if (derived) redraw();\n      return;\n    }\n    viewRef.current = clamped;\n    for (const fn of viewSubsRef.current) fn(clamped);\n    forward?.(clamped);\n    redraw();\n  }, [live]);\n\n  const setView = useCallback((next: View | ((current: View) => View)) => {\n    write(typeof next === 'function' ? next(getView()) : next, true);\n  }, [write, getView]);\n  const setViewFromInput = useCallback((next: View) => { write(next, false); }, [write]);\n\n  const subscribeView = useCallback((fn: (v: View) => void) => {\n    viewSubsRef.current.add(fn);\n    return () => { viewSubsRef.current.delete(fn); };\n  }, []);\n\n  const controlledMovedRef = useRef(false);\n  // A closure over this render's prop, not a ref read: the owner calls it\n  // from the same render's insertion effect.\n  const adoptControlled = (): void => {\n    if (!controlledView) return;\n    controlledMovedRef.current ||= !sameView(viewRef.current, controlledView);\n    viewRef.current = controlledView;\n  };\n  const announceControlled = useCallback(() => {\n    if (!controlledMovedRef.current) return;\n    controlledMovedRef.current = false;\n    for (const fn of viewSubsRef.current) fn(viewRef.current);\n  }, []);\n  const clearSubscribers = useCallback(() => { viewSubsRef.current.clear(); }, []);\n\n  return {\n    viewRef, controlled: controlledView, setView, setViewFromInput, getView, subscribeView,\n    adoptControlled, announceControlled, clearSubscribers,\n  };\n}\n"],"mappings":";;;;;AA0EA,IAAMA,IAAiB;CAAE,GAAG;CAAG,GAAG;CAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;AAAE;AAE3D,SAAgBC,EAAc,GAA0C;CACtE,IAAM,EAAE,MAAMC,GAAU,gBAAa,iBAAc,eAAY,SAAM,qBAAkBC,GACjFC,IAAU,OAAOF,KAAa,aAAaA,IAAW,KAAA,GACtDG,IAAiBH,MAAa,KAAA,KAAaE,IAAU,KAAA,IAAYE,EAAcJ,CAAgB,GAG/FK,IAAUC,EAAaH,KAAkBC,EAAcG,KAAeT,CAAQ,CAAC,GAC/EU,IAAcF,kBAA+B,IAAI,IAAI,CAAC,GACtDG,IAAOC,EAAU;EACrB,YAAYV,MAAa,KAAA;EAAW;EAAS;EAAc;EAAY;EAAM;CAC/E,CAAC,GACKW,IAAsBL,EAAO,EAAK,GAElCM,IAAUC,QAAwB;EACtC,IAAMC,IAAQL,EAAK,QAAQ;EAC3B,OAAOK,IAAQV,EAAcU,EAAM,CAAC,IAAIT,EAAQ;CAClD,GAAG,CAACI,CAAI,CAAC,GAEHM,IAAQF,GAAa,GAAY,MAA8B;EACnE,IAAM,EACJ,eAAY,YAAS,cAAcG,GAAS,YAAYC,GAAQ,MAAMC,GAAM,eAAeC,MACzFV,EAAK,SACHW,IAAQhB,EAAciB,CAAI,GAC1BC,IAAUL,IAASM,EAAUH,GAAOH,GAAQC,EAAK,CAAC,IAAIE;EAC5D,IAAII,GAAY;GAWd,AARIC,KAAc,CAACd,EAAoB,YACrC,EAAoB,UAAU,IAC9B,QAAQ,KAAKK,IACT,wMACA,4LAA4L,IAElMA,IAAUM,CAAO,GAEbpB,KAASiB,EAAO;GACpB;EACF;EACA,EAAQ,UAAUG;EAClB,KAAK,IAAMI,KAAMlB,EAAY,SAAS,EAAGc,CAAO;EAEhD,AADAN,IAAUM,CAAO,GACjBH,EAAO;CACT,GAAG,CAACV,CAAI,CAAC,GAEHkB,IAAUd,GAAa,MAA2C;EACtE,EAAM,OAAOQ,KAAS,aAAaA,EAAKT,EAAQ,CAAC,IAAIS,GAAM,EAAI;CACjE,GAAG,CAACN,GAAOH,CAAO,CAAC,GACbgB,IAAmBf,GAAa,MAAe;EAAE,EAAMQ,GAAM,EAAK;CAAG,GAAG,CAACN,CAAK,CAAC,GAE/Ec,IAAgBhB,GAAa,OACjCL,EAAY,QAAQ,IAAIkB,CAAE,SACb;EAAE,EAAY,QAAQ,OAAOA,CAAE;CAAG,IAC9C,CAAC,CAAC,GAECI,IAAqBxB,EAAO,EAAK;CAevC,OAAO;EACL;EAAS,YAAYH;EAAgB;EAAS;EAAkB;EAAS;EACzE,uBAdkC;GAClC,AAAKA,MACL,EAAmB,YAAY,CAAC4B,EAAS1B,EAAQ,SAASF,CAAc,GACxE,EAAQ,UAAUA;EACpB;EAUmB,oBATQU,QAAkB;GAC3C,IAAKiB,EAAmB,SACxB;MAAmB,UAAU;IAC7B,KAAK,IAAMJ,KAAMlB,EAAY,SAAS,EAAGH,EAAQ,OAAO;GAD3B;EAE/B,GAAG,CAAC,CAKe;EAAoB,kBAJdQ,QAAkB;GAAE,EAAY,QAAQ,MAAM;EAAG,GAAG,CAAC,CAIvC;CACvC;AACF"}

package/dist/canvas/useFrameLoop.js

@@ -1,9 +1,8 @@
-import { useVisibleRaf as e } from "../scheduling/useVisibleRaf.js";
-import { useCallback as t, useInsertionEffect as n, useLayoutEffect as r, useRef as i } from "react";
-import { useLatest as a } from "@weasel-js/react";
+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";
 //#region src/canvas/useFrameLoop.ts
 function o(o, s = {}) {
-	let c = i(!0), l = i(!0), u = i(!1), d = a(o), f = a(s.syncPaint ?? !1), p = i(/* @__PURE__ */ new Set()), m = i(/* @__PURE__ */ new Set()), h = i(/* @__PURE__ */ new Set()), g = i(-Infinity), _ = i(!1), v = i(null), y = t((e) => {
+	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;
@@ -20,20 +19,20 @@ function o(o, s = {}) {
 		} finally {
 			u.current = !1;
 		}
-	}, [d]), b = e(t((e) => {
+	}, [d]), b = a(e((e) => {
 		l.current && c.current && y(e);
 	}, [y]), {
 		target: s.target,
-		onResume: t(() => {
+		onResume: e(() => {
 			for (let e of h.current) e();
 		}, [])
 	});
-	n(() => {
+	t(() => {
 		v.current = () => {
 			b.request();
 		};
 	});
-	let x = t(() => {
+	let x = e(() => {
 		if (c.current = !0, f.current && l.current && !u.current && b.isVisible()) {
 			y(performance.now());
 			return;
@@ -43,14 +42,14 @@ function o(o, s = {}) {
 		b,
 		y,
 		f
-	]), S = t((e) => (p.current.add(e), () => {
+	]), S = e((e) => (p.current.add(e), () => {
 		p.current.delete(e);
-	}), []), C = t((e) => (m.current.add(e), () => {
+	}), []), C = e((e) => (m.current.add(e), () => {
 		m.current.delete(e);
-	}), []), w = t((e) => (h.current.add(e), () => {
+	}), []), w = e((e) => (h.current.add(e), () => {
 		h.current.delete(e);
 	}), []);
-	return r(() => {
+	return n(() => {
 		l.current = !0;
 		let e = p.current, t = m.current, n = h.current;
 		return () => {

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 } from '@weasel-js/react';\nimport { useVisibleRaf, type VisibleRafTarget } from '../scheduling/useVisibleRaf';\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":";;;;AA2CA,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":["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"}

package/dist/canvas/useHostAnchor.js

@@ -1,22 +1,22 @@
-import { useVisibleRaf as e } from "../scheduling/useVisibleRaf.js";
-import { hostAnchorCss as t, hostAnchorRect as n } from "./hostAnchor.js";
+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 } from "@weasel-js/react";
+import { useLatest as o, useVisibleRaf as s } from "@weasel-js/react";
 //#region src/canvas/useHostAnchor.ts
-function s(s, c) {
-	let [l, u] = a(null), [d, f] = a(null), p = r((e) => u(e), []), m = o(s), { align: h, offset: g, padding: _ = 0 } = c, { x: v, y } = h, { x: b, y: x } = g, S = r(() => {
-		let e = m.current();
-		if (!e) {
-			f(null);
+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);
 			return;
 		}
-		let r = e.getBoundingClientRect(), i = l?.getBoundingClientRect(), a = {
+		let r = n.getBoundingClientRect(), i = u?.getBoundingClientRect(), a = {
 			width: window.innerWidth,
 			height: window.innerHeight
 		}, o = {
-			x: v,
-			y
-		}, s = n({
+			x: y,
+			y: b
+		}, s = t({
 			host: {
 				x: r.left,
 				y: r.top,
@@ -30,42 +30,44 @@ function s(s, c) {
 			viewport: a,
 			align: o,
 			offset: {
-				x: b,
-				y: x
+				x,
+				y: S
 			},
-			padding: _
+			padding: v
 		});
-		f(t(s, o, a));
+		p(e(s, o, a));
 	}, [
-		m,
-		l,
-		v,
+		h,
+		u,
 		y,
 		b,
 		x,
-		_
-	]), C = e(S);
+		S,
+		v
+	]), w = s(C);
 	return i(() => {
-		S();
-		let e = () => C.request();
+		C();
+		let e = () => w.request();
 		window.addEventListener("scroll", e, !0), window.addEventListener("resize", e);
 		let t = typeof ResizeObserver < "u" ? new ResizeObserver(e) : null;
-		l && t?.observe(l);
-		let n = m.current();
-		return n && t?.observe(n), () => {
-			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), C.cancel(), t?.disconnect();
+		u && t?.observe(u);
+		let r = h.current();
+		r && t?.observe(r);
+		let i = r ? n(r, e) : void 0;
+		return () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), w.cancel(), t?.disconnect(), i?.();
 		};
 	}, [
-		S,
 		C,
-		l,
-		m
+		w,
+		u,
+		h
 	]), {
-		ref: p,
-		style: d
+		ref: m,
+		style: f
 	};
 }
 //#endregion
-export { s as useHostAnchor };
+export { c as 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"],"sources":["../../src/canvas/useHostAnchor.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { useVisibleRaf } from '../scheduling/useVisibleRaf';\nimport {\n  hostAnchorCss, hostAnchorRect,\n  type HostAnchorAlign, type HostAnchorOffset,\n} from './hostAnchor';\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.\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\n    return () => {\n      window.removeEventListener('scroll', schedule, true);\n      window.removeEventListener('resize', schedule);\n      raf.cancel();\n      observer?.disconnect();\n    };\n  }, [recompute, raf, panel, resolve]);\n\n  return { ref, style };\n}\n"],"mappings":";;;;;AA6BA,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,GAAWC,MAAWC,GAC3B,EAAE,GAAGC,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;GAAWC;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;IAAE,GAAGN;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;CAsBnC,OApBAW,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;EAG/B,OAFIW,KAAQY,GAAU,QAAQZ,CAAM,SAEvB;GAIX,AAHA,OAAO,oBAAoB,UAAUW,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUA,CAAQ,GAC7CH,EAAI,OAAO,GACXI,GAAU,WAAW;EACvB;CACF,GAAG;EAACb;EAAWS;EAAK3B;EAAOQ;CAAO,CAAC,GAE5B;EAAE;EAAK;CAAM;AACtB"}
+{"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"}

package/dist/canvas/useLateContentRedraw.js

@@ -1,17 +1,17 @@
-import { paintKindRegistry as e } from "../core/paintKinds.js";
-import { subscribeImageReady as t } from "../features/images/imageCache.js";
-import { subscribeGlyphReady as n } from "@weasel-js/font";
-import { useEffect as r } from "react";
+import { paintKindRegistry as e } from "../core/paint/paintKinds.js";
+import { subscribeImageReady as t } from "@weasel-js/renderer";
+import { useEffect as n } from "react";
+import { subscribeGlyphReady as r } from "@weasel-js/font";
 //#region src/canvas/useLateContentRedraw.ts
 function i(i) {
-	r(() => {
-		let r = [
+	n(() => {
+		let n = [
 			t(i),
-			n(i),
+			r(i),
 			e.subscribe(i)
 		];
 		return () => {
-			for (let e of r) e();
+			for (let e of n) e();
 		};
 	}, [i]);
 }

package/dist/canvas/useLateContentRedraw.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLateContentRedraw.js","names":["useLateContentRedraw","offs","subscribeImageReady","requestRedraw","subscribeGlyphReady","paintKindRegistry","off"],"sources":["../../src/canvas/useLateContentRedraw.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { subscribeGlyphReady } from '@weasel-js/font';\nimport { subscribeImageReady } from 'features/images/imageCache';\nimport { paintKindRegistry } from 'core/paintKinds';\n\n/**\n * Repaint whenever something a frame could not draw becomes drawable: an image\n * finishes decoding, a deferred glyph bake or font load lands, or a paint kind\n * registers late. Each of these drew nothing (or a placeholder) on the frame\n * that asked for it and says nothing further unless a surface is listening.\n */\nexport function useLateContentRedraw(requestRedraw: () => void): void {\n  useEffect(() => {\n    const offs = [\n      subscribeImageReady(requestRedraw),\n      subscribeGlyphReady(requestRedraw),\n      paintKindRegistry.subscribe(requestRedraw),\n    ];\n    return () => { for (const off of offs) off(); };\n  }, [requestRedraw]);\n}\n"],"mappings":";;;;;AAWA,SAAgBA,EAAqB,GAAiC;CACpE,QAAgB;EACd,IAAMC,IAAO;GACXC,EAAoBC,CAAa;GACjCC,EAAoBD,CAAa;GACjCE,EAAkB,UAAUF,CAAa;EAC3C;EACA,aAAa;GAAE,KAAK,IAAMG,KAAOL,GAAM,EAAI;EAAG;CAChD,GAAG,CAACE,CAAa,CAAC;AACpB"}
+{"version":3,"file":"useLateContentRedraw.js","names":["useLateContentRedraw","offs","subscribeImageReady","requestRedraw","subscribeGlyphReady","paintKindRegistry","off"],"sources":["../../src/canvas/useLateContentRedraw.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { subscribeGlyphReady } from '@weasel-js/font';\nimport { subscribeImageReady } from '@weasel-js/renderer';\nimport { paintKindRegistry } from 'core/paint/paintKinds';\n\n/**\n * Repaint whenever something a frame could not draw becomes drawable: an image\n * finishes decoding, a deferred glyph bake or font load lands, or a paint kind\n * registers late. Each of these drew nothing (or a placeholder) on the frame\n * that asked for it and says nothing further unless a surface is listening.\n */\nexport function useLateContentRedraw(requestRedraw: () => void): void {\n  useEffect(() => {\n    const offs = [\n      subscribeImageReady(requestRedraw),\n      subscribeGlyphReady(requestRedraw),\n      paintKindRegistry.subscribe(requestRedraw),\n    ];\n    return () => { for (const off of offs) off(); };\n  }, [requestRedraw]);\n}\n"],"mappings":";;;;;AAWA,SAAgBA,EAAqB,GAAiC;CACpE,QAAgB;EACd,IAAMC,IAAO;GACXC,EAAoBC,CAAa;GACjCC,EAAoBD,CAAa;GACjCE,EAAkB,UAAUF,CAAa;EAC3C;EACA,aAAa;GAAE,KAAK,IAAMG,KAAOL,GAAM,EAAI;EAAG;CAChD,GAAG,CAACE,CAAa,CAAC;AACpB"}

package/dist/canvas/useSceneAdapter.js

@@ -0,0 +1,22 @@
+import { sceneToAdapter as e } from "./sceneAdapter.js";
+import { useMemo as t } from "react";
+//#region src/canvas/useSceneAdapter.ts
+function n(n, r = {}) {
+	let { selection: i, commitInsert: a, insertLayer: o, poseDescriptor: s } = r;
+	return t(() => e(n, {
+		selection: i,
+		commitInsert: a,
+		insertLayer: o,
+		poseDescriptor: s
+	}), [
+		n,
+		i,
+		a,
+		o,
+		s
+	]);
+}
+//#endregion
+export { n as useSceneAdapter };
+
+//# sourceMappingURL=useSceneAdapter.js.map

package/dist/canvas/useSceneAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSceneAdapter.js","names":["useSceneAdapter","options","useMemo","sceneToAdapter","scene","selection","commitInsert","insertLayer","poseDescriptor"],"sources":["../../src/canvas/useSceneAdapter.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Scene } from 'core/scene/types';\nimport {\n  sceneToAdapter,\n  type SceneCanvasAdapter,\n  type SceneToAdapterOptions,\n} from './sceneAdapter';\n\n/**\n * React-hook wrapper around `sceneToAdapter`. Memoizes on every option, so\n * the adapter keeps its identity across renders unless one of them changes.\n */\nexport function useSceneAdapter<TData, TLayer extends string, TPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  options: SceneToAdapterOptions<TData, TLayer, TPose> = {},\n): SceneCanvasAdapter<TData, TLayer, TPose> {\n  const {\n    selection, commitInsert, insertLayer, poseDescriptor,\n  } = options;\n  return useMemo(\n    () => sceneToAdapter(scene, {\n      selection, commitInsert, insertLayer, poseDescriptor,\n    }),\n    [scene, selection, commitInsert, insertLayer, poseDescriptor],\n  );\n}\n"],"mappings":";;;AAYA,SAAgBA,EACd,GACA,IAAuD,CAAC,GACd;CAC1C,IAAM,EACJ,cAAW,iBAAc,gBAAa,sBACpCC;CACJ,OAAOC,QACCC,EAAeC,GAAO;EAC1B;EAAW;EAAc;EAAa;CACxC,CAAC,GACD;EAACA;EAAOC;EAAWC;EAAcC;EAAaC;CAAc,CAC9D;AACF"}

package/dist/canvas/useSceneLayerList.js

@@ -1,19 +1,9 @@
-import { useCallback as e, useState as t } from "react";
-import { useLatest as n } from "@weasel-js/react";
+import { useCallback as e, useSyncExternalStore as t } from "react";
 //#region src/canvas/useSceneLayerList.ts
-var r = (e) => typeof e?.getLayers == "function" ? e.getLayers().map((e) => e.id).join("\n") : "";
+var n = () => {}, r = (e) => typeof e?.getLayers == "function" ? e.getLayers().map((e) => e.id).join("\n") : "";
 function i(i) {
-	let [a, o] = t(() => r(i)), s = n({
-		adapter: i,
-		key: a
-	});
-	return {
-		key: a,
-		sync: e(() => {
-			let e = r(s.current.adapter);
-			return e !== s.current.key && (o(e), !0);
-		}, [s])
-	};
+	let a = e((e) => i?.subscribeLayers?.(e) ?? n, [i]), o = e(() => r(i), [i]);
+	return t(a, o, o);
 }
 //#endregion
 export { i as useSceneLayerList };

package/dist/canvas/useSceneLayerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSceneLayerList.js","names":["read","adapter","l","useSceneLayerList","key","setKey","useState","live","useLatest","useCallback","now"],"sources":["../../src/canvas/useSceneLayerList.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useLatest } from '@weasel-js/react';\n\ninterface LayerListSource {\n  getLayers?: () => readonly { id: string }[];\n}\n\nconst read = (adapter: LayerListSource | undefined): string =>\n  typeof adapter?.getLayers === 'function' ? adapter.getLayers().map((l) => l.id).join('\\n') : '';\n\n/**\n * The adapter's scene-layer ids as a render input. A scene write repaints\n * without re-rendering, so nothing on the React side sees a layer added,\n * removed, or reordered; the paint calls `sync` to find out.\n */\nexport function useSceneLayerList(adapter: LayerListSource | undefined): {\n  /** Changes when the layer list does. A memo dependency. */\n  key: string;\n  /** Re-read the list. Returns `true`, having queued a render, when the\n   *  layers built from `key` no longer match it. */\n  sync(): boolean;\n} {\n  const [key, setKey] = useState(() => read(adapter));\n  const live = useLatest({ adapter, key });\n  const sync = useCallback((): boolean => {\n    const now = read(live.current.adapter);\n    if (now === live.current.key) return false;\n    setKey(now);\n    return true;\n  }, [live]);\n  return { key, sync };\n}\n"],"mappings":";;;AAOA,IAAMA,KAAQ,MACZ,OAAOC,GAAS,aAAc,aAAaA,EAAQ,UAAU,CAAC,CAAC,KAAK,MAAMC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI;AAO/F,SAAgBC,EAAkB,GAMhC;CACA,IAAM,CAACC,GAAKC,KAAUC,QAAeN,EAAKC,CAAO,CAAC,GAC5CM,IAAOC,EAAU;EAAE;EAAS;CAAI,CAAC;CAOvC,OAAO;EAAE;EAAK,MANDC,QAA2B;GACtC,IAAMC,IAAMV,EAAKO,EAAK,QAAQ,OAAO;GAGrC,OAFIG,MAAQH,EAAK,QAAQ,QACzBF,EAAOK,CAAG,GACH;EACT,GAAG,CAACH,CAAI,CACM;CAAK;AACrB"}
+{"version":3,"file":"useSceneLayerList.js","names":["UNSUBSCRIBED","read","adapter","l","useSceneLayerList","subscribe","useCallback","listener","snapshot","useSyncExternalStore"],"sources":["../../src/canvas/useSceneLayerList.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\ninterface LayerListSource {\n  getLayers?: () => readonly { id: string }[];\n  subscribeLayers?: (listener: () => void) => () => void;\n}\n\nconst UNSUBSCRIBED = (): void => {};\n\nconst read = (adapter: LayerListSource | undefined): string =>\n  typeof adapter?.getLayers === 'function' ? adapter.getLayers().map((l) => l.id).join('\\n') : '';\n\n/**\n * The adapter's scene-layer ids as a render input: a string that changes when\n * a layer is added, removed, or reordered. A scene write repaints without\n * re-rendering, so the adapter's `subscribeLayers` is what tells React.\n */\nexport function useSceneLayerList(adapter: LayerListSource | undefined): string {\n  const subscribe = useCallback(\n    (listener: () => void) => adapter?.subscribeLayers?.(listener) ?? UNSUBSCRIBED,\n    [adapter],\n  );\n  const snapshot = useCallback(() => read(adapter), [adapter]);\n  return useSyncExternalStore(subscribe, snapshot, snapshot);\n}\n"],"mappings":";;AAOA,IAAMA,UAA2B,CAAC,GAE5BC,KAAQ,MACZ,OAAOC,GAAS,aAAc,aAAaA,EAAQ,UAAU,CAAC,CAAC,KAAK,MAAMC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI;AAO/F,SAAgBC,EAAkB,GAA8C;CAC9E,IAAMC,IAAYC,GACf,MAAyBJ,GAAS,kBAAkBK,CAAQ,KAAKP,GAClE,CAACE,CAAO,CACV,GACMM,IAAWF,QAAkBL,EAAKC,CAAO,GAAG,CAACA,CAAO,CAAC;CAC3D,OAAOO,EAAqBJ,GAAWG,GAAUA,CAAQ;AAC3D"}

package/dist/canvas/useSurfaceInput.js

@@ -0,0 +1,39 @@
+import { useLayoutEffect as e, useRef as t } from "react";
+import { useLatest as n } from "@weasel-js/react";
+import { heldPointers as r } from "@weasel-js/gestures";
+//#region src/canvas/useSurfaceInput.ts
+function i(r, i) {
+	let o = n(i), s = t(null);
+	e(() => {
+		let e = r.current;
+		s.current?.element !== e && (s.current?.detach(), s.current = e ? {
+			element: e,
+			detach: a(e, o)
+		} : null);
+	}), e(() => () => {
+		s.current?.detach(), s.current = null;
+	}, []);
+}
+function a(e, t) {
+	let n = r(e), i = {
+		pointerdown: () => {
+			t.current.focusOnPress && e.focus();
+		},
+		pointermove: (r) => {
+			n.count() === 0 && t.current.onHover(e, r);
+		},
+		pointerleave: () => t.current.onLeave(),
+		contextmenu: (e) => e.preventDefault(),
+		focus: (e) => t.current.onFocus?.(e),
+		blur: (e) => t.current.onBlur?.(e)
+	};
+	for (let [t, n] of Object.entries(i)) e.addEventListener(t, n);
+	return () => {
+		for (let [t, n] of Object.entries(i)) e.removeEventListener(t, n);
+		n.release();
+	};
+}
+//#endregion
+export { i as useSurfaceInput };
+
+//# sourceMappingURL=useSurfaceInput.js.map

package/dist/canvas/useSurfaceInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSurfaceInput.js","names":["useSurfaceInput","live","useLatest","handlers","attached","useRef","useLayoutEffect","element","elementRef","listen","held","heldPointers","listeners","event","type","fn"],"sources":["../../src/canvas/useSurfaceInput.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport { heldPointers } from '@weasel-js/gestures';\nimport { useLatest } from '@weasel-js/react';\n\n/** What a surface does with the input its element receives. */\nexport interface SurfaceInputHandlers {\n  /** Focus the element on a press, so keys reach it without a click first. */\n  focusOnPress: boolean;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  /** The pointer moved over the element with no button held. */\n  onHover(element: HTMLElement, event: PointerEvent): void;\n  /** The pointer left the element. */\n  onLeave(): void;\n}\n\n/**\n * Listen on whichever element `elementRef` holds, moving the listeners when\n * it holds another. Handlers are read at event time, so a new set never\n * re-attaches.\n *\n * Hover stands down while a pointer is held on the element, which\n * `heldPointers` answers for this and the gesture dispatcher alike. Everything\n * else about a press is the dispatcher's, which listens on this same element.\n *\n * Suppresses the browser's context menu: right-click is a gesture surface\n * tools may consume.\n */\nexport function useSurfaceInput(\n  elementRef: { readonly current: HTMLElement | null },\n  handlers: SurfaceInputHandlers,\n): void {\n  const live = useLatest(handlers);\n  const attached = useRef<{ element: HTMLElement; detach: () => void } | null>(null);\n\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (attached.current?.element === element) return;\n    attached.current?.detach();\n    attached.current = element ? { element, detach: listen(element, live) } : null;\n  });\n  useLayoutEffect(() => () => {\n    attached.current?.detach();\n    attached.current = null;\n  }, []);\n}\n\nfunction listen(element: HTMLElement, live: { readonly current: SurfaceInputHandlers }): () => void {\n  const held = heldPointers(element);\n  const listeners: Record<string, (event: Event) => void> = {\n    pointerdown: () => {\n      if (live.current.focusOnPress) element.focus();\n    },\n    pointermove: (event) => {\n      if (held.count() === 0) live.current.onHover(element, event as PointerEvent);\n    },\n    pointerleave: () => live.current.onLeave(),\n    contextmenu: (event) => event.preventDefault(),\n    focus: (event) => live.current.onFocus?.(event as FocusEvent),\n    blur: (event) => live.current.onBlur?.(event as FocusEvent),\n  };\n  for (const [type, fn] of Object.entries(listeners)) element.addEventListener(type, fn);\n  return () => {\n    for (const [type, fn] of Object.entries(listeners)) element.removeEventListener(type, fn);\n    held.release();\n  };\n}\n"],"mappings":";;;;AA4BA,SAAgBA,EACd,GACA,GACM;CACN,IAAMC,IAAOC,EAAUC,CAAQ,GACzBC,IAAWC,EAA4D,IAAI;CAQjF,AANAC,QAAsB;EACpB,IAAMC,IAAUC,EAAW;EAC3B,AAAIJ,EAAS,SAAS,YAAYG,MAClCH,EAAS,SAAS,OAAO,GACzB,EAAS,UAAUG,IAAU;GAAE;GAAS,QAAQE,EAAOF,GAASN,CAAI;EAAE,IAAI;CAC5E,CAAC,GACDK,cAA4B;EAE1B,AADAF,EAAS,SAAS,OAAO,GACzB,EAAS,UAAU;CACrB,GAAG,CAAC,CAAC;AACP;AAEA,SAASK,EAAO,GAAsB,GAA8D;CAClG,IAAMC,IAAOC,EAAaJ,CAAO,GAC3BK,IAAoD;EACxD,mBAAmB;GACjB,AAAIX,EAAK,QAAQ,gBAAcM,EAAQ,MAAM;EAC/C;EACA,cAAc,MAAU;GACtB,AAAIG,EAAK,MAAM,MAAM,KAAGT,EAAK,QAAQ,QAAQM,GAASM,CAAqB;EAC7E;EACA,oBAAoBZ,EAAK,QAAQ,QAAQ;EACzC,cAAc,MAAUY,EAAM,eAAe;EAC7C,QAAQ,MAAUZ,EAAK,QAAQ,UAAUY,CAAmB;EAC5D,OAAO,MAAUZ,EAAK,QAAQ,SAASY,CAAmB;CAC5D;CACA,KAAK,IAAM,CAACC,GAAMC,MAAO,OAAO,QAAQH,CAAS,GAAG,EAAQ,iBAAiBE,GAAMC,CAAE;CACrF,aAAa;EACX,KAAK,IAAM,CAACD,GAAMC,MAAO,OAAO,QAAQH,CAAS,GAAG,EAAQ,oBAAoBE,GAAMC,CAAE;EACxF,EAAK,QAAQ;CACf;AACF"}