@weasel-js/core 1.9.3 → 1.10.0

package/dist/canvas/Canvas.js

@@ -1,608 +1,329 @@
-import { getProgramSource as e, programSourceRegistry as t } from "../renderer/shaders/registerProgram.js";
-import { viewToMat3 as n } from "../renderer/math/viewToMat3.js";
-import { cullDrawCommands as r } from "../renderer/cullDrawCommands.js";
-import { drawLayers as i, isLayerPainted as a } from "../core/layers/render.js";
-import { normalizeView as o } from "../core/viewport/view.js";
-import { clientToWorld as s } from "../core/viewport/clientToWorld.js";
-import { clampView as c } from "../core/viewport/clampView.js";
-import { AUTO_POSE_DESCRIPTOR as l } from "../interactions/actions/resize/autoPoseDescriptor.js";
-import { dispatchApplyBatch as u } from "../core/applyOps.js";
-import { parseDebugFlags as d } from "../debug/parseDebugFlags.js";
-import { createDebugSink as f } from "../debug/createDebugSink.js";
-import { createDebugOverlayLayer as p } from "../debug/createDebugOverlayLayer.js";
-import { isCustomEntry as m } from "./layerSlots.js";
-import { composeOrderedLayers as h, placeToolOverlays as g } from "./layerOrder.js";
-import { sceneLayerKey as _ } from "./sceneLayerPaint.js";
-import { registerMountedCanvas as ee } from "./mountedCanvases.js";
-import { aggregatePreviewIds as te } from "./toolPreview.js";
-import { useViewHelpers as ne } from "./useViewHelpers.js";
-import { useOptionalViewRegistry as re } from "./viewRegistry.js";
-import { useFrameLoop as ie } from "./useFrameLoop.js";
-import { useRedrawOn as ae } from "./useRedrawOn.js";
-import { useCanvasRenderer as oe } from "./useCanvasRenderer.js";
-import { createSelectionOverlayLayer as se } from "../features/selection/overlay.js";
-import { frameStatsOf as ce } from "../debug/frameStats.js";
-import { buildSceneTree as v } from "./buildSceneTree.js";
-import { createPaintedCursorLayer as le } from "../features/cursor/paintedCursorLayer.js";
-import { wrapNodeOutput as y } from "./wrapNodeOutput.js";
-import { paintMissesView as ue } from "./paintCull.js";
-import { CursorCoordsHud as de } from "./CursorCoordsHud.js";
-import { PickHud as fe } from "./PickHud.js";
-import { ModalityHud as pe } from "./ModalityHud.js";
-import { forwardRef as me, useCallback as b, useEffect as x, useImperativeHandle as he, useInsertionEffect as ge, useLayoutEffect as _e, useMemo as S, useRef as C, useState as ve, useSyncExternalStore as ye } from "react";
-import { useLatest as w } from "@weasel-js/react";
-import { Fragment as be, jsx as xe, jsxs as Se } from "react/jsx-runtime";
-import { createPaintedCursorState as Ce, resolveCursorTier as T } from "@weasel-js/cursor";
+import { drawLayers as e, isLayerPainted as t } from "../core/layers/render.js";
+import { createBackgroundFillLayer as n } from "../core/layers/backgroundFill.js";
+import { clientToWorld as r } from "../core/viewport/clientToWorld.js";
+import { AUTO_POSE_DESCRIPTOR as i } from "../core/geometry/autoPoseDescriptor.js";
+import { useViewHelpers as a } from "./useViewHelpers.js";
+import { useOptionalViewRegistry as o } from "./viewRegistry.js";
+import { shaderKeyOf as s } from "./canvasRenderer.js";
+import { useCanvasSurface as c } from "./useCanvasSurface.js";
+import { surfaceBox as ee } from "./surfaceBox.js";
+import { isCustomEntry as l } from "./layerSlots.js";
+import { composeOrderedLayers as u, placeToolOverlays as d } from "./layerOrder.js";
+import { registerMountedCanvas as f } from "./mountedCanvases.js";
+import { useSurfaceInput as te } from "./useSurfaceInput.js";
+import { beginDebugFrame as ne, useDebugSink as re } from "../debug/useDebugSink.js";
+import { useToolCursor as ie } from "./useToolCursor.js";
+import { createPaintedCursorLayer as p } from "./paintedCursorLayer.js";
+import { viewToMat3 as ae } from "@weasel-js/renderer";
+import { forwardRef as m, useCallback as h, useEffect as g, useImperativeHandle as oe, useInsertionEffect as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as se, useSyncExternalStore as ce } from "react";
+import { useLatest as x } from "@weasel-js/react";
+import { jsx as le } from "react/jsx-runtime";
+import { createCursorSink as ue, createPaintedCursorState as de } from "@weasel-js/cursor";
 //#region src/canvas/Canvas.tsx
