@weasel-js/core 1.9.3 → 1.10.0

package/dist/canvas/CursorCoordsHud.js

@@ -1,51 +1,51 @@
-import { useVisibleRaf as e } from "../scheduling/useVisibleRaf.js";
-import { clientToWorld as t } from "../core/viewport/clientToWorld.js";
-import n from "./hud.module.js";
-import { useHostAnchor as r } from "./useHostAnchor.js";
-import { useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { decimal as l, qty as u } from "@weasel-js/quantity";
+import { clientToWorld as e } from "../core/viewport/clientToWorld.js";
+import t from "./hud.module.js";
+import { useHostAnchor as n } from "./useHostAnchor.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { useLatest as o, useVisibleRaf as s } from "@weasel-js/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { decimal as u, qty as d } from "@weasel-js/quantity";
 //#region src/canvas/CursorCoordsHud.tsx
-function d({ canvasRef: l, anchorRef: u, viewRef: d, offset: p }) {
-	let [m, h] = o({
+function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
+	let g = o(m), [_, v] = a({
 		client: {
 			x: 0,
 			y: 0
 		},
 		world: null,
 		inCanvas: !1
-	}), [g, _] = o(0), { ref: v, style: y } = r(() => u?.current ?? l.current?.parentElement ?? l.current, {
+	}), [y, b] = a(0), { ref: x, style: S } = n(() => d?.current ?? u.current?.parentElement ?? u.current, {
 		align: {
 			x: "end",
 			y: "start"
 		},
 		offset: {
-			x: p?.right ?? 8,
-			y: p?.top ?? 8
+			x: h?.right ?? 8,
+			y: h?.top ?? 8
 		}
-	}), b = a(0), x = a(0), S = e(() => {
-		b.current++;
-		let e = performance.now(), t = e - x.current;
-		t >= 1e3 && (_(Math.round(b.current * 1e3 / t)), b.current = 0, x.current = e), S.request();
+	}), C = i(0), w = i(0), T = s(() => {
+		C.current++;
+		let e = performance.now(), t = e - w.current;
+		t >= 1e3 && (b(Math.round(C.current * 1e3 / t)), C.current = 0, w.current = e), T.request();
 	}, { onResume: () => {
-		b.current = 0, x.current = performance.now();
+		C.current = 0, w.current = performance.now();
 	} });
-	return i(() => (x.current = performance.now(), S.request(), () => S.cancel()), [S]), i(() => {
-		let e = (e) => {
-			let n = l.current, r = d.current, i = {
-				x: e.clientX,
-				y: e.clientY
+	return r(() => (w.current = performance.now(), T.request(), () => T.cancel()), [T]), r(() => {
+		let t = (t) => {
+			let n = u.current, r = f.current, i = {
+				x: t.clientX,
+				y: t.clientY
 			};
 			if (!n || !r) {
-				h({
+				v({
 					client: i,
 					world: null,
 					inCanvas: !1
 				});
 				return;
 			}
-			let a = n.getBoundingClientRect(), o = e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom, [s, c] = t(e.clientX, e.clientY, a, r);
-			h({
+			let a = n.getBoundingClientRect(), o = t.clientX >= a.left && t.clientX <= a.right && t.clientY >= a.top && t.clientY <= a.bottom, [s, c] = g.current?.(t.clientX, t.clientY) ?? e(t.clientX, t.clientY, a, r);
+			v({
 				client: i,
 				world: {
 					x: s,
@@ -54,49 +54,53 @@ function d({ canvasRef: l, anchorRef: u, viewRef: d, offset: p }) {
 				inCanvas: o
 			});
 		};
-		return document.addEventListener("pointermove", e), () => {
-			document.removeEventListener("pointermove", e);
+		return document.addEventListener("pointermove", t), () => {
+			document.removeEventListener("pointermove", t);
 		};
-	}, [l, d]), y ? /* @__PURE__ */ s("div", {
-		ref: v,
-		className: n.hud,
-		style: y,
-		children: /* @__PURE__ */ c("dl", {
-			className: n.readings,
+	}, [
+		u,
+		f,
+		g
+	]), S ? /* @__PURE__ */ c("div", {
+		ref: x,
+		className: t.hud,
+		style: S,
+		children: /* @__PURE__ */ l("dl", {
+			className: t.readings,
 			children: [
-				/* @__PURE__ */ s("dt", {
-					className: n.muted,
+				/* @__PURE__ */ c("dt", {
+					className: t.muted,
 					children: "fps"
 				}),
-				/* @__PURE__ */ s("dd", { children: g }),
-				/* @__PURE__ */ s("dt", {
-					className: n.muted,
+				/* @__PURE__ */ c("dd", { children: y }),
+				/* @__PURE__ */ c("dt", {
+					className: t.muted,
 					children: "client"
 				}),
-				/* @__PURE__ */ s("dd", { children: f(m.client, 0) }),
-				/* @__PURE__ */ s("dt", {
-					className: n.muted,
+				/* @__PURE__ */ c("dd", { children: p(_.client, 0) }),
+				/* @__PURE__ */ c("dt", {
+					className: t.muted,
 					children: "world"
 				}),
-				m.world ? /* @__PURE__ */ c("dd", { children: [f(m.world, 1), m.inCanvas ? null : /* @__PURE__ */ s("span", {
-					className: n.absent,
+				_.world ? /* @__PURE__ */ l("dd", { children: [p(_.world, 1), _.inCanvas ? null : /* @__PURE__ */ c("span", {
+					className: t.absent,
 					children: " off-canvas"
-				})] }) : /* @__PURE__ */ s("dd", {
-					className: n.absent,
+				})] }) : /* @__PURE__ */ c("dd", {
+					className: t.absent,
 					children: "— no canvas or view yet"
 				})
 			]
 		})
 	}) : null;
 }
-function f({ x: e, y: t }, n) {
-	let r = l({
+function p({ x: e, y: t }, n) {
+	let r = u({
 		places: n,
 		grouping: !1
 	});
-	return `(${u(e, r).text}, ${u(t, r).text})`;
+	return `(${d(e, r).text}, ${d(t, r).text})`;
 }
 //#endregion
-export { d as CursorCoordsHud };
+export { f as CursorCoordsHud };
 
 //# sourceMappingURL=CursorCoordsHud.js.map

package/dist/canvas/CursorCoordsHud.js.map

@@ -1 +1 @@
-{"version":3,"file":"CursorCoordsHud.js","names":["s","hud_module_default","CursorCoordsHud","state","setState","useState","fps","setFps","anchorStyle","useHostAnchor","anchorRef","canvasRef","offset","framesRef","useRef","lastFlushRef","fpsLoop","useVisibleRaf","now","dt","useEffect","onMove","canvas","view","viewRef","client","rect","inCanvas","wx","wy","clientToWorld","point","at","decimal","qty","x","y"],"sources":["../../src/canvas/CursorCoordsHud.tsx"],"sourcesContent":["/**\n * Fixed-position dev HUD that shows the cursor's current viewport\n * (client) coords next to the equivalent canvas (world) coords. Mounts\n * top-left of the viewport; listens to `document` pointermove so it\n * reads the cursor even when it leaves the canvas.\n *\n * Mount inside a `<SceneCanvas>` subtree (or anywhere with access to a\n * canvas + view ref) for quick coord-reconciliation during gesture\n * debugging.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { decimal, qty } from '@weasel-js/quantity';\nimport { useVisibleRaf } from '../scheduling/useVisibleRaf';\nimport s from './hud.module.css';\nimport { useHostAnchor } from './useHostAnchor';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld } from 'core/viewport/clientToWorld';\n\n/** Props for `<CursorCoordsHud>`. */\nexport interface CursorCoordsHudProps {\n  canvasRef: React.RefObject<HTMLElement | null>;\n  /** Element the HUD pins its corner to. Defaults to the canvas's parent — the\n   *  wrapper a bare `<canvas>` sits in. A detached canvas passes its own input\n   *  box, whose parent is the shared surface every pane sits in. */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  viewRef: React.RefObject<View>;\n  /** Inset from the canvas's top-right corner, in px. Default 8 on both axes. */\n  offset?: { top?: number; right?: number };\n}\n\ninterface HudState {\n  client: { x: number; y: number };\n  world: { x: number; y: number } | null;\n  inCanvas: boolean;\n}\n\n/** Debug overlay showing the pointer's client and world coordinates and the\n *  current frame rate, pinned to the canvas's top-right corner. */\nexport function CursorCoordsHud({ canvasRef, anchorRef, viewRef, offset }: CursorCoordsHudProps) {\n  const [state, setState] = useState<HudState>({\n    client: { x: 0, y: 0 }, world: null, inCanvas: false,\n  });\n  const [fps, setFps] = useState<number>(0);\n  const { ref, style: anchorStyle } = useHostAnchor(\n    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,\n    {\n      align: { x: 'end', y: 'start' },\n      offset: { x: offset?.right ?? 8, y: offset?.top ?? 8 },\n    },\n  );\n\n  // FPS counter: tally frames per rAF tick; flush once a second.\n  const framesRef = useRef(0);\n  const lastFlushRef = useRef(0);\n  const fpsLoop = useVisibleRaf(\n    () => {\n      framesRef.current++;\n      const now = performance.now();\n      const dt = now - lastFlushRef.current;\n      if (dt >= 1000) {\n        setFps(Math.round((framesRef.current * 1000) / dt));\n        framesRef.current = 0;\n        lastFlushRef.current = now;\n      }\n      fpsLoop.request();\n    },\n    // Frames not drawn while hidden are not frames that were slow to draw:\n    // without this the readout would flush a near-zero rate on resume.\n    {\n      onResume: () => {\n        framesRef.current = 0;\n        lastFlushRef.current = performance.now();\n      },\n    },\n  );\n\n  useEffect(() => {\n    lastFlushRef.current = performance.now();\n    fpsLoop.request();\n    return () => fpsLoop.cancel();\n  }, [fpsLoop]);\n\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      const canvas = canvasRef.current;\n      const view = viewRef.current;\n      const client = { x: e.clientX, y: e.clientY };\n      if (!canvas || !view) {\n        setState({ client, world: null, inCanvas: false });\n        return;\n      }\n      const rect = canvas.getBoundingClientRect();\n      const inCanvas =\n        e.clientX >= rect.left && e.clientX <= rect.right &&\n        e.clientY >= rect.top  && e.clientY <= rect.bottom;\n      const [wx, wy] = clientToWorld(e.clientX, e.clientY, rect, view);\n      const world = { x: wx, y: wy };\n      setState({ client, world, inCanvas });\n    };\n\n    document.addEventListener('pointermove', onMove);\n\n    return () => {\n      document.removeEventListener('pointermove', onMove);\n    };\n  }, [canvasRef, viewRef]);\n\n  if (!anchorStyle) return null;\n\n  return (\n    <div ref={ref} className={s.hud} style={anchorStyle}>\n      <dl className={s.readings}>\n        <dt className={s.muted}>fps</dt>\n        <dd>{fps}</dd>\n        <dt className={s.muted}>client</dt>\n        <dd>{point(state.client, 0)}</dd>\n        <dt className={s.muted}>world</dt>\n        {state.world ? (\n          <dd>\n            {point(state.world, 1)}\n            {state.inCanvas ? null : <span className={s.absent}> off-canvas</span>}\n          </dd>\n        ) : (\n          <dd className={s.absent}>— no canvas or view yet</dd>\n        )}\n      </dl>\n    </div>\n  );\n}\n\n/** `(x, y)` at `places` decimals, its negatives written with U+2212. */\nfunction point({ x, y }: { x: number; y: number }, places: number): string {\n  const at = decimal({ places, grouping: false });\n  return `(${qty(x, at).text}, ${qty(y, at).text})`;\n}\n"],"mappings":"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"}
+{"version":3,"file":"CursorCoordsHud.js","names":["s","hud_module_default","CursorCoordsHud","toWorldRef","useLatest","toWorld","state","setState","useState","fps","setFps","anchorStyle","useHostAnchor","anchorRef","canvasRef","offset","framesRef","useRef","lastFlushRef","fpsLoop","useVisibleRaf","now","dt","useEffect","onMove","canvas","view","viewRef","client","e","rect","inCanvas","wx","wy","clientToWorld","point","at","decimal","qty","x","y"],"sources":["../../src/canvas/CursorCoordsHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\n * Fixed-position dev HUD that shows the cursor's current viewport\n * (client) coords next to the equivalent canvas (world) coords. Pins to the\n * top-right corner of the canvas's host; listens to `document` pointermove so it\n * reads the cursor even when it leaves the canvas.\n *\n * Mount inside a `<SceneCanvas>` subtree (or anywhere with access to a\n * canvas + view ref) for quick coord-reconciliation during gesture\n * debugging.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { decimal, qty } from '@weasel-js/quantity';\nimport { useLatest, useVisibleRaf } from '@weasel-js/react';\nimport s from './hud.module.css';\nimport { useHostAnchor } from './useHostAnchor';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld } from 'core/viewport/clientToWorld';\n\n/** Props for `<CursorCoordsHud>`. */\nexport interface CursorCoordsHudProps {\n  canvasRef: React.RefObject<HTMLElement | null>;\n  /** Element the HUD pins its corner to. Defaults to the canvas's parent — the\n   *  wrapper a bare `<canvas>` sits in. A detached canvas passes its own input\n   *  box, whose parent is the shared surface every pane sits in. */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  viewRef: React.RefObject<View>;\n  /** Client coords to world. Defaults to the canvas's rect and `viewRef`. A\n   *  canvas whose routing converts some other way (a CSS transform, a 3D host)\n   *  passes that conversion, so the readout agrees with the picks. */\n  toWorld?: (clientX: number, clientY: number) => [number, number];\n  /** Inset from the canvas's top-right corner, in px. Default 8 on both axes. */\n  offset?: { top?: number; right?: number };\n}\n\ninterface HudState {\n  client: { x: number; y: number };\n  world: { x: number; y: number } | null;\n  inCanvas: boolean;\n}\n\n/** Debug overlay showing the pointer's client and world coordinates and the\n *  current frame rate, pinned to the canvas's top-right corner. */\nexport function CursorCoordsHud({ canvasRef, anchorRef, viewRef, toWorld, offset }: CursorCoordsHudProps) {\n  const toWorldRef = useLatest(toWorld);\n  const [state, setState] = useState<HudState>({\n    client: { x: 0, y: 0 }, world: null, inCanvas: false,\n  });\n  const [fps, setFps] = useState<number>(0);\n  const { ref, style: anchorStyle } = useHostAnchor(\n    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,\n    {\n      align: { x: 'end', y: 'start' },\n      offset: { x: offset?.right ?? 8, y: offset?.top ?? 8 },\n    },\n  );\n\n  // FPS counter: tally frames per rAF tick; flush once a second.\n  const framesRef = useRef(0);\n  const lastFlushRef = useRef(0);\n  const fpsLoop = useVisibleRaf(\n    () => {\n      framesRef.current++;\n      const now = performance.now();\n      const dt = now - lastFlushRef.current;\n      if (dt >= 1000) {\n        setFps(Math.round((framesRef.current * 1000) / dt));\n        framesRef.current = 0;\n        lastFlushRef.current = now;\n      }\n      fpsLoop.request();\n    },\n    // Frames not drawn while hidden are not frames that were slow to draw:\n    // without this the readout would flush a near-zero rate on resume.\n    {\n      onResume: () => {\n        framesRef.current = 0;\n        lastFlushRef.current = performance.now();\n      },\n    },\n  );\n\n  useEffect(() => {\n    lastFlushRef.current = performance.now();\n    fpsLoop.request();\n    return () => fpsLoop.cancel();\n  }, [fpsLoop]);\n\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      const canvas = canvasRef.current;\n      const view = viewRef.current;\n      const client = { x: e.clientX, y: e.clientY };\n      if (!canvas || !view) {\n        setState({ client, world: null, inCanvas: false });\n        return;\n      }\n      const rect = canvas.getBoundingClientRect();\n      const inCanvas =\n        e.clientX >= rect.left && e.clientX <= rect.right &&\n        e.clientY >= rect.top  && e.clientY <= rect.bottom;\n      const [wx, wy] = toWorldRef.current?.(e.clientX, e.clientY)\n        ?? clientToWorld(e.clientX, e.clientY, rect, view);\n      const world = { x: wx, y: wy };\n      setState({ client, world, inCanvas });\n    };\n\n    document.addEventListener('pointermove', onMove);\n\n    return () => {\n      document.removeEventListener('pointermove', onMove);\n    };\n  }, [canvasRef, viewRef, toWorldRef]);\n\n  if (!anchorStyle) return null;\n\n  return (\n    <div ref={ref} className={s.hud} style={anchorStyle}>\n      <dl className={s.readings}>\n        <dt className={s.muted}>fps</dt>\n        <dd>{fps}</dd>\n        <dt className={s.muted}>client</dt>\n        <dd>{point(state.client, 0)}</dd>\n        <dt className={s.muted}>world</dt>\n        {state.world ? (\n          <dd>\n            {point(state.world, 1)}\n            {state.inCanvas ? null : <span className={s.absent}> off-canvas</span>}\n          </dd>\n        ) : (\n          <dd className={s.absent}>— no canvas or view yet</dd>\n        )}\n      </dl>\n    </div>\n  );\n}\n\n/** `(x, y)` at `places` decimals, its negatives written with U+2212. */\nfunction point({ x, y }: { x: number; y: number }, places: number): string {\n  const at = decimal({ places, grouping: false });\n  return `(${qty(x, at).text}, ${qty(y, at).text})`;\n}\n"],"mappings":"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"}

package/dist/canvas/DrawCanvas.js

@@ -1,14 +1,13 @@
-import { viewToMat3 as e } from "../renderer/math/viewToMat3.js";
+import { backgroundFillCommands as e } from "../core/layers/backgroundFill.js";
 import { normalizeView as t } from "../core/viewport/view.js";
-import { useLateContentRedraw as n } from "./useLateContentRedraw.js";
-import { useFrameLoop as r } from "./useFrameLoop.js";
-import { useRedrawOn as i } from "./useRedrawOn.js";
-import { useCanvasRenderer as a } from "./useCanvasRenderer.js";
-import { useCallback as o, useEffect as s, useLayoutEffect as c, useRef as l } from "react";
-import { assignRef as u, useLatest as d } from "@weasel-js/react";
-import { jsx as f } from "react/jsx-runtime";
+import { useCanvasSurface as n } from "./useCanvasSurface.js";
+import { surfaceBox as r } from "./surfaceBox.js";
+import { viewToMat3 as i } from "@weasel-js/geom";
+import { useCallback as a, useRef as o } from "react";
+import { assignRef as s } from "@weasel-js/react";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/canvas/DrawCanvas.tsx
-var p = {
+var l = {
 	x: 0,
 	y: 0,
 	scale: {
@@ -16,52 +15,42 @@ var p = {
 		y: 1
 	}
 };
-function m(m) {
-	let { width: h, height: g, draw: _, background: v, redrawOn: y, dpr: b, className: x, canvasRef: S } = m, C = m.view ? t(m.view) : p, w = l(null), T = o((e) => {
-		w.current = e, u(S, e);
-	}, [S]), { paint: E } = a(), D = d(() => {
-		let t = w.current;
-		if (!t) return !1;
-		let n = typeof _ == "function" ? _({
-			width: h,
-			height: g
-		}) : _, r = [];
-		return v && r.push({
-			kind: "path",
-			path: {
-				kind: "rect",
-				x: 0,
-				y: 0,
-				width: h,
-				height: g
-			},
-			fill: v
-		}), r.push({
+function u(u) {
+	let { width: d, height: f, draw: p, background: m, redrawOn: h, dpr: g, className: _, canvasRef: v } = u, y = u.view ? t(u.view) : l, b = o(null), x = a((e) => {
+		b.current = e, s(v, e);
+	}, [v]);
+	return n((t) => {
+		let n = b.current;
+		if (!n) return !1;
+		let r = typeof p == "function" ? p({
+			width: d,
+			height: f
+		}) : p, a = m ? e(m, {
+			width: d,
+			height: f
+		}) : [];
+		return a.push({
 			kind: "group",
-			transform: e(C),
-			children: [...n]
-		}), E(t, r, C, {
-			width: h,
-			height: g,
-			dpr: b
+			transform: i(y),
+			children: [...r]
+		}), t.paint(n, a, y, {
+			width: d,
+			height: f,
+			dpr: g
 		});
-	}), { requestRedraw: O } = r(o(() => D.current(), [D]), { target: w }), k = l(!1);
-	return c(() => {
-		if (k.current) {
-			O();
-			return;
-		}
-		k.current = D.current(), k.current || O();
-	}), n(O), i(y, O), s(() => () => {
-		k.current = !1;
-	}, []), /* @__PURE__ */ f("canvas", {
-		ref: T,
-		width: h,
-		height: g,
-		className: x
+	}, {
+		target: b,
+		dpr: g,
+		redrawOn: h,
+		paintOnCommit: !0
+	}), /* @__PURE__ */ c("canvas", {
+		ref: x,
+		width: d,
+		height: f,
+		...r(d, f, _)
 	});
 }
 //#endregion
-export { m as DrawCanvas };
+export { u as DrawCanvas };
 
 //# sourceMappingURL=DrawCanvas.js.map

package/dist/canvas/DrawCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawCanvas.js","names":["IDENTITY_VIEW","DrawCanvas","props","view","normalizeView","canvasElRef","useRef","setRefs","useCallback","el","assignRef","canvasRef","paintCanvas","useCanvasRenderer","paintRef","useLatest","content","draw","commands","background","viewToMat3","useFrameLoop","paintedRef","useLayoutEffect","requestRedraw","useLateContentRedraw","useRedrawOn","redrawOn","useEffect"],"sources":["../../src/canvas/DrawCanvas.tsx"],"sourcesContent":["/**\n * `<DrawCanvas>` — a sized, DPR-correct WebGL2 surface that paints a list of\n * draw commands, with no scene, tools or dispatcher behind it.\n *\n * It paints through the same per-canvas renderer as `<SceneViewCanvas>`\n * (`useCanvasRenderer`), on a `useFrameLoop` that stops while the canvas is off\n * screen or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event\n * listeners and emits no inline styles: size the element with `className`.\n */\nimport { useCallback, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { Ref } from 'react';\nimport { assignRef, useLatest } from '@weasel-js/react';\nimport type { FillStyle } from '@weasel-js/paint';\nimport { useFrameLoop } from './useFrameLoop';\nimport { useLateContentRedraw } from './useLateContentRedraw';\nimport { useRedrawOn } from './useRedrawOn';\nimport { useCanvasRenderer } from './useCanvasRenderer';\nimport { viewToMat3 } from '../renderer/math/viewToMat3';\nimport type { DrawCommand } from '../renderer/DrawCommand';\nimport type { RedrawSource } from '../core/layers/render';\nimport { normalizeView, type View } from '../core/viewport/view';\n\n/** What a `<DrawCanvas>` paints: a command list, or a function returning one\n *  that is called on every paint with the surface's CSS-pixel size. */\nexport type DrawCanvasDraw =\n  | readonly DrawCommand[]\n  | ((size: { width: number; height: number }) => readonly DrawCommand[]);\n\n/** Props for `<DrawCanvas>`. */\nexport interface DrawCanvasProps {\n  /** CSS-pixel width. The drawing buffer is `width × dpr`. */\n  width: number;\n  /** CSS-pixel height. */\n  height: number;\n  /** The commands to paint, in the coordinate space `view` maps to the\n   *  screen — CSS pixels when `view` is omitted. A new array repaints on the\n   *  next frame. A function is read at paint time, so state it reads outside\n   *  React repaints when one of `redrawOn`'s sources notifies. */\n  draw: DrawCanvasDraw;\n  /** Camera over `draw`'s commands. Defaults to the identity view. */\n  view?: View;\n  /** Fills the whole surface beneath `draw`, in screen space. The canvas is\n   *  transparent without it. */\n  background?: FillStyle;\n  /** External state a `draw` function reads. Each source is subscribed while\n   *  mounted and repaints the canvas when it notifies. */\n  redrawOn?: readonly RedrawSource[];\n  /** Device-pixel ratio. Defaults to `window.devicePixelRatio`, read per\n   *  paint. */\n  dpr?: number;\n  /** CSS class for the `<canvas>` element. */\n  className?: string;\n  /** Receives the underlying `<canvas>`, for pointer listeners or `toBlob`. */\n  canvasRef?: Ref<HTMLCanvasElement>;\n}\n\nconst IDENTITY_VIEW: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };\n\n/**\n * Paint draw commands onto a canvas of its own. For a surface that only draws —\n * a package demo, a swatch, a preview — where a `<SceneCanvas>` would bring a\n * scene, tools and an input dispatcher that nothing uses.\n */\nexport function DrawCanvas(props: DrawCanvasProps) {\n  const { width, height, draw, background, redrawOn, dpr, className, canvasRef } = props;\n  const view = props.view ? normalizeView(props.view) : IDENTITY_VIEW;\n\n  const canvasElRef = useRef<HTMLCanvasElement | null>(null);\n  const setRefs = useCallback((el: HTMLCanvasElement | null) => {\n    canvasElRef.current = el;\n    assignRef(canvasRef, el);\n  }, [canvasRef]);\n\n  const { paint: paintCanvas } = useCanvasRenderer();\n  const paint = (): boolean => {\n    const el = canvasElRef.current;\n    if (!el) return false;\n    const content = typeof draw === 'function' ? draw({ width, height }) : draw;\n    const commands: DrawCommand[] = [];\n    if (background) {\n      commands.push({ kind: 'path', path: { kind: 'rect', x: 0, y: 0, width, height }, fill: background });\n    }\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return paintCanvas(el, commands, view, { width, height, dpr });\n  };\n  const paintRef = useLatest(paint);\n  const { requestRedraw } = useFrameLoop(\n    useCallback(() => paintRef.current(), [paintRef]),\n    { target: canvasElRef },\n  );\n\n  // Every committed render marks the surface dirty; the first paints in place\n  // so the first frame shown is the content rather than a blank canvas.\n  const paintedRef = useRef(false);\n  useLayoutEffect(() => {\n    if (paintedRef.current) { requestRedraw(); return; }\n    paintedRef.current = paintRef.current();\n    if (!paintedRef.current) requestRedraw();\n  });\n\n  useLateContentRedraw(requestRedraw);\n  useRedrawOn(redrawOn, requestRedraw);\n\n  // `useCanvasRenderer` frees the renderer on unmount; a remount (StrictMode)\n  // paints its first frame in place again.\n  useEffect(() => () => { paintedRef.current = false; }, []);\n\n  return <canvas ref={setRefs} width={width} height={height} className={className} />;\n}\n"],"mappings":";;;;;;;;;;AAwDA,IAAMA,IAAsB;CAAE,GAAG;CAAG,GAAG;CAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;AAAE;AAOhE,SAAgBC,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,SAAM,eAAY,aAAU,QAAK,cAAW,iBAAcC,GAC3EC,IAAOD,EAAM,OAAOE,EAAcF,EAAM,IAAI,IAAIF,GAEhDK,IAAcC,EAAiC,IAAI,GACnDC,IAAUC,GAAa,MAAiC;EAE5D,AADA,EAAY,UAAUC,GACtBC,EAAUC,GAAWF,CAAE;CACzB,GAAG,CAACE,CAAS,CAAC,GAER,EAAE,OAAOC,MAAgBC,EAAkB,GAY3CC,IAAWC,QAXY;EAC3B,IAAMN,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMO,IAAU,OAAOC,KAAS,aAAaA,EAAK;GAAE;GAAO;EAAO,CAAC,IAAIA,GACjEC,IAA0B,CAAC;EAKjC,OAJIC,KACFD,EAAS,KAAK;GAAE,MAAM;GAAQ,MAAM;IAAE,MAAM;IAAQ,GAAG;IAAG,GAAG;IAAG;IAAO;GAAO;GAAG,MAAMC;EAAW,CAAC,GAErGD,EAAS,KAAK;GAAE,MAAM;GAAS,WAAWE,EAAWjB,CAAI;GAAG,UAAU,CAAC,GAAGa,CAAO;EAAE,CAAC,GAC7EJ,EAAYH,GAAIS,GAAUf,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,CACgC,GAC1B,EAAE,qBAAkBkB,EACxBb,QAAkBM,EAAS,QAAQ,GAAG,CAACA,CAAQ,CAAC,GAChD,EAAE,QAAQT,EAAY,CACxB,GAIMiB,IAAahB,EAAO,EAAK;CAc/B,OAbAiB,QAAsB;EACpB,IAAID,EAAW,SAAS;GAAE,EAAc;GAAG;EAAQ;EAEnD,AADA,EAAW,UAAUR,EAAS,QAAQ,GACjCQ,EAAW,WAASE,EAAc;CACzC,CAAC,GAEDC,EAAqBD,CAAa,GAClCE,EAAYC,GAAUH,CAAa,GAInCI,cAAsB;EAAE,EAAW,UAAU;CAAO,GAAG,CAAC,CAAC,GAElD,kBAAC,UAAD;EAAQ,KAAKrB;EAAgB;EAAe;EAAmB;CAAY,CAAA;AACpF"}
+{"version":3,"file":"DrawCanvas.js","names":["IDENTITY_VIEW","DrawCanvas","props","view","normalizeView","canvasElRef","useRef","setRefs","useCallback","el","assignRef","canvasRef","useCanvasSurface","content","draw","commands","background","backgroundFillCommands","viewToMat3","lease","surfaceBox","width","height","className"],"sources":["../../src/canvas/DrawCanvas.tsx"],"sourcesContent":["/**\n * `<DrawCanvas>` — a sized, DPR-correct WebGL2 surface that paints a list of\n * draw commands, with no scene, tools or dispatcher behind it.\n *\n * It paints through the same surface hook as `<SceneViewCanvas>`\n * (`useCanvasSurface`), whose frame loop stops while the canvas is off screen\n * or the tab is hidden. Like `<SceneViewCanvas>` it attaches no event\n * listeners. Its size is `width` × `height` unless a `className` rule sizes\n * the element; the drawing buffer stays `width` × `height` either way.\n */\nimport { useCallback, useRef } from 'react';\nimport type { Ref } from 'react';\nimport { assignRef } from '@weasel-js/react';\nimport type { Paint } from '@weasel-js/paint';\nimport { useCanvasSurface } from './useCanvasSurface';\nimport { surfaceBox } from './surfaceBox';\nimport type { CanvasRendererLease } from './canvasRenderer';\nimport { viewToMat3 } from '@weasel-js/geom';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport type { RedrawSource } from '../core/layers/render';\nimport { backgroundFillCommands } from '../core/layers/backgroundFill';\nimport { normalizeView, type View } from '../core/viewport/view';\n\n/** What a `<DrawCanvas>` paints: a command list, or a function returning one\n *  that is called on every paint with the surface's CSS-pixel size. */\nexport type DrawCanvasDraw =\n  | readonly DrawCommand[]\n  | ((size: { width: number; height: number }) => readonly DrawCommand[]);\n\n/** Props for `<DrawCanvas>`. */\nexport interface DrawCanvasProps {\n  /** CSS-pixel width. The drawing buffer is `width × dpr`. */\n  width: number;\n  /** CSS-pixel height. */\n  height: number;\n  /** The commands to paint, in the coordinate space `view` maps to the\n   *  screen — CSS pixels when `view` is omitted. A new array repaints on the\n   *  next frame. A function is read at paint time, so state it reads outside\n   *  React repaints when one of `redrawOn`'s sources notifies. */\n  draw: DrawCanvasDraw;\n  /** Camera over `draw`'s commands. Defaults to the identity view. */\n  view?: View;\n  /** Fills the whole surface beneath `draw`, in screen space. The canvas is\n   *  transparent without it. */\n  background?: Paint;\n  /** External state a `draw` function reads. Each source is subscribed while\n   *  mounted and repaints the canvas when it notifies. */\n  redrawOn?: readonly RedrawSource[];\n  /** Device-pixel ratio. Defaults to `window.devicePixelRatio`, read per\n   *  paint. */\n  dpr?: number;\n  /** CSS class for the `<canvas>` element. */\n  className?: string;\n  /** Receives the underlying `<canvas>`, for pointer listeners or `toBlob`. */\n  canvasRef?: Ref<HTMLCanvasElement>;\n}\n\nconst IDENTITY_VIEW: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };\n\n/**\n * Paint draw commands onto a canvas of its own. For a surface that only draws —\n * a package demo, a swatch, a preview — where a `<SceneCanvas>` would bring a\n * scene, tools and an input dispatcher that nothing uses.\n */\nexport function DrawCanvas(props: DrawCanvasProps) {\n  const { width, height, draw, background, redrawOn, dpr, className, canvasRef } = props;\n  const view = props.view ? normalizeView(props.view) : IDENTITY_VIEW;\n\n  const canvasElRef = useRef<HTMLCanvasElement | null>(null);\n  const setRefs = useCallback((el: HTMLCanvasElement | null) => {\n    canvasElRef.current = el;\n    assignRef(canvasRef, el);\n  }, [canvasRef]);\n\n  const paint = (lease: CanvasRendererLease): boolean => {\n    const el = canvasElRef.current;\n    if (!el) return false;\n    const content = typeof draw === 'function' ? draw({ width, height }) : draw;\n    const commands: DrawCommand[] = background ? backgroundFillCommands(background, { width, height }) : [];\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return lease.paint(el, commands, view, { width, height, dpr });\n  };\n  useCanvasSurface(paint, { target: canvasElRef, dpr, redrawOn, paintOnCommit: true });\n\n  return <canvas ref={setRefs} width={width} height={height} {...surfaceBox(width, height, className)} />;\n}\n"],"mappings":";;;;;;;;;AAyDA,IAAMA,IAAsB;CAAE,GAAG;CAAG,GAAG;CAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;AAAE;AAOhE,SAAgBC,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,SAAM,eAAY,aAAU,QAAK,cAAW,iBAAcC,GAC3EC,IAAOD,EAAM,OAAOE,EAAcF,EAAM,IAAI,IAAIF,GAEhDK,IAAcC,EAAiC,IAAI,GACnDC,IAAUC,GAAa,MAAiC;EAE5D,AADA,EAAY,UAAUC,GACtBC,EAAUC,GAAWF,CAAE;CACzB,GAAG,CAACE,CAAS,CAAC;CAYd,OAFAC,GARe,MAAwC;EACrD,IAAMH,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMI,IAAU,OAAOC,KAAS,aAAaA,EAAK;GAAE;GAAO;EAAO,CAAC,IAAIA,GACjEC,IAA0BC,IAAaC,EAAuBD,GAAY;GAAE;GAAO;EAAO,CAAC,IAAI,CAAC;EAEtG,OADAD,EAAS,KAAK;GAAE,MAAM;GAAS,WAAWG,EAAWf,CAAI;GAAG,UAAU,CAAC,GAAGU,CAAO;EAAE,CAAC,GAC7EM,EAAM,MAAMV,GAAIM,GAAUZ,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,GACwB;EAAE,QAAQE;EAAa;EAAK;EAAU,eAAe;CAAK,CAAC,GAE5E,kBAAC,UAAD;EAAQ,KAAKE;EAAgB;EAAe;EAAQ,GAAIa,EAAWC,GAAOC,GAAQC,CAAS;CAAI,CAAA;AACxG"}

package/dist/canvas/ModalityHud.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalityHud.js","names":["s","hud_module_default","ModalityHud","toolCtx","useOptionalActiveToolContext","useHostAnchor","anchorRef","canvasRef","offset","style","active","hotkeys","hotkeyTop","modeId","i","id"],"sources":["../../src/canvas/ModalityHud.tsx"],"sourcesContent":["/**\n * Dev HUD reporting the modality state: active mode, active-slot tool, and\n * the hotkey-engaged tool stack. Anchors below `PickHud` in the canvas's\n * top-right corner.\n *\n * Mode id is supplied by the consumer (apps that haven't yet wired the\n * modality machine pass `undefined`; the line renders as `—`). Active /\n * hotkey state is read live from `useOptionalActiveToolContext` so the HUD\n * stays in sync with tool switches and hotkey engage/disengage without\n * prop plumbing.\n */\nimport { useOptionalActiveToolContext } from '@weasel-js/routing/react';\nimport { useHostAnchor } from './useHostAnchor';\nimport s from './hud.module.css';\n\nexport interface ModalityHudProps {\n  canvasRef: React.RefObject<HTMLElement | null>;\n  /** Element the HUD pins its corner to. Defaults to the canvas's parent — the\n   *  wrapper a bare `<canvas>` sits in. A detached canvas passes its own input\n   *  box, whose parent is the shared surface every pane sits in. */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  /** Active modality mode id. Omit until the mode machine is wired —\n   *  the row renders `—` in that case. */\n  modeId?: string;\n  /** Inset from the canvas's top-right corner. Default `{ top: 220, right: 8 }`\n   *  so the HUD clears `PickHud` (which itself sits at ~76, with variable\n   *  height for the id list). Override if the pick list is unusually tall. */\n  offset?: { top?: number; right?: number };\n}\n\nexport function ModalityHud({ canvasRef, anchorRef, modeId, offset }: ModalityHudProps) {\n  const toolCtx = useOptionalActiveToolContext();\n  const { ref, style } = useHostAnchor(\n    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,\n    {\n      align: { x: 'end', y: 'start' },\n      offset: { x: offset?.right ?? 8, y: offset?.top ?? 220 },\n    },\n  );\n\n  if (!style) return null;\n\n  const active = toolCtx?.active ?? null;\n  const hotkeys = toolCtx?.hotkeyStack ?? [];\n  const hotkeyTop = hotkeys.length > 0 ? hotkeys[hotkeys.length - 1] : null;\n\n  return (\n    <div ref={ref} className={`${s.hud} ${s.sized}`} style={style}>\n      <div className={s.row}>\n        <span className={s.muted}>mode</span>\n        <span className={modeId ? undefined : s.absent}>{modeId ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>active</span>\n        <span className={active ? undefined : s.absent}>{active ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>hotkey</span>\n        {hotkeys.length <= 1 ? (\n          <span className={hotkeyTop ? undefined : s.absent}>{hotkeyTop ?? '—'}</span>\n        ) : (\n          <span className={s.stack}>\n            {hotkeys.slice().reverse().map((id, i) => (\n              <span key={`${id}-${i}`} className={i === 0 ? undefined : s.absent}>\n                {id}\n              </span>\n            ))}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AA8BA,SAAgBE,EAAY,EAAE,cAAW,cAAW,WAAQ,aAA4B;CACtF,IAAMC,IAAUC,EAA6B,GACvC,EAAE,QAAK,aAAUC,QACfC,GAAW,WAAWC,EAAU,SAAS,iBAAiBA,EAAU,SAC1E;EACE,OAAO;GAAE,GAAG;GAAO,GAAG;EAAQ;EAC9B,QAAQ;GAAE,GAAGC,GAAQ,SAAS;GAAG,GAAGA,GAAQ,OAAO;EAAI;CACzD,CACF;CAEA,IAAI,CAACC,GAAO,OAAO;CAEnB,IAAMC,IAASP,GAAS,UAAU,MAC5BQ,IAAUR,GAAS,eAAe,CAAC,GACnCS,IAAYD,EAAQ,SAAS,IAAIA,EAAQA,EAAQ,SAAS,KAAK;CAErE,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,GAAGX,EAAE,IAAI,GAAGA,EAAE;EAAgB;EAAxD,UAAA;GACE,kBAAC,OAAD;IAAK,WAAWA,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAU,CAAA,GACpC,kBAAC,QAAD;KAAM,WAAWa,IAAS,KAAA,IAAYb,EAAE;KAAS,UAAAa,KAAU;IAAU,CAAA,CAClE;;GACL,kBAAC,OAAD;IAAK,WAAWb,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAY,CAAA,GACtC,kBAAC,QAAD;KAAM,WAAWU,IAAS,KAAA,IAAYV,EAAE;KAAS,UAAAU,KAAU;IAAU,CAAA,CAClE;;GACL,kBAAC,OAAD;IAAK,WAAWV,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAY,CAAA,GACrCW,EAAQ,UAAU,IACjB,kBAAC,QAAD;KAAM,WAAWC,IAAY,KAAA,IAAYZ,EAAE;KAAS,UAAAY,KAAa;IAAU,CAAA,IAE3E,kBAAC,QAAD;KAAM,WAAWZ,EAAE;KAChB,UAAAW,EAAQ,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAI,MAClC,kBAAC,QAAD;MAAyB,WAAWG,MAAM,IAAI,KAAA,IAAYd,EAAE;MACzD,UAAAe;KACG,GAFK,GAAGA,EAAG,GAAGD,GAEd,CACP;IACG,CAAA,CAEL;;EACF;;AAET"}
+{"version":3,"file":"ModalityHud.js","names":["s","hud_module_default","ModalityHud","toolCtx","useOptionalActiveToolContext","useHostAnchor","anchorRef","canvasRef","offset","style","active","hotkeys","hotkeyTop","modeId","i","id"],"sources":["../../src/canvas/ModalityHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\n * Dev HUD reporting the modality state: active mode, active-slot tool, and\n * the hotkey-engaged tool stack. Anchors below `PickHud` in the canvas's\n * top-right corner.\n *\n * Mode id is supplied by the consumer (apps that haven't yet wired the\n * modality machine pass `undefined`; the line renders as `—`). Active /\n * hotkey state is read live from `useOptionalActiveToolContext` so the HUD\n * stays in sync with tool switches and hotkey engage/disengage without\n * prop plumbing.\n */\nimport { useOptionalActiveToolContext } from '@weasel-js/routing/react';\nimport { useHostAnchor } from './useHostAnchor';\nimport s from './hud.module.css';\n\nexport interface ModalityHudProps {\n  canvasRef: React.RefObject<HTMLElement | null>;\n  /** Element the HUD pins its corner to. Defaults to the canvas's parent — the\n   *  wrapper a bare `<canvas>` sits in. A detached canvas passes its own input\n   *  box, whose parent is the shared surface every pane sits in. */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  /** Active modality mode id. Omit until the mode machine is wired —\n   *  the row renders `—` in that case. */\n  modeId?: string;\n  /** Inset from the canvas's top-right corner. Default `{ top: 220, right: 8 }`\n   *  so the HUD clears `PickHud` (which itself sits at ~76, with variable\n   *  height for the id list). Override if the pick list is unusually tall. */\n  offset?: { top?: number; right?: number };\n}\n\nexport function ModalityHud({ canvasRef, anchorRef, modeId, offset }: ModalityHudProps) {\n  const toolCtx = useOptionalActiveToolContext();\n  const { ref, style } = useHostAnchor(\n    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,\n    {\n      align: { x: 'end', y: 'start' },\n      offset: { x: offset?.right ?? 8, y: offset?.top ?? 220 },\n    },\n  );\n\n  if (!style) return null;\n\n  const active = toolCtx?.active ?? null;\n  const hotkeys = toolCtx?.hotkeyStack ?? [];\n  const hotkeyTop = hotkeys.length > 0 ? hotkeys[hotkeys.length - 1] : null;\n\n  return (\n    <div ref={ref} className={`${s.hud} ${s.sized}`} style={style}>\n      <div className={s.row}>\n        <span className={s.muted}>mode</span>\n        <span className={modeId ? undefined : s.absent}>{modeId ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>active</span>\n        <span className={active ? undefined : s.absent}>{active ?? '—'}</span>\n      </div>\n      <div className={s.row}>\n        <span className={s.muted}>hotkey</span>\n        {hotkeys.length <= 1 ? (\n          <span className={hotkeyTop ? undefined : s.absent}>{hotkeyTop ?? '—'}</span>\n        ) : (\n          <span className={s.stack}>\n            {hotkeys.slice().reverse().map((id, i) => (\n              <span key={`${id}-${i}`} className={i === 0 ? undefined : s.absent}>\n                {id}\n              </span>\n            ))}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AA+BA,SAAgBE,EAAY,EAAE,cAAW,cAAW,WAAQ,aAA4B;CACtF,IAAMC,IAAUC,EAA6B,GACvC,EAAE,QAAK,aAAUC,QACfC,GAAW,WAAWC,EAAU,SAAS,iBAAiBA,EAAU,SAC1E;EACE,OAAO;GAAE,GAAG;GAAO,GAAG;EAAQ;EAC9B,QAAQ;GAAE,GAAGC,GAAQ,SAAS;GAAG,GAAGA,GAAQ,OAAO;EAAI;CACzD,CACF;CAEA,IAAI,CAACC,GAAO,OAAO;CAEnB,IAAMC,IAASP,GAAS,UAAU,MAC5BQ,IAAUR,GAAS,eAAe,CAAC,GACnCS,IAAYD,EAAQ,SAAS,IAAIA,EAAQA,EAAQ,SAAS,KAAK;CAErE,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,GAAGX,EAAE,IAAI,GAAGA,EAAE;EAAgB;EAAxD,UAAA;GACE,kBAAC,OAAD;IAAK,WAAWA,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAU,CAAA,GACpC,kBAAC,QAAD;KAAM,WAAWa,IAAS,KAAA,IAAYb,EAAE;KAAS,UAAAa,KAAU;IAAU,CAAA,CAClE;;GACL,kBAAC,OAAD;IAAK,WAAWb,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAY,CAAA,GACtC,kBAAC,QAAD;KAAM,WAAWU,IAAS,KAAA,IAAYV,EAAE;KAAS,UAAAU,KAAU;IAAU,CAAA,CAClE;;GACL,kBAAC,OAAD;IAAK,WAAWV,EAAE;IAAlB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAE;KAAO,UAAA;IAAY,CAAA,GACrCW,EAAQ,UAAU,IACjB,kBAAC,QAAD;KAAM,WAAWC,IAAY,KAAA,IAAYZ,EAAE;KAAS,UAAAY,KAAa;IAAU,CAAA,IAE3E,kBAAC,QAAD;KAAM,WAAWZ,EAAE;KAChB,UAAAW,EAAQ,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAI,MAClC,kBAAC,QAAD;MAAyB,WAAWG,MAAM,IAAI,KAAA,IAAYd,EAAE;MACzD,UAAAe;KACG,GAFK,GAAGA,EAAG,GAAGD,GAEd,CACP;IACG,CAAA,CAEL;;EACF;;AAET"}