@weasel-js/core 1.10.0 → 1.11.0

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/useLateContentRedraw.js

@@ -1,21 +1,28 @@
-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";
+import { paintKindRegistry } from "../core/paint/paintKinds.js";
+import { subscribeImageReady } from "@weasel-js/renderer";
+import { useEffect } from "react";
+import { subscribeGlyphReady } from "@weasel-js/font";
+
 //#region src/canvas/useLateContentRedraw.ts
-function i(i) {
-	n(() => {
-		let n = [
-			t(i),
-			r(i),
-			e.subscribe(i)
+/**
+* Repaint whenever something a frame could not draw becomes drawable: an image
+* finishes decoding, a deferred glyph bake or font load lands, or a paint kind
+* registers late. Each of these drew nothing (or a placeholder) on the frame
+* that asked for it and says nothing further unless a surface is listening.
+*/
+function useLateContentRedraw(requestRedraw) {
+	useEffect(() => {
+		const offs = [
+			subscribeImageReady(requestRedraw),
+			subscribeGlyphReady(requestRedraw),
+			paintKindRegistry.subscribe(requestRedraw)
 		];
 		return () => {
-			for (let e of n) e();
+			for (const off of offs) off();
 		};
-	}, [i]);
+	}, [requestRedraw]);
 }
-//#endregion
-export { i as useLateContentRedraw };
 
+//#endregion
+export { useLateContentRedraw };
 //# sourceMappingURL=useLateContentRedraw.js.map

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 '@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"}
+{"version":3,"file":"useLateContentRedraw.js","names":[],"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,SAAgB,qBAAqB,eAAiC;CACpE,gBAAgB;EACd,MAAM,OAAO;GACX,oBAAoB,aAAa;GACjC,oBAAoB,aAAa;GACjC,kBAAkB,UAAU,aAAa;EAC3C;EACA,aAAa;GAAE,KAAK,MAAM,OAAO,MAAM,IAAI;EAAG;CAChD,GAAG,CAAC,aAAa,CAAC;AACpB"}

package/dist/canvas/useLayerStack.js

@@ -0,0 +1,72 @@
+import { createBackgroundFillLayer } from "../core/layers/backgroundFill.js";
+import { isCustomEntry } from "./layerSlots.js";
+import { composeOrderedLayers, placeToolOverlays } from "./layerOrder.js";
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
+
+//#region src/canvas/useLayerStack.ts
+/** The `layers` prop's slots and custom entries in draw order, with the background fill beneath,
+*  the decoration layer above, and the active tool's overlays placed among them. */
+function useSlotLayers(layersMap, tools, backgroundFill, decorationLayer) {
+	const backgroundLayer = useMemo(() => backgroundFill ? createBackgroundFillLayer(backgroundFill) : void 0, [backgroundFill]);
+	return useMemo(() => {
+		const standardLayers = {};
+		for (const slot of [
+			"grid",
+			"cellHighlight",
+			"selectionOverlay"
+		]) {
+			const entry = layersMap[slot];
+			if (isCustomEntry(entry)) standardLayers[slot] = entry.layer;
+		}
+		const out = composeOrderedLayers(decorationLayer ? {
+			...layersMap,
+			decorationLayer: { layer: decorationLayer }
+		} : layersMap, standardLayers, layersMap.scene?.layers, backgroundLayer);
+		if (tools) placeToolOverlays(out, standardLayers.selectionOverlay, tools.getActiveOverlays);
+		return out;
+	}, [
+		layersMap,
+		tools,
+		backgroundLayer,
+		decorationLayer
+	]);
+}
+/**
+* The full stack the canvas paints: its slot layers, then registered views, the debug overlay,
+* externally registered layers, and the cursor. Every layer that can change on its own
+* repaints the canvas through `requestRedraw`.
+*/
+function useComposedLayers(layers, above, requestRedraw) {
+	const { viewRegistry, debugOverlay, extrasRef, extrasVersion, cursorLayer } = above;
+	const viewRegistryVersion = useSyncExternalStore(useCallback((cb) => viewRegistry?.subscribe(cb) ?? (() => {}), [viewRegistry]), () => viewRegistry?.getVersion() ?? 0, () => 0);
+	const composed = useMemo(() => {
+		const withViews = viewRegistry ? [...layers, ...viewRegistry.list().filter((r) => r.paint).map((r) => r.layer)] : layers;
+		return [
+			...debugOverlay ? [...withViews, debugOverlay] : withViews,
+			...extrasRef.current,
+			cursorLayer
+		];
+	}, [
+		layers,
+		debugOverlay,
+		extrasVersion,
+		viewRegistry,
+		viewRegistryVersion,
+		cursorLayer
+	]);
+	useEffect(() => {
+		const redraw = () => {
+			requestRedraw();
+		};
+		const offs = [];
+		for (const layer of composed) if (layer.subscribe) offs.push(layer.subscribe(redraw));
+		return () => {
+			for (const off of offs) off();
+		};
+	}, [composed, requestRedraw]);
+	return composed;
+}
+
+//#endregion
+export { useComposedLayers, useSlotLayers };
+//# sourceMappingURL=useLayerStack.js.map

package/dist/canvas/useLayerStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayerStack.js","names":[],"sources":["../../src/canvas/useLayerStack.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';\nimport type { RenderLayer } from 'core/layers/render';\nimport type { Paint } from '@weasel-js/paint';\nimport { createBackgroundFillLayer } from 'core/layers/backgroundFill';\nimport { composeOrderedLayers, placeToolOverlays } from './layerOrder';\nimport { STANDARD_SLOTS, isCustomEntry } from './layerSlots';\nimport type { CanvasProps } from './canvasProps';\nimport type { ViewRegistry } from './viewRegistry';\n\n/** The `layers` prop's slots and custom entries in draw order, with the background fill beneath,\n *  the decoration layer above, and the active tool's overlays placed among them. */\nexport function useSlotLayers(\n  layersMap: CanvasProps<unknown>['layers'],\n  tools: CanvasProps<unknown>['tools'],\n  backgroundFill: Paint | undefined,\n  decorationLayer: RenderLayer<unknown> | undefined,\n): RenderLayer<unknown>[] {\n  const backgroundLayer = useMemo(\n    () => (backgroundFill ? createBackgroundFillLayer(backgroundFill) : undefined),\n    [backgroundFill],\n  );\n\n  return useMemo<RenderLayer<unknown>[]>(() => {\n    const standardLayers: Partial<\n      Record<(typeof STANDARD_SLOTS)[number], RenderLayer<unknown>>\n    > = {};\n    for (const slot of ['grid', 'cellHighlight', 'selectionOverlay'] as const) {\n      const entry = layersMap[slot];\n      if (isCustomEntry(entry)) standardLayers[slot] = entry.layer;\n    }\n    const out: RenderLayer<unknown>[] = composeOrderedLayers(\n      decorationLayer ? { ...layersMap, decorationLayer: { layer: decorationLayer } } : layersMap,\n      standardLayers, layersMap.scene?.layers, backgroundLayer,\n    );\n    if (tools) {\n      placeToolOverlays(out, standardLayers.selectionOverlay, tools.getActiveOverlays);\n    }\n    return out;\n  }, [layersMap, tools, backgroundLayer, decorationLayer]);\n}\n\n/** What the canvas paints on top of its slot layers. */\nexport interface StackAbove {\n  viewRegistry: ViewRegistry | null;\n  debugOverlay: RenderLayer<unknown> | null | undefined;\n  /** Registered layers; re-read whenever `extrasVersion` changes. */\n  extrasRef: { readonly current: ReadonlySet<RenderLayer<unknown>> };\n  extrasVersion: number;\n  cursorLayer: RenderLayer<unknown>;\n}\n\n/**\n * The full stack the canvas paints: its slot layers, then registered views, the debug overlay,\n * externally registered layers, and the cursor. Every layer that can change on its own\n * repaints the canvas through `requestRedraw`.\n */\nexport function useComposedLayers(\n  layers: readonly RenderLayer<unknown>[],\n  above: StackAbove,\n  requestRedraw: () => void,\n): RenderLayer<unknown>[] {\n  const { viewRegistry, debugOverlay, extrasRef, extrasVersion, cursorLayer } = above;\n  const viewRegistryVersion = useSyncExternalStore(\n    useCallback((cb: () => void) => viewRegistry?.subscribe(cb) ?? (() => {}), [viewRegistry]),\n    () => viewRegistry?.getVersion() ?? 0,\n    () => 0,\n  );\n\n  const composed = useMemo(() => {\n    // Views paint through the surface's own stack, so they sit above it and\n    // below both the debug overlay and externally-registered layers.\n    const withViews = viewRegistry\n      ? [...layers, ...viewRegistry.list().filter((r) => r.paint).map((r) => r.layer as RenderLayer<unknown>)]\n      : layers;\n    const base = debugOverlay ? [...withViews, debugOverlay] : withViews;\n    // The cursor goes last: it is the one thing that is always in front of\n    // everything, including a consumer's own registered layers.\n    return [...base, ...extrasRef.current, cursorLayer];\n    // extrasVersion drives re-reads of extrasRef when layers are registered/detached;\n    // viewRegistryVersion does the same for registered views.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [layers, debugOverlay, extrasVersion, viewRegistry, viewRegistryVersion,\n      cursorLayer]);\n\n  useEffect(() => {\n    const redraw = (): void => { requestRedraw(); };\n    const offs: (() => void)[] = [];\n    for (const layer of composed) if (layer.subscribe) offs.push(layer.subscribe(redraw));\n    return () => { for (const off of offs) off(); };\n  }, [composed, requestRedraw]);\n\n  return composed;\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,cACd,WACA,OACA,gBACA,iBACwB;CACxB,MAAM,kBAAkB,cACf,iBAAiB,0BAA0B,cAAc,IAAI,QACpE,CAAC,cAAc,CACjB;CAEA,OAAO,cAAsC;EAC3C,MAAM,iBAEF,CAAC;EACL,KAAK,MAAM,QAAQ;GAAC;GAAQ;GAAiB;EAAkB,GAAY;GACzE,MAAM,QAAQ,UAAU;GACxB,IAAI,cAAc,KAAK,GAAG,eAAe,QAAQ,MAAM;EACzD;EACA,MAAM,MAA8B,qBAClC,kBAAkB;GAAE,GAAG;GAAW,iBAAiB,EAAE,OAAO,gBAAgB;EAAE,IAAI,WAClF,gBAAgB,UAAU,OAAO,QAAQ,eAC3C;EACA,IAAI,OACF,kBAAkB,KAAK,eAAe,kBAAkB,MAAM,iBAAiB;EAEjF,OAAO;CACT,GAAG;EAAC;EAAW;EAAO;EAAiB;CAAe,CAAC;AACzD;;;;;;AAiBA,SAAgB,kBACd,QACA,OACA,eACwB;CACxB,MAAM,EAAE,cAAc,cAAc,WAAW,eAAe,gBAAgB;CAC9E,MAAM,sBAAsB,qBAC1B,aAAa,OAAmB,cAAc,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,SACnF,cAAc,WAAW,KAAK,SAC9B,CACR;CAEA,MAAM,WAAW,cAAc;EAG7B,MAAM,YAAY,eACd,CAAC,GAAG,QAAQ,GAAG,aAAa,KAAK,CAAC,CAAC,QAAQ,MAAM,EAAE,KAAK,CAAC,CAAC,KAAK,MAAM,EAAE,KAA6B,CAAC,IACrG;EAIJ,OAAO;GAAC,GAHK,eAAe,CAAC,GAAG,WAAW,YAAY,IAAI;GAG1C,GAAG,UAAU;GAAS;EAAW;CAIpD,GAAG;EAAC;EAAQ;EAAc;EAAe;EAAc;EACnD;CAAW,CAAC;CAEhB,gBAAgB;EACd,MAAM,eAAqB;GAAE,cAAc;EAAG;EAC9C,MAAM,OAAuB,CAAC;EAC9B,KAAK,MAAM,SAAS,UAAU,IAAI,MAAM,WAAW,KAAK,KAAK,MAAM,UAAU,MAAM,CAAC;EACpF,aAAa;GAAE,KAAK,MAAM,OAAO,MAAM,IAAI;EAAG;CAChD,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,OAAO;AACT"}

package/dist/canvas/usePaintedCursor.js

@@ -0,0 +1,28 @@
+import { createPaintedCursorLayer } from "./paintedCursorLayer.js";
+import { useEffect, useMemo } from "react";
+import { createCursorSink, createPaintedCursorState } from "@weasel-js/cursor";
+
+//#region src/canvas/usePaintedCursor.ts
+/**
+* The painted cursor tier's channel. The canvas owns it because it owns both ends: the tool
+* cursor that feeds it and the frame loop that has to repaint when it changes.
+*/
+function usePaintedCursor(canvasRef, requestRedraw) {
+	const paintedCursor = useMemo(() => createPaintedCursorState(), []);
+	const paintedCursorLayer = useMemo(() => createPaintedCursorLayer(paintedCursor), [paintedCursor]);
+	useEffect(() => paintedCursor.subscribe(() => {
+		requestRedraw();
+	}), [paintedCursor, requestRedraw]);
+	return {
+		paintedCursor,
+		paintedCursorLayer,
+		cursorSink: useMemo(() => createCursorSink({
+			element: () => canvasRef.current,
+			painted: () => paintedCursor
+		}), [canvasRef, paintedCursor])
+	};
+}
+
+//#endregion
+export { usePaintedCursor };
+//# sourceMappingURL=usePaintedCursor.js.map

package/dist/canvas/usePaintedCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaintedCursor.js","names":[],"sources":["../../src/canvas/usePaintedCursor.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { createCursorSink, createPaintedCursorState } from '@weasel-js/cursor';\nimport type { CursorSink, PaintedCursorState } from '@weasel-js/cursor';\nimport type { RenderLayer } from 'core/layers/render';\nimport { createPaintedCursorLayer } from './paintedCursorLayer';\n\nexport interface CanvasCursor {\n  paintedCursor: PaintedCursorState;\n  paintedCursorLayer: RenderLayer<unknown>;\n  /** The one writer of the input element's `cursor` style: the tool's cursor\n   *  from the canvas, a hover cursor from the pump, which reaches it through the handle. */\n  cursorSink: CursorSink;\n}\n\n/**\n * The painted cursor tier's channel. The canvas owns it because it owns both ends: the tool\n * cursor that feeds it and the frame loop that has to repaint when it changes.\n */\nexport function usePaintedCursor(\n  canvasRef: { readonly current: HTMLElement | null },\n  requestRedraw: () => void,\n): CanvasCursor {\n  const paintedCursor = useMemo<PaintedCursorState>(() => createPaintedCursorState(), []);\n  const paintedCursorLayer = useMemo(\n    () => createPaintedCursorLayer(paintedCursor),\n    [paintedCursor],\n  );\n  // An idle pointermove repaints nothing on its own, so a cursor the compositor\n  // is not drawing needs its own pump. The store stays quiet unless something\n  // painted is actually on screen.\n  useEffect(() => paintedCursor.subscribe(() => { requestRedraw(); }), [paintedCursor, requestRedraw]);\n  const cursorSink = useMemo(\n    () => createCursorSink({ element: () => canvasRef.current, painted: () => paintedCursor }),\n    [canvasRef, paintedCursor],\n  );\n  return { paintedCursor, paintedCursorLayer, cursorSink };\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,iBACd,WACA,eACc;CACd,MAAM,gBAAgB,cAAkC,yBAAyB,GAAG,CAAC,CAAC;CACtF,MAAM,qBAAqB,cACnB,yBAAyB,aAAa,GAC5C,CAAC,aAAa,CAChB;CAIA,gBAAgB,cAAc,gBAAgB;EAAE,cAAc;CAAG,CAAC,GAAG,CAAC,eAAe,aAAa,CAAC;CAKnG,OAAO;EAAE;EAAe;EAAoB,YAJzB,cACX,iBAAiB;GAAE,eAAe,UAAU;GAAS,eAAe;EAAc,CAAC,GACzF,CAAC,WAAW,aAAa,CAEiB;CAAW;AACzD"}

package/dist/canvas/useRedrawOn.js

@@ -1,21 +1,31 @@
-import { useEffect as e, useState as t } from "react";
+import { useEffect, useState } from "react";
+
 //#region src/canvas/useRedrawOn.ts
-function n(t, n) {
-	let i = r(t);
-	e(() => {
-		let e = () => {
-			n();
-		}, t = (i ?? []).map((t) => t.subscribe(e));
+/** Subscribe `requestRedraw` to each source while mounted. An inline array
+*  holding the same sources does not resubscribe. */
+function useRedrawOn(sources, requestRedraw) {
+	const kept = useSameElements(sources);
+	useEffect(() => {
+		const redraw = () => {
+			requestRedraw();
+		};
+		const offs = (kept ?? []).map((src) => src.subscribe(redraw));
 		return () => {
-			for (let e of t) e();
+			for (const off of offs) off();
 		};
-	}, [i, n]);
+	}, [kept, requestRedraw]);
 }
-function r(e) {
-	let [n, r] = t(e);
-	return n !== e && !(n && e && n.length === e.length && n.every((t, n) => t === e[n])) ? (r(e), e) : n;
+/** `list` as last passed, kept by identity while it holds the same elements —
+*  so an inline array prop does not read as a change every render. */
+function useSameElements(list) {
+	const [kept, setKept] = useState(list);
+	if (kept !== list && !(kept && list && kept.length === list.length && kept.every((x, i) => x === list[i]))) {
+		setKept(list);
+		return list;
+	}
+	return kept;
 }
-//#endregion
-export { n as useRedrawOn };
 
+//#endregion
+export { useRedrawOn };
 //# sourceMappingURL=useRedrawOn.js.map

package/dist/canvas/useRedrawOn.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRedrawOn.js","names":["useRedrawOn","kept","useSameElements","sources","redraw","offs","src","off","requestRedraw","setKept","useState","list","x","i"],"sources":["../../src/canvas/useRedrawOn.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { RedrawSource } from '../core/layers/render';\n\n/** Subscribe `requestRedraw` to each source while mounted. An inline array\n *  holding the same sources does not resubscribe. */\nexport function useRedrawOn(sources: readonly RedrawSource[] | undefined, requestRedraw: () => void): void {\n  const kept = useSameElements(sources);\n  useEffect(() => {\n    const redraw = (): void => { requestRedraw(); };\n    const offs = (kept ?? []).map((src) => src.subscribe(redraw));\n    return () => { for (const off of offs) off(); };\n  }, [kept, requestRedraw]);\n}\n\n/** `list` as last passed, kept by identity while it holds the same elements —\n *  so an inline array prop does not read as a change every render. */\nfunction useSameElements<T>(list: readonly T[] | undefined): readonly T[] | undefined {\n  // Derived state rather than a ref, so a render React throws away can't\n  // leave its list behind as the one the next render compares against.\n  const [kept, setKept] = useState(list);\n  if (kept !== list && !(kept && list && kept.length === list.length && kept.every((x, i) => x === list[i]))) {\n    setKept(list);\n    return list;\n  }\n  return kept;\n}\n"],"mappings":";;AAKA,SAAgBA,EAAY,GAA8C,GAAiC;CACzG,IAAMC,IAAOC,EAAgBC,CAAO;CACpC,QAAgB;EACd,IAAMC,UAAqB;GAAE,EAAc;EAAG,GACxCC,KAAQJ,KAAQ,CAAC,EAAA,CAAG,KAAK,MAAQK,EAAI,UAAUF,CAAM,CAAC;EAC5D,aAAa;GAAE,KAAK,IAAMG,KAAOF,GAAM,EAAI;EAAG;CAChD,GAAG,CAACJ,GAAMO,CAAa,CAAC;AAC1B;AAIA,SAASN,EAAmB,GAA0D;CAGpF,IAAM,CAACD,GAAMQ,KAAWC,EAASC,CAAI;CAKrC,OAJIV,MAASU,KAAQ,EAAEV,KAAQU,KAAQV,EAAK,WAAWU,EAAK,UAAUV,EAAK,OAAO,GAAG,MAAMW,MAAMD,EAAKE,EAAE,MACtGJ,EAAQE,CAAI,GACLA,KAEFV;AACT"}
+{"version":3,"file":"useRedrawOn.js","names":[],"sources":["../../src/canvas/useRedrawOn.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { RedrawSource } from '../core/layers/render';\n\n/** Subscribe `requestRedraw` to each source while mounted. An inline array\n *  holding the same sources does not resubscribe. */\nexport function useRedrawOn(sources: readonly RedrawSource[] | undefined, requestRedraw: () => void): void {\n  const kept = useSameElements(sources);\n  useEffect(() => {\n    const redraw = (): void => { requestRedraw(); };\n    const offs = (kept ?? []).map((src) => src.subscribe(redraw));\n    return () => { for (const off of offs) off(); };\n  }, [kept, requestRedraw]);\n}\n\n/** `list` as last passed, kept by identity while it holds the same elements —\n *  so an inline array prop does not read as a change every render. */\nfunction useSameElements<T>(list: readonly T[] | undefined): readonly T[] | undefined {\n  // Derived state rather than a ref, so a render React throws away can't\n  // leave its list behind as the one the next render compares against.\n  const [kept, setKept] = useState(list);\n  if (kept !== list && !(kept && list && kept.length === list.length && kept.every((x, i) => x === list[i]))) {\n    setKept(list);\n    return list;\n  }\n  return kept;\n}\n"],"mappings":";;;;;AAKA,SAAgB,YAAY,SAA8C,eAAiC;CACzG,MAAM,OAAO,gBAAgB,OAAO;CACpC,gBAAgB;EACd,MAAM,eAAqB;GAAE,cAAc;EAAG;EAC9C,MAAM,QAAQ,QAAQ,CAAC,EAAA,CAAG,KAAK,QAAQ,IAAI,UAAU,MAAM,CAAC;EAC5D,aAAa;GAAE,KAAK,MAAM,OAAO,MAAM,IAAI;EAAG;CAChD,GAAG,CAAC,MAAM,aAAa,CAAC;AAC1B;;;AAIA,SAAS,gBAAmB,MAA0D;CAGpF,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CACrC,IAAI,SAAS,QAAQ,EAAE,QAAQ,QAAQ,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,GAAG,MAAM,MAAM,KAAK,EAAE,IAAI;EAC1G,QAAQ,IAAI;EACZ,OAAO;CACT;CACA,OAAO;AACT"}

package/dist/canvas/useSceneAdapter.js

@@ -0,0 +1,27 @@
+import { sceneToAdapter } from "./sceneAdapter.js";
+import { useMemo } from "react";
+
+//#region src/canvas/useSceneAdapter.ts
+/**
+* React-hook wrapper around `sceneToAdapter`. Memoizes on every option, so
+* the adapter keeps its identity across renders unless one of them changes.
+*/
+function useSceneAdapter(scene, options = {}) {
+	const { selection, commitInsert, insertLayer, poseDescriptor } = options;
+	return useMemo(() => sceneToAdapter(scene, {
+		selection,
+		commitInsert,
+		insertLayer,
+		poseDescriptor
+	}), [
+		scene,
+		selection,
+		commitInsert,
+		insertLayer,
+		poseDescriptor
+	]);
+}
+
+//#endregion
+export { useSceneAdapter };
+//# sourceMappingURL=useSceneAdapter.js.map

package/dist/canvas/useSceneAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSceneAdapter.js","names":[],"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,SAAgB,gBACd,OACA,UAAuD,CAAC,GACd;CAC1C,MAAM,EACJ,WAAW,cAAc,aAAa,mBACpC;CACJ,OAAO,cACC,eAAe,OAAO;EAC1B;EAAW;EAAc;EAAa;CACxC,CAAC,GACD;EAAC;EAAO;EAAW;EAAc;EAAa;CAAc,CAC9D;AACF"}

package/dist/canvas/useSceneLayerList.js

@@ -1,11 +1,19 @@
-import { useCallback as e, useSyncExternalStore as t } from "react";
+import { useCallback, useSyncExternalStore } from "react";
+
 //#region src/canvas/useSceneLayerList.ts
-var n = () => {}, r = (e) => typeof e?.getLayers == "function" ? e.getLayers().map((e) => e.id).join("\n") : "";
-function i(i) {
-	let a = e((e) => i?.subscribeLayers?.(e) ?? n, [i]), o = e(() => r(i), [i]);
-	return t(a, o, o);
+var UNSUBSCRIBED = () => {};
+var read = (adapter) => typeof adapter?.getLayers === "function" ? adapter.getLayers().map((l) => l.id).join("\n") : "";
+/**
+* The adapter's scene-layer ids as a render input: a string that changes when
+* a layer is added, removed, or reordered. A scene write repaints without
+* re-rendering, so the adapter's `subscribeLayers` is what tells React.
+*/
+function useSceneLayerList(adapter) {
+	const subscribe = useCallback((listener) => adapter?.subscribeLayers?.(listener) ?? UNSUBSCRIBED, [adapter]);
+	const snapshot = useCallback(() => read(adapter), [adapter]);
+	return useSyncExternalStore(subscribe, snapshot, snapshot);
 }
-//#endregion
-export { i as useSceneLayerList };
 
+//#endregion
+export { useSceneLayerList };
 //# sourceMappingURL=useSceneLayerList.js.map

package/dist/canvas/useSceneLayerList.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"useSceneLayerList.js","names":[],"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,IAAM,qBAA2B,CAAC;AAElC,IAAM,QAAQ,YACZ,OAAO,SAAS,cAAc,aAAa,QAAQ,UAAU,CAAC,CAAC,KAAK,MAAM,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI;;;;;;AAO/F,SAAgB,kBAAkB,SAA8C;CAC9E,MAAM,YAAY,aACf,aAAyB,SAAS,kBAAkB,QAAQ,KAAK,cAClE,CAAC,OAAO,CACV;CACA,MAAM,WAAW,kBAAkB,KAAK,OAAO,GAAG,CAAC,OAAO,CAAC;CAC3D,OAAO,qBAAqB,WAAW,UAAU,QAAQ;AAC3D"}

package/dist/canvas/useSurfaceInput.js

@@ -1,42 +1,58 @@
-import { useLayoutEffect as e, useRef as t } from "react";
-import { useLatest as n } from "@weasel-js/react";
+import { useLayoutEffect, useRef } from "react";
+import { useLatest } from "@weasel-js/react";
+import { heldPointers } from "@weasel-js/gestures";
+
 //#region src/canvas/useSurfaceInput.ts
-function r(r, a) {
-	let o = n(a), s = t(null);
-	e(() => {
-		let e = r.current;
-		s.current?.element !== e && (s.current?.detach(), s.current = e ? {
-			element: e,
-			detach: i(e, o)
-		} : null);
-	}), e(() => () => {
-		s.current?.detach(), s.current = null;
+/**
+* Listen on whichever element `elementRef` holds, moving the listeners when
+* it holds another. Handlers are read at event time, so a new set never
+* re-attaches.
+*
+* Hover stands down while a pointer is held on the element, which
+* `heldPointers` answers for this and the gesture dispatcher alike. Everything
+* else about a press is the dispatcher's, which listens on this same element.
+*
+* Suppresses the browser's context menu: right-click is a gesture surface
+* tools may consume.
+*/
+function useSurfaceInput(elementRef, handlers) {
+	const live = useLatest(handlers);
+	const attached = useRef(null);
+	useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (attached.current?.element === element) return;
+		attached.current?.detach();
+		attached.current = element ? {
+			element,
+			detach: listen(element, live)
+		} : null;
+	});
+	useLayoutEffect(() => () => {
+		attached.current?.detach();
+		attached.current = null;
 	}, []);
 }
-function i(e, t) {
-	let n = !1, r = {
+function listen(element, live) {
+	const held = heldPointers(element);
+	const listeners = {
 		pointerdown: () => {
-			t.current.focusOnPress && e.focus(), n = !0;
-		},
-		pointermove: (r) => {
-			n || t.current.onHover(e, r);
-		},
-		pointerup: () => {
-			n = !1;
+			if (live.current.focusOnPress) element.focus();
 		},
-		pointerleave: () => {
-			n = !1, t.current.onLeave();
+		pointermove: (event) => {
+			if (held.count() === 0) live.current.onHover(element, event);
 		},
-		contextmenu: (e) => e.preventDefault(),
-		focus: (e) => t.current.onFocus?.(e),
-		blur: (e) => t.current.onBlur?.(e)
+		pointerleave: () => live.current.onLeave(),
+		contextmenu: (event) => event.preventDefault(),
+		focus: (event) => live.current.onFocus?.(event),
+		blur: (event) => live.current.onBlur?.(event)
 	};
-	for (let [t, n] of Object.entries(r)) e.addEventListener(t, n);
+	for (const [type, fn] of Object.entries(listeners)) element.addEventListener(type, fn);
 	return () => {
-		for (let [t, n] of Object.entries(r)) e.removeEventListener(t, n);
+		for (const [type, fn] of Object.entries(listeners)) element.removeEventListener(type, fn);
+		held.release();
 	};
 }
-//#endregion
-export { r as useSurfaceInput };
 
+//#endregion
+export { useSurfaceInput };
 //# sourceMappingURL=useSurfaceInput.js.map

package/dist/canvas/useSurfaceInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSurfaceInput.js","names":["useSurfaceInput","live","useLatest","handlers","attached","useRef","useLayoutEffect","element","elementRef","listen","pressed","listeners","event","type","fn"],"sources":["../../src/canvas/useSurfaceInput.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\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 * Tracks one fact about the pointer, whether a button is down, because hover\n * stands down for as long as one is. Everything else about a press is the\n * gesture 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  let pressed = false;\n  const listeners: Record<string, (event: Event) => void> = {\n    pointerdown: () => {\n      if (live.current.focusOnPress) element.focus();\n      pressed = true;\n    },\n    pointermove: (event) => {\n      if (!pressed) live.current.onHover(element, event as PointerEvent);\n    },\n    pointerup: () => { pressed = false; },\n    pointerleave: () => {\n      pressed = false;\n      live.current.onLeave();\n    },\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  };\n}\n"],"mappings":";;;AA2BA,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,IAAIC,IAAU,IACRC,IAAoD;EACxD,mBAAmB;GAEjB,AADIV,EAAK,QAAQ,gBAAcM,EAAQ,MAAM,GAC7C,IAAU;EACZ;EACA,cAAc,MAAU;GACtB,AAAKG,KAAST,EAAK,QAAQ,QAAQM,GAASK,CAAqB;EACnE;EACA,iBAAiB;GAAE,IAAU;EAAO;EACpC,oBAAoB;GAElB,AADA,IAAU,IACVX,EAAK,QAAQ,QAAQ;EACvB;EACA,cAAc,MAAUW,EAAM,eAAe;EAC7C,QAAQ,MAAUX,EAAK,QAAQ,UAAUW,CAAmB;EAC5D,OAAO,MAAUX,EAAK,QAAQ,SAASW,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;CAC1F;AACF"}
+{"version":3,"file":"useSurfaceInput.js","names":[],"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,SAAgB,gBACd,YACA,UACM;CACN,MAAM,OAAO,UAAU,QAAQ;CAC/B,MAAM,WAAW,OAA4D,IAAI;CAEjF,sBAAsB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,SAAS,SAAS,YAAY,SAAS;EAC3C,SAAS,SAAS,OAAO;EACzB,SAAS,UAAU,UAAU;GAAE;GAAS,QAAQ,OAAO,SAAS,IAAI;EAAE,IAAI;CAC5E,CAAC;CACD,4BAA4B;EAC1B,SAAS,SAAS,OAAO;EACzB,SAAS,UAAU;CACrB,GAAG,CAAC,CAAC;AACP;AAEA,SAAS,OAAO,SAAsB,MAA8D;CAClG,MAAM,OAAO,aAAa,OAAO;CACjC,MAAM,YAAoD;EACxD,mBAAmB;GACjB,IAAI,KAAK,QAAQ,cAAc,QAAQ,MAAM;EAC/C;EACA,cAAc,UAAU;GACtB,IAAI,KAAK,MAAM,MAAM,GAAG,KAAK,QAAQ,QAAQ,SAAS,KAAqB;EAC7E;EACA,oBAAoB,KAAK,QAAQ,QAAQ;EACzC,cAAc,UAAU,MAAM,eAAe;EAC7C,QAAQ,UAAU,KAAK,QAAQ,UAAU,KAAmB;EAC5D,OAAO,UAAU,KAAK,QAAQ,SAAS,KAAmB;CAC5D;CACA,KAAK,MAAM,CAAC,MAAM,OAAO,OAAO,QAAQ,SAAS,GAAG,QAAQ,iBAAiB,MAAM,EAAE;CACrF,aAAa;EACX,KAAK,MAAM,CAAC,MAAM,OAAO,OAAO,QAAQ,SAAS,GAAG,QAAQ,oBAAoB,MAAM,EAAE;EACxF,KAAK,QAAQ;CACf;AACF"}