-var we = (e) => !0;
-function E(e, t, i, a, o, s) {
-	let c = e.toPose ?? ((e) => t ? t.getPose(e.id) : e), l = e.drawOne, u = e.postProcess, d = e.cull ? (e, t, i) => r(e, n(t), {
-		x: 0,
-		y: 0,
-		width: i.width,
-		height: i.height
-	}) : (e) => e, f = e.cull ? e.paintBounds : void 0, p = (e, t) => f ? ue(f, e, {
-		x: 0,
-		y: 0,
-		width: t.width,
-		height: t.height
-	}) : void 0;
-	return {
-		id: s?.id ?? "scene",
-		label: s ? `Scene: ${s.forLayer}` : "Scene",
-		draw: (n, r, f) => {
-			let m = o(), h = t;
-			if (h && e.objects === void 0 && typeof h.getLayers == "function" && typeof h.getNode == "function" && typeof h.getChildren == "function" && l) {
-				let t = (t, n, r) => {
-					if (m && m.has(t.id)) return [];
-					let o = l(t, n, r);
-					if (i) {
-						let e = a ? a(t.id) : null;
-						e && i.recordBounds(t.id, e);
-						let r = n.x ?? (e ? e.x : 0), o = n.y ?? (e ? e.y : 0);
-						i.recordOrigin(t.id, {
-							x: r,
-							y: o
-						});
-					}
-					return y(o, n, e.alphaFor ? e.alphaFor(t.id) : 1);
-				}, n = e.toPose ? {
-					...h,
-					getPose: (e) => {
-						let t = h.getNode(e);
-						return t ? c(t) : h.getPose(e);
-					}
-				} : h, o = v(n, t, r, s?.forLayer, e.derivedPathOf, p(r, f));
-				return d(u ? u(o, r, f) : o, r, f);
-			}
-			let g = e.objects ?? t?.getNodes() ?? [], _ = [], ee = p(r, f);
-			for (let t of g) {
-				if (m && m.has(t.id)) continue;
-				let n = c(t);
-				if (l && !ee?.(t, n)) {
-					let i = l(t, n, r), a = y(i, n, e.alphaFor ? e.alphaFor(t.id) : 1);
-					for (let e of a) _.push(e);
-				}
-				if (i) {
-					let e = a ? a(t.id) : null;
-					e && i.recordBounds(t.id, {
-						x: e.x,
-						y: e.y,
-						width: e.width,
-						height: e.height
-					});
-					let r = n.x ?? (e ? e.x : 0), o = n.y ?? (e ? e.y : 0);
-					i.recordOrigin(t.id, {
-						x: r,
-						y: o
-					});
-				}
-			}
-			return d(u ? u(_, r, f) : _, r, f);
-		}
-	};
-}
-function Te(e, t, n, r, i) {
-	let a = e.objects === void 0 && typeof t?.getLayers == "function" ? t.getLayers().map((e) => e.id) : null;
-	return !a || a.length === 0 ? [{
-		key: "scene",
-		layer: E(e, t, n, r, i)
-	}] : a.map((a) => ({
-		key: _(a),
-		layer: E(e, t, n, r, i, {
-			id: _(a),
-			forLayer: a
-		})
-	}));
-}
-function Ee(e, t) {
-	let n = e.hotkeyEngaged ?? e.active, r = n === null ? void 0 : e.registry[n];
-	if (r?.cursor) {
-		if (typeof r.cursor != "function") return T(r.cursor);
-		if (t) try {
-			let e = t();
-			return T(r.cursor({
-				...e,
-				scratch: null
-			}));
-		} catch {
-			return;
-		}
-	}
-}
-var De = {};
-function Oe(e, t, n, r, i) {
-	return i ? i(e, t, n) : s(t, n, e.getBoundingClientRect(), r);
-}
-function ke(r, s) {
-	let { width: _, height: v, dpr: y, flattenTolerance: ue, contentVersion: me, syncPaint: T = !1, redrawOn: E, adapter: ke, layers: D, selection: Ae, boundsOf: je, boundsOfPose: Me, pickEvery: Ne, clientToWorld: Pe, paintInto: O, inputElement: k, poseDescriptor: Fe = l, className: Ie, style: Le, tabIndex: Re = 0, onFocus: ze, onBlur: Be, autoFocusOnPointerDown: Ve = !0, helpersRef: He, tools: A, view: j, defaultView: Ue, onViewChange: We, viewBounds: Ge, debug: Ke, debugSinkRef: qe, shaders: Je, previewIdsExtra: Ye, previewPoseExtra: Xe, gestureSource: Ze, backgroundFill: Qe, cursorCoordsHud: $e, pickHud: et, modalityHud: tt, pickBest: nt, decorationLayer: rt, getIsVisible: it, layerVisibility: at, layerOrder: ot, layerGroups: st } = r, ct = Ke === void 0 ? void 0 : JSON.stringify(Ke), M = S(() => ct === void 0 ? typeof window > "u" ? null : d(window.location.search) : JSON.parse(ct) || null, [ct]), N = S(() => M === null ? null : f(M), [M]), lt = w(N), ut = b(() => lt.current, [lt]), P = ke, F = C(null), I = C(null), dt = b((e) => {
-		I.current = e, F.current = e;
-	}, []), L = !!O;
-	ge(() => {
-		L && (F.current = k ?? null);
+var fe = (e) => !0, pe = [], me = {};
+function he(m, he) {
+	let { width: S, height: C, dpr: w, flattenTolerance: ge, contentVersion: _e, syncPaint: ve = !1, redrawOn: ye, adapter: be, layers: T, selection: xe, boundsOf: Se, boundsOfPose: Ce, clientToWorld: we, paintInto: E, inputElement: D, poseDescriptor: Te = i, className: Ee, style: De, tabIndex: Oe = 0, onFocus: ke, onBlur: Ae, autoFocusOnPointerDown: je = !0, helpersRef: Me, tools: O, viewState: Ne, debug: Pe, debugSinkRef: Fe, shaders: k, previewPoseExtra: Ie, gestureSource: Le, backgroundFill: A, decorationLayer: j, getIsVisible: Re, layerVisibility: M, layerOrder: N, layerGroups: ze } = m, { sink: P, overlay: F, frameStats: Be, getDebug: Ve } = re(Pe), I = b(null), L = b(null), He = h((e) => {
+		L.current = e, I.current = e;
+	}, []), R = !!E;
+	_(() => {
+		R && (I.current = D ?? null);
 	});
-	let ft = L ? O.canvas ?? null : null, pt = w(ft), mt = L ? {
-		x: O.x,
-		y: O.y
-	} : null, R = w(mt), z = C(null), B = w({
-		width: _,
-		height: v
-	}), ht = w(it), gt = w(at), _t = w(ot), vt = C(() => !1), { requestRedraw: V, subscribeFrame: yt, subscribeBeforePaint: bt } = ie(b(() => vt.current(), []), {
-		syncPaint: T,
-		target: F
-	}), xt = w(me), St = C(0), Ct = b(() => St.current, []), [wt, Tt] = ve(0), H = C(/* @__PURE__ */ new Set()), Et = b((e) => (H.current.add(e), Tt((e) => e + 1), () => {
-		H.current.delete(e), Tt((e) => e + 1);
-	}), []), U = b((e, t, n, r, i, o) => {
-		let s = [...H.current].reverse(), c = ht.current?.() ?? we, l = gt.current ?? De, u = _t.current;
-		for (let d of s) {
-			if (!d.hitTest || o && !o.includes(d) || !a(d, l, u)) continue;
-			let s = d.hitTest(e, t, i, n, r, c);
+	let Ue = R ? E.canvas ?? null : null, We = x(Ue), Ge = R ? {
+		x: E.x,
+		y: E.y
+	} : null, z = x(Ge), B = b(null), V = x({
+		width: S,
+		height: C
+	}), H = x({
+		getIsVisible: Re,
+		layerVisibility: M,
+		layerOrder: N
+	}), Ke = b(() => !1), { lease: qe, requestRedraw: U, subscribeFrame: Je, subscribeBeforePaint: Ye, subscribeResume: Xe } = c(h(() => Ke.current(), []), {
+		syncPaint: ve,
+		target: I,
+		dpr: w,
+		redrawOn: ye,
+		shaders: k
+	}), Ze = x(_e), Qe = b(0), $e = h(() => Qe.current, []), [et, tt] = se(0), W = b(/* @__PURE__ */ new Set()), nt = h((e) => (W.current.add(e), tt((e) => e + 1), () => {
+		W.current.delete(e), tt((e) => e + 1);
+	}), []), G = h((e, n, r, i, a, o) => {
+		let s = [...W.current].reverse(), c = H.current, ee = c.getIsVisible?.() ?? fe, l = c.layerVisibility ?? me, u = c.layerOrder;
+		for (let c of s) {
+			if (!c.hitTest || o && !o.includes(c) || !t(c, l, u)) continue;
+			let s = c.hitTest(e, n, a, r, i, ee);
 			if (s) return {
-				layerId: d.id,
+				layerId: c.id,
 				hit: s
 			};
 		}
 		return null;
-	}, [
-		ht,
-		_t,
-		gt
-	]), Dt = b((e, t, n) => U(e, t, n?.view ?? W.current, n?.dims ?? B.current, z.current), [U, B]), W = C(o(j ?? Ue ?? {
-		x: 0,
-		y: 0,
-		scale: {
-			x: 1,
-			y: 1
-		}
-	})), Ot = j !== void 0, kt = Ot ? o(j) : void 0, G = C(/* @__PURE__ */ new Set()), At = w(We), jt = w(Ge), Mt = w(Ot), Nt = C(!1), Pt = b((e) => {
-		let t = o(typeof e == "function" ? e(W.current) : e), n = jt.current, r = n ? c(t, n, B.current) : t;
-		if (Mt.current) {
-			let e = At.current;
-			Nt.current || (Nt.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?.(r);
-			return;
-		}
-		W.current = r;
-		for (let e of G.current) e(r);
-		At.current?.(r), V();
-	}, [
+	}, [H]), { viewRef: K, controlled: q, setView: rt, getView: J, subscribeView: it, adoptControlled: at, announceControlled: ot, clearSubscribers: st } = Ne, ct = h((e, t, n) => G(e, t, n?.view ?? K.current, n?.dims ?? V.current, B.current), [
+		G,
 		V,
-		B,
-		Mt,
-		At,
-		jt
-	]), K = b(() => W.current, []), Ft = b((e) => (G.current.add(e), () => {
-		G.current.delete(e);
-	}), []);
-	_e(() => {
-		let e = F.current;
-		if (e) return ee({
+		K
+	]), lt = x(we), Y = h((e, t) => {
+		let n = I.current;
+		if (!n) return [e, t];
+		let i = lt.current;
+		return i ? i(n, e, t) : r(e, t, n.getBoundingClientRect(), K.current);
+	}, [lt, K]);
+	v(() => {
+		let e = I.current;
+		if (e) return f({
 			element: e,
-			getView: K
+			getView: J
 		});
 	}, [
-		L,
-		k,
-		K
+		R,
+		D,
+		J
 	]);
-	let q = S(() => Ce(), []), It = S(() => le(q), [q]);
-	x(() => q.subscribe(() => {
-		V();
-	}), [q, V]);
-	let Lt = b(() => {
-		let e = R.current, { width: t, height: n } = B.current;
+	let X = y(() => de(), []), ut = y(() => p(X), [X]);
+	g(() => X.subscribe(() => {
+		U();
+	}), [X, U]);
+	let dt = y(() => ue({
+		element: () => I.current,
+		painted: () => X
+	}), [X]), ft = h(() => {
+		let e = z.current, { width: t, height: n } = V.current;
 		return {
 			x: e?.x ?? 0,
 			y: e?.y ?? 0,
 			width: t,
 			height: n
 		};
-	}, [B, R]);
-	he(s, () => ({
-		element: L ? k ?? null : F.current,
-		surface: L ? O?.canvas ?? null : I.current,
-		getSurfaceRect: Lt,
-		requestRedraw: V,
-		subscribeFrame: yt,
-		subscribeBeforePaint: bt,
-		registerLayer: Et,
-		hitTestExtras: Dt,
-		getView: K,
-		setView: Pt,
-		subscribeView: Ft,
-		getPaintedVersion: Ct,
-		paintedCursor: q,
-		getDebug: ut
+	}, [V, z]);
+	oe(he, () => ({
+		element: R ? D ?? null : I.current,
+		surface: R ? E?.canvas ?? null : L.current,
+		getSurfaceRect: ft,
+		clientToWorld: Y,
+		requestRedraw: U,
+		subscribeFrame: Je,
+		subscribeBeforePaint: Ye,
+		subscribeResume: Xe,
+		registerLayer: nt,
+		hitTestExtras: ct,
+		getView: J,
+		setView: rt,
+		subscribeView: it,
+		getPaintedVersion: $e,
+		paintedCursor: X,
+		cursorSink: dt,
+		getDebug: Ve
 	}), [
-		F,
 		I,
 		L,
-		k,
-		O?.canvas,
-		Lt,
-		V,
-		yt,
-		bt,
-		Et,
-		Dt,
-		K,
-		Pt,
-		Ft,
-		Ct,
-		q,
-		ut
+		R,
+		D,
+		E?.canvas,
+		ft,
+		Y,
+		U,
+		Je,
+		Ye,
+		Xe,
+		nt,
+		ct,
+		J,
+		rt,
+		it,
+		$e,
+		X,
+		dt,
+		Ve
 	]);
-	let Rt = oe(), zt = C(/* @__PURE__ */ new Map()), J = re(), Bt = S(() => ({
-		getPose: () => ({}),
-		getNodes: () => []
-	}), []), Vt = P ?? Bt, Ht = S(() => ({
-		current: [],
-		get: () => [],
-		contains: () => !1,
-		set: () => {},
-		add: () => {},
-		remove: () => {},
-		toggle: () => {},
-		clear: () => {},
-		applyClick: () => {},
-		adapterMethods: {
-			getSelection: () => [],
-			setSelection: () => {}
-		}
-	}), []), Ut = Ae ?? Ht, Wt = w(Vt), Gt = w(Pe), Kt = () => {
-		let e = kt ?? W.current, t = L ? k ?? null : F.current, n = t ? t.getBoundingClientRect() : typeof DOMRect < "u" ? new DOMRect() : {
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0,
-			top: 0,
-			left: 0,
-			right: 0,
-			bottom: 0
-		};
-		return {
-			worldX: 0,
-			worldY: 0,
-			modifiers: {
-				alt: !1,
-				shift: !1,
-				meta: !1,
-				ctrl: !1
-			},
-			selection: Ut,
-			adapter: Vt,
-			applyOps: (e, t) => {
-				u(Wt.current, e, t);
-			},
-			view: e,
-			setView: Pt,
-			canvasRect: n,
-			debug: N ?? void 0
-		};
-	}, qt = w(Ne), Jt = w(nt), Yt = b((e, t) => {
-		let n = qt.current;
-		if (!n) return [];
-		let r = n(e, t);
-		return r ? Array.isArray(r) ? r : [r] : [];
-	}, [qt]), Xt = b((e, t) => Jt.current?.(e, t) ?? null, [Jt]), Zt = Ut.current, { helpers: Qt, chromeState: $t, effectiveBoundsOf: en, previewExtraRef: tn } = ne({
-		adapter: P,
-		geometry: Fe,
-		boundsOf: je,
-		boundsOfPose: Me,
-		selection: Zt,
-		tools: A,
-		gestureSource: Ze,
-		previewPoseExtra: Xe,
-		previewIdsExtra: Ye,
-		getIsVisible: () => ht.current?.() ?? we
-	}), nn = { getDebug: () => N }, rn = {
-		...Qt,
-		...nn,
+	let pt = b(/* @__PURE__ */ new Map()), Z = o(), mt = xe?.current ?? pe, { helpers: ht, chromeState: gt } = a({
+		adapter: be,
+		geometry: Te,
+		boundsOf: Se,
+		boundsOfPose: Ce,
+		selection: mt,
+		gestureSource: Le,
+		previewPoseExtra: Ie,
+		getIsVisible: () => H.current.getIsVisible?.() ?? fe
+	}), _t = { getDebug: () => P }, vt = {
+		...ht,
+		..._t,
 		viewId: null
-	}, Y = C(!1), an = (e) => {
-		Ve && e.currentTarget.focus(), Y.current = !0;
-	}, on = ((e) => {
-		if (Y.current) return;
-		let t = e.currentTarget, n = W.current, [r, i] = Oe(t, e.clientX, e.clientY, n, Gt.current);
-		for (let t of X) t.onUncapturedMove?.(r, i, e.nativeEvent, n, {
-			width: _,
-			height: v
-		});
-	}), sn = (e) => {
-		Y.current = !1;
-		for (let e of X) e.onUncapturedLeave?.();
-	}, cn = (e) => {
-		Y.current = !1;
-	}, ln = S(() => Qe ? {
-		id: "scene-background-fill",
-		label: "Background fill",
-		space: "screen",
-		draw: (e, t, n) => [{
-			kind: "path",
-			path: {
-				kind: "rect",
-				x: 0,
-				y: 0,
-				width: n.width,
-				height: n.height
-			},
-			fill: Qe
-		}]
-	} : null, [Qe]), un = S(() => {
-		let e = {}, t = D.grid;
-		m(t) && (e.grid = t.layer);
-		let n = D.cellHighlight;
-		m(n) && (e.cellHighlight = n.layer);
-		let r = D.scene, i;
-		r && !m(r) && r.drawOne && (i = Te(r, P, N, en, () => {
-			let e = te(A), t = tn.current.previewIdsExtra?.();
-			if (t) for (let n of t) e.add(n);
-			return e.size > 0 ? e : null;
-		}));
-		let a = D.selectionOverlay;
-		if (m(a)) e.selectionOverlay = a.layer;
-		else if (a !== null) {
-			let t = a ?? {};
-			e.selectionOverlay = se({
-				...t,
-				...t.poseById ? {
-					getPose: t.poseById,
-					poseDescriptor: t.poseDescriptor ?? Fe
-				} : {}
-			});
+	}, yt = y(() => A ? n(A) : void 0, [A]), Q = y(() => {
+		let e = {};
+		for (let t of [
+			"grid",
+			"cellHighlight",
+			"selectionOverlay"
+		]) {
+			let n = T[t];
+			l(n) && (e[t] = n.layer);
 		}
-		let o = h(D, e, i, ln ?? void 0);
-		return rt && o.push(rt), A && g(o, e.selectionOverlay, A.getActiveOverlays), o;
-	}, [
-		D,
-		P,
-		en,
-		N,
-		A,
-		ln,
-		rt,
-		Fe,
-		tn
-	]), dn = ye(b((e) => J?.subscribe(e) ?? (() => {}), [J]), () => J?.getVersion() ?? 0, () => 0), fn = w(un);
-	x(() => {
-		J?.attachSurface({
-			origin: () => {
-				let e = F.current;
-				if (!e) return {
-					left: 0,
-					top: 0
-				};
-				let t = e.getBoundingClientRect();
-				return {
-					left: t.left,
-					top: t.top
-				};
-			},
-			view: () => W.current,
-			dims: () => B.current,
-			layers: () => fn.current,
-			requestRedraw: V,
-			chromeState: () => z.current.getChromeState(),
-			hitTestExtras: U,
-			claimsAbove: (e, t) => {
-				let n = W.current;
-				return U(n.x + e / n.scale.x, n.y + t / n.scale.y, n, B.current, z.current) !== null;
-			}
-		});
+		let t = u(j ? {
+			...T,
+			decorationLayer: { layer: j }
+		} : T, e, T.scene?.layers, yt);
+		return O && d(t, e.selectionOverlay, O.getActiveOverlays), t;
 	}, [
-		J,
-		F,
-		V,
+		T,
+		O,
+		yt,
+		j
+	]), bt = ce(h((e) => Z?.subscribe(e) ?? (() => {}), [Z]), () => Z?.getVersion() ?? 0, () => 0), xt = x(Q);
+	g(() => Z?.attachSurface({
+		origin: () => {
+			let e = I.current;
+			if (!e) return {
+				left: 0,
+				top: 0
+			};
+			let t = e.getBoundingClientRect();
+			return {
+				left: t.left,
+				top: t.top
+			};
+		},
+		view: () => K.current,
+		dims: () => V.current,
+		layers: () => xt.current,
+		requestRedraw: U,
+		chromeState: () => B.current.getChromeState(),
+		hitTestExtras: G,
+		clientToWorld: Y,
+		claimsAbove: (e, t) => {
+			let n = I.current?.getBoundingClientRect(), [r, i] = Y(e + (n?.left ?? 0), t + (n?.top ?? 0));
+			return G(r, i, K.current, V.current, B.current) !== null;
+		}
+	}), [
+		Z,
+		I,
 		U,
-		B,
-		fn
+		G,
+		V,
+		xt,
+		K,
+		Y
 	]);
-	let X = S(() => {
-		let e = J ? [...un, ...J.list().filter((e) => e.paint).map((e) => e.layer)] : un;
+	let $ = y(() => {
+		let e = Z ? [...Q, ...Z.list().filter((e) => e.paint).map((e) => e.layer)] : Q;
 		return [
-			...N && M ? [...e, p({
-				sink: N,
-				config: M
-			})] : e,
-			...H.current,
-			It
+			...F ? [...e, F] : e,
+			...W.current,
+			ut
 		];
 	}, [
-		un,
-		N,
-		M,
-		wt,
-		J,
-		dn,
-		It
+		Q,
+		F,
+		et,
+		Z,
+		bt,
+		ut
 	]);
-	x(() => {
+	g(() => {
 		let e = () => {
-			V();
+			U();
 		}, t = [];
-		for (let n of X) n.subscribe && t.push(n.subscribe(e));
+		for (let n of $) n.subscribe && t.push(n.subscribe(e));
 		return () => {
 			for (let e of t) e();
 		};
-	}, [X, V]), ae(E, V);
-	let pn = Je?.map((e) => e.id).join("|") ?? "", mn = {
-		layers: X,
-		width: _,
-		height: v,
-		debugSink: N,
-		frameStats: M?.fps === !0,
-		dpr: y,
-		layerVisibility: at,
-		layerOrder: ot,
-		layerGroups: st,
-		shaders: Je,
-		flattenTolerance: ue
-	}, hn = w(mn);
-	ge(() => {
-		kt && (W.current = kt), z.current = rn, He && (He.current = rn), qe && (qe.current = N);
+	}, [$, U]);
+	let St = s(k), Ct = x({
+		layers: $,
+		width: S,
+		height: C,
+		debugSink: P,
+		frameStats: Be,
+		dpr: w,
+		layerGroups: ze,
+		shaders: k,
+		flattenTolerance: ge
 	});
-	let gn = b(() => {
-		let e = pt.current ?? I.current;
-		if (!e) return !1;
-		let t = R.current, { layers: r, width: a, height: o, debugSink: s, frameStats: c, dpr: l, layerVisibility: u, layerOrder: d, flattenTolerance: f, layerGroups: p, shaders: m } = hn.current;
-		if (s?.beginFrame(), s) for (let e = 0; e < r.length; e++) {
-			let t = r[e];
-			t.id !== "debug-overlay" && s.recordLayer(t.id, t.label, t.space ?? "world", e);
-		}
-		let h = Rt.bind(e, {
-			width: a,
-			height: o,
-			dpr: l
+	_(() => {
+		at(), B.current = vt, Me && (Me.current = vt), Fe && (Fe.current = P);
+	}), v(() => {
+		ot();
+	});
+	let wt = h(() => {
+		let t = We.current ?? L.current;
+		if (!t) return !1;
+		let n = z.current, { layers: r, width: i, height: a, debugSink: o, frameStats: s, dpr: c, flattenTolerance: ee, layerGroups: l, shaders: u } = Ct.current, d = ne(o, s, r), f = qe.bind(t, {
+			width: i,
+			height: a,
+			dpr: c
 		}, {
-			tile: t,
-			flattenTolerance: f,
-			shaders: m
+			tile: n,
+			flattenTolerance: ee,
+			shaders: u
 		});
-		if (!h) return !1;
-		let g = W.current, _ = s && c ? [] : void 0, ee = _ ? performance.now() : 0, te = i(r, z.current, u ?? De, d, g, {
-			width: a,
-			height: o
-		}, zt.current, void 0, p, _);
-		return h.render(te, n(g), _ ? { spans: _ } : void 0), s && _ && s.recordFrame(ce(_, h.lastFrameStats(), performance.now() - ee)), St.current = xt.current?.() ?? 0, !0;
+		if (!f) return !1;
+		let te = K.current, { layerVisibility: re, layerOrder: ie } = H.current, p = d?.time(), m = e(r, B.current, re ?? me, ie, te, {
+			width: i,
+			height: a
+		}, pt.current, void 0, l, p);
+		return f.render(m, ae(te), p ? { spans: p } : void 0), d?.end(f.lastFrameStats()), Qe.current = Ze.current?.() ?? 0, !0;
 	}, [
-		xt,
-		Rt,
-		hn,
-		R,
-		pt
+		Ze,
+		H,
+		qe,
+		Ct,
+		z,
+		We,
+		K
 	]);
-	ge(() => {
-		vt.current = gn;
-	}), _e(() => {
-		V();
+	return _(() => {
+		Ke.current = wt;
+	}), v(() => {
+		U();
 	}, [
-		X,
-		_,
-		v,
-		j,
+		$,
+		S,
+		C,
+		P,
+		w,
+		ge,
+		q?.x,
+		q?.y,
+		q?.scale.x,
+		q?.scale.y,
+		M,
 		N,
-		y,
-		ue,
-		at,
-		ot,
-		st,
-		pn,
-		T,
-		$t,
-		it,
-		ft,
-		mt?.x,
-		mt?.y,
-		V
-	]), x(() => {
-		let e = zt.current, t = G.current;
+		ze,
+		St,
+		ve,
+		gt,
+		Re,
+		Ue,
+		Ge?.x,
+		Ge?.y,
+		U
+	]), g(() => {
+		let e = pt.current;
 		return () => {
-			e.clear(), t.clear();
+			e.clear(), st();
 		};
-	}, []), x(() => {
-		if (!pn) return;
-		let n = pn.split("|"), r = n.map(e);
-		return t.subscribe(() => {
-			let t = n.map(e), i = t.some((e, t) => e !== r[t]);
-			r = t, i && V();
-		});
-	}, [pn, V]);
-	let Z = A ? Ee(A, Kt) : void 0, Q = Z === void 0 ? void 0 : Z.kind === "css" ? Z.css : "none", _n = Q ? {
-		...Le,
-		cursor: Q
-	} : Le, $ = Z?.kind === "painted" ? Z : null, vn = $ ? `${$.glyph}|${$.angle}|${$.size}|${$.worldRadius}` : "";
-	x(() => {
-		q.setBase($);
-	}, [q, vn]);
-	let yn = w(X);
-	x(() => {
-		if (!L || !k) return;
-		let e = k, t = () => {
-			Ve && e.focus(), Y.current = !0;
-		}, n = (t) => {
-			if (Y.current) return;
-			let n = W.current, [r, i] = Oe(e, t.clientX, t.clientY, n, Gt.current), a = B.current;
-			for (let e of yn.current) e.onUncapturedMove?.(r, i, t, n, a);
-		}, r = () => {
-			Y.current = !1;
-		}, i = () => {
-			Y.current = !1;
-			for (let e of yn.current) e.onUncapturedLeave?.();
-		}, a = (e) => e.preventDefault();
-		return e.addEventListener("pointerdown", t), e.addEventListener("pointermove", n), e.addEventListener("pointerup", r), e.addEventListener("pointerleave", i), e.addEventListener("contextmenu", a), () => {
-			e.removeEventListener("pointerdown", t), e.removeEventListener("pointermove", n), e.removeEventListener("pointerup", r), e.removeEventListener("pointerleave", i), e.removeEventListener("contextmenu", a);
-		};
-	}, [
-		L,
-		k,
-		Ve,
-		Gt,
-		B,
-		yn
-	]), x(() => {
-		L && k && (k.style.cursor = Q ?? "");
-	}, [
-		L,
-		k,
-		Q
-	]);
-	let bn = /* @__PURE__ */ Se(be, { children: [
-		$e && /* @__PURE__ */ xe(de, {
-			canvasRef: F,
-			...L ? { anchorRef: F } : {},
-			viewRef: W
-		}),
-		et && /* @__PURE__ */ xe(fe, {
-			canvasRef: F,
-			...L ? { anchorRef: F } : {},
-			viewRef: W,
-			pickEvery: Yt,
-			pickBest: Xt
-		}),
-		tt && /* @__PURE__ */ xe(pe, {
-			canvasRef: F,
-			...L ? { anchorRef: F } : {},
-			modeId: typeof tt == "object" ? tt.modeId : void 0
-		})
-	] });
-	return L ? k ? bn : null : /* @__PURE__ */ Se(be, { children: [/* @__PURE__ */ xe("canvas", {
-		ref: dt,
-		width: _,
-		height: v,
-		tabIndex: Re,
-		className: Ie,
-		style: _n,
-		onFocus: ze,
-		onBlur: Be,
-		onPointerDown: an,
-		onPointerMove: on,
-		onPointerUp: cn,
-		onPointerCancel: void 0,
-		onPointerLeave: sn,
-		onContextMenu: (e) => e.preventDefault()
-	}), bn] });
+	}, [st]), ie(dt, O, R ? D : null, De?.cursor), te(I, {
+		focusOnPress: je,
+		onFocus: ke,
+		onBlur: Ae,
+		onHover: (e, n) => {
+			let r = K.current, [i, a] = Y(n.clientX, n.clientY), o = M ?? me;
+			for (let e of $) e.onUncapturedMove && t(e, o, N) && e.onUncapturedMove(i, a, n, r, {
+				width: S,
+				height: C
+			});
+		},
+		onLeave: () => {
+			for (let e of $) e.onUncapturedLeave?.();
+		}
+	}), R ? null : /* @__PURE__ */ le("canvas", {
+		ref: He,
+		width: S,
+		height: C,
+		tabIndex: Oe,
+		...ee(S, C, Ee, De)
+	});
 }
-var D = me(ke);
+var S = m(he);
 //#endregion
-export { D as Canvas, E as buildSceneLayer, Te as buildSceneLayers };
+export { S as Canvas };
 
 //# sourceMappingURL=Canvas.js.map