@weasel-js/core 1.9.4 → 1.10.0

package/dist/canvas/CursorCoordsHud.js

@@ -1,21 +1,20 @@
-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 { useLatest as s } from "@weasel-js/react";
+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 f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
-	let g = s(m), [_, v] = o({
+	let g = o(m), [_, v] = a({
 		client: {
 			x: 0,
 			y: 0
 		},
 		world: null,
 		inCanvas: !1
-	}), [y, b] = o(0), { ref: x, style: S } = r(() => d?.current ?? u.current?.parentElement ?? u.current, {
+	}), [y, b] = a(0), { ref: x, style: S } = n(() => d?.current ?? u.current?.parentElement ?? u.current, {
 		align: {
 			x: "end",
 			y: "start"
@@ -24,18 +23,18 @@ function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
 			x: h?.right ?? 8,
 			y: h?.top ?? 8
 		}
-	}), C = a(0), w = a(0), T = e(() => {
+	}), 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: () => {
 		C.current = 0, w.current = performance.now();
 	} });
-	return i(() => (w.current = performance.now(), T.request(), () => T.cancel()), [T]), i(() => {
-		let e = (e) => {
+	return r(() => (w.current = performance.now(), T.request(), () => T.cancel()), [T]), r(() => {
+		let t = (t) => {
 			let n = u.current, r = f.current, i = {
-				x: e.clientX,
-				y: e.clientY
+				x: t.clientX,
+				y: t.clientY
 			};
 			if (!n || !r) {
 				v({
@@ -45,7 +44,7 @@ function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
 				});
 				return;
 			}
-			let a = n.getBoundingClientRect(), o = e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom, [s, c] = g.current?.(e.clientX, e.clientY) ?? t(e.clientX, e.clientY, a, r);
+			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: {
@@ -55,8 +54,8 @@ function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
 				inCanvas: o
 			});
 		};
-		return document.addEventListener("pointermove", e), () => {
-			document.removeEventListener("pointermove", e);
+		return document.addEventListener("pointermove", t), () => {
+			document.removeEventListener("pointermove", t);
 		};
 	}, [
 		u,
@@ -64,30 +63,30 @@ function f({ canvasRef: u, anchorRef: d, viewRef: f, toWorld: m, offset: h }) {
 		g
 	]), S ? /* @__PURE__ */ c("div", {
 		ref: x,
-		className: n.hud,
+		className: t.hud,
 		style: S,
 		children: /* @__PURE__ */ l("dl", {
-			className: n.readings,
+			className: t.readings,
 			children: [
 				/* @__PURE__ */ c("dt", {
-					className: n.muted,
+					className: t.muted,
 					children: "fps"
 				}),
 				/* @__PURE__ */ c("dd", { children: y }),
 				/* @__PURE__ */ c("dt", {
-					className: n.muted,
+					className: t.muted,
 					children: "client"
 				}),
 				/* @__PURE__ */ c("dd", { children: p(_.client, 0) }),
 				/* @__PURE__ */ c("dt", {
-					className: n.muted,
+					className: t.muted,
 					children: "world"
 				}),
 				_.world ? /* @__PURE__ */ l("dd", { children: [p(_.world, 1), _.inCanvas ? null : /* @__PURE__ */ c("span", {
-					className: n.absent,
+					className: t.absent,
 					children: " off-canvas"
 				})] }) : /* @__PURE__ */ c("dd", {
-					className: n.absent,
+					className: t.absent,
 					children: "— no canvas or view yet"
 				})
 			]

package/dist/canvas/CursorCoordsHud.js.map

@@ -1 +1 @@
-{"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","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. 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 } from '@weasel-js/react';\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  /** 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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"}
+{"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":";;;;;;;;AA2CA,SAAgBE,EAAgB,EAAE,cAAW,cAAW,YAAS,YAAS,aAAgC;CACxG,IAAMC,IAAaC,EAAUC,CAAO,GAC9B,CAACC,GAAOC,KAAYC,EAAmB;EAC3C,QAAQ;GAAE,GAAG;GAAG,GAAG;EAAE;EAAG,OAAO;EAAM,UAAU;CACjD,CAAC,GACK,CAACC,GAAKC,KAAUF,EAAiB,CAAC,GAClC,EAAE,QAAK,OAAOG,MAAgBC,QAC5BC,GAAW,WAAWC,EAAU,SAAS,iBAAiBA,EAAU,SAC1E;EACE,OAAO;GAAE,GAAG;GAAO,GAAG;EAAQ;EAC9B,QAAQ;GAAE,GAAGC,GAAQ,SAAS;GAAG,GAAGA,GAAQ,OAAO;EAAE;CACvD,CACF,GAGMC,IAAYC,EAAO,CAAC,GACpBC,IAAeD,EAAO,CAAC,GACvBE,IAAUC,QACR;EACJ,EAAU;EACV,IAAMC,IAAM,YAAY,IAAI,GACtBC,IAAKD,IAAMH,EAAa;EAM9B,AALII,KAAM,QACRZ,EAAO,KAAK,MAAOM,EAAU,UAAU,MAAQM,CAAE,CAAC,GAClD,EAAU,UAAU,GACpB,EAAa,UAAUD,IAEzBF,EAAQ,QAAQ;CAClB,GAGA,EACE,gBAAgB;EAEd,AADA,EAAU,UAAU,GACpB,EAAa,UAAU,YAAY,IAAI;CACzC,EACF,CACF;CAoCA,OAlCAI,SACE,EAAa,UAAU,YAAY,IAAI,GACvCJ,EAAQ,QAAQ,SACHA,EAAQ,OAAO,IAC3B,CAACA,CAAO,CAAC,GAEZI,QAAgB;EACd,IAAMC,KAAU,MAAoB;GAClC,IAAMC,IAASX,EAAU,SACnBY,IAAOC,EAAQ,SACfC,IAAS;IAAE,GAAGC,EAAE;IAAS,GAAGA,EAAE;GAAQ;GAC5C,IAAI,CAACJ,KAAU,CAACC,GAAM;IACpB,EAAS;KAAE;KAAQ,OAAO;KAAM,UAAU;IAAM,CAAC;IACjD;GACF;GACA,IAAMI,IAAOL,EAAO,sBAAsB,GACpCM,IACJF,EAAE,WAAWC,EAAK,QAAQD,EAAE,WAAWC,EAAK,SAC5CD,EAAE,WAAWC,EAAK,OAAQD,EAAE,WAAWC,EAAK,QACxC,CAACE,GAAIC,KAAM9B,EAAW,UAAU0B,EAAE,SAASA,EAAE,OAAO,KACrDK,EAAcL,EAAE,SAASA,EAAE,SAASC,GAAMJ,CAAI;GAEnD,EAAS;IAAE;IAAQ,OAAA;KADH,GAAGM;KAAI,GAAGC;IACP;IAAO;GAAS,CAAC;EACtC;EAIA,OAFA,SAAS,iBAAiB,eAAeT,CAAM,SAElC;GACX,SAAS,oBAAoB,eAAeA,CAAM;EACpD;CACF,GAAG;EAACV;EAAWa;EAASxB;CAAU,CAAC,GAE9BQ,IAGH,kBAAC,OAAD;EAAU;EAAK,WAAWX,EAAE;EAAK,OAAOW;EACtC,UAAA,kBAAC,MAAD;GAAI,WAAWX,EAAE;GAAjB,UAAA;IACE,kBAAC,MAAD;KAAI,WAAWA,EAAE;KAAO,UAAA;IAAO,CAAA;IAC/B,kBAAC,MAAD,EAAA,UAAKS,EAAQ,CAAA;IACb,kBAAC,MAAD;KAAI,WAAWT,EAAE;KAAO,UAAA;IAAU,CAAA;IAClC,kBAAC,MAAD,EAAA,UAAKmC,EAAM7B,EAAM,QAAQ,CAAC,EAAM,CAAA;IAChC,kBAAC,MAAD;KAAI,WAAWN,EAAE;KAAO,UAAA;IAAS,CAAA;IAChCM,EAAM,QACL,kBAAC,MAAD,EAAA,UAAA,CACG6B,EAAM7B,EAAM,OAAO,CAAC,GACpBA,EAAM,WAAW,OAAO,kBAAC,QAAD;KAAM,WAAWN,EAAE;KAAQ,UAAA;IAAiB,CAAA,CACnE,EAAA,CAAA,IAEJ,kBAAC,MAAD;KAAI,WAAWA,EAAE;KAAQ,UAAA;IAA2B,CAAA;GAEpD;;CACD,CAAA,IAnBkB;AAqB3B;AAGA,SAASmC,EAAM,EAAE,MAAG,QAA+B,GAAwB;CACzE,IAAMC,IAAKC,EAAQ;EAAE;EAAQ,UAAU;CAAM,CAAC;CAC9C,OAAO,IAAIC,EAAIC,GAAGH,CAAE,CAAC,CAAC,KAAK,IAAIE,EAAIE,GAAGJ,CAAE,CAAC,CAAC,KAAK;AACjD"}

package/dist/canvas/DrawCanvas.js

@@ -1,15 +1,13 @@
-import { commandFill as e } from "../features/patterns/commandPaint.js";
-import { viewToMat3 as t } from "../renderer/math/viewToMat3.js";
-import { normalizeView as n } from "../core/viewport/view.js";
-import { useFrameLoop as r } from "./useFrameLoop.js";
-import { useLateContentRedraw as i } from "./useLateContentRedraw.js";
-import { useCanvasRenderer as a, useRedrawOnDensityChange as o, useRedrawOnRestore as s } from "./useCanvasRenderer.js";
-import { useRedrawOn as c } from "./useRedrawOn.js";
-import { useCallback as l, useEffect as u, useLayoutEffect as d, useRef as f } from "react";
-import { assignRef as p, useLatest as m } from "@weasel-js/react";
-import { jsx as h } from "react/jsx-runtime";
+import { backgroundFillCommands as e } from "../core/layers/backgroundFill.js";
+import { normalizeView as t } from "../core/viewport/view.js";
+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 g = {
+var l = {
 	x: 0,
 	y: 0,
 	scale: {
@@ -17,57 +15,42 @@ var g = {
 		y: 1
 	}
 };
-function _(_) {
-	let { width: v, height: y, draw: b, background: x, redrawOn: S, dpr: C, className: w, canvasRef: T } = _, E = _.view ? n(_.view) : g, D = f(null), O = l((e) => {
-		D.current = e, p(T, e);
-	}, [T]), k = a(), A = m(() => {
-		let n = D.current;
+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 b == "function" ? b({
-			width: v,
-			height: y
-		}) : b, i = [], a = x && e(x, {
-			x: 0,
-			y: 0,
-			width: v,
-			height: y
-		});
-		return a && i.push({
-			kind: "path",
-			path: {
-				kind: "rect",
-				x: 0,
-				y: 0,
-				width: v,
-				height: y
-			},
-			fill: a
-		}), i.push({
+		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: t(E),
+			transform: i(y),
 			children: [...r]
-		}), k.paint(n, i, E, {
-			width: v,
-			height: y,
-			dpr: C
+		}), t.paint(n, a, y, {
+			width: d,
+			height: f,
+			dpr: g
 		});
-	}), { requestRedraw: j } = r(l(() => A.current(), [A]), { target: D }), M = f(!1);
-	return d(() => {
-		if (M.current) {
-			j();
-			return;
-		}
-		M.current = A.current(), M.current || j();
-	}), i(j), s(k, j), o(j, C), c(S, j), u(() => () => {
-		M.current = !1;
-	}, []), /* @__PURE__ */ h("canvas", {
-		ref: O,
-		width: v,
-		height: y,
-		className: w
+	}, {
+		target: b,
+		dpr: g,
+		redrawOn: h,
+		paintOnCommit: !0
+	}), /* @__PURE__ */ c("canvas", {
+		ref: x,
+		width: d,
+		height: f,
+		...r(d, f, _)
 	});
 }
 //#endregion
-export { _ 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","lease","useCanvasRenderer","paintRef","useLatest","content","draw","commands","fill","background","commandFill","viewToMat3","useFrameLoop","paintedRef","useLayoutEffect","requestRedraw","useLateContentRedraw","useRedrawOnRestore","useRedrawOnDensityChange","dpr","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. Its size is `width` × `height`, which the renderer writes as\n * inline style, so `className` positions the element and cannot resize it.\n */\nimport { useCallback, useEffect, useLayoutEffect, useRef } from 'react';\nimport { commandFill } from '../features/patterns/commandPaint';\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, useRedrawOnDensityChange, useRedrawOnRestore } 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 lease = 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    const fill = background && commandFill(background, { x: 0, y: 0, width, height });\n    if (fill) commands.push({ kind: 'path', path: { kind: 'rect', x: 0, y: 0, width, height }, fill });\n    commands.push({ kind: 'group', transform: viewToMat3(view), children: [...content] });\n    return lease.paint(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  useRedrawOnRestore(lease, requestRedraw);\n  useRedrawOnDensityChange(requestRedraw, dpr);\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":";;;;;;;;;;;AA0DA,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,GAERC,IAAQC,EAAkB,GAW1BC,IAAWC,QAVY;EAC3B,IAAMN,IAAKJ,EAAY;EACvB,IAAI,CAACI,GAAI,OAAO;EAChB,IAAMO,IAAU,OAAOC,KAAS,aAAaA,EAAK;GAAE;GAAO;EAAO,CAAC,IAAIA,GACjEC,IAA0B,CAAC,GAC3BC,IAAOC,KAAcC,EAAYD,GAAY;GAAE,GAAG;GAAG,GAAG;GAAG;GAAO;EAAO,CAAC;EAGhF,OAFID,KAAMD,EAAS,KAAK;GAAE,MAAM;GAAQ,MAAM;IAAE,MAAM;IAAQ,GAAG;IAAG,GAAG;IAAG;IAAO;GAAO;GAAG;EAAK,CAAC,GACjGA,EAAS,KAAK;GAAE,MAAM;GAAS,WAAWI,EAAWnB,CAAI;GAAG,UAAU,CAAC,GAAGa,CAAO;EAAE,CAAC,GAC7EJ,EAAM,MAAMH,GAAIS,GAAUf,GAAM;GAAE;GAAO;GAAQ;EAAI,CAAC;CAC/D,CACgC,GAC1B,EAAE,qBAAkBoB,EACxBf,QAAkBM,EAAS,QAAQ,GAAG,CAACA,CAAQ,CAAC,GAChD,EAAE,QAAQT,EAAY,CACxB,GAIMmB,IAAalB,EAAO,EAAK;CAgB/B,OAfAmB,QAAsB;EACpB,IAAID,EAAW,SAAS;GAAE,EAAc;GAAG;EAAQ;EAEnD,AADA,EAAW,UAAUV,EAAS,QAAQ,GACjCU,EAAW,WAASE,EAAc;CACzC,CAAC,GAEDC,EAAqBD,CAAa,GAClCE,EAAmBhB,GAAOc,CAAa,GACvCG,EAAyBH,GAAeI,CAAG,GAC3CC,EAAYC,GAAUN,CAAa,GAInCO,cAAsB;EAAE,EAAW,UAAU;CAAO,GAAG,CAAC,CAAC,GAElD,kBAAC,UAAD;EAAQ,KAAK1B;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"}

package/dist/canvas/NodeShape.js

@@ -1,16 +1,15 @@
 import { bumpNodeMemoGeneration as e, nodeMemo as t } from "../core/scene/nodeMemo.js";
-import { pathThroughPoseFrame as n } from "../core/geometry/poseFrame.js";
-import { hasSlop as r, slopForStrokeHit as i, widenSlop as a } from "../core/viewport/screenSlop.js";
-import { derivesPath as o } from "./nodeShapes/memo.js";
-import { DERIVED_PAINTER as s } from "./nodeShapes/derivedPainter.js";
-import { paintsPose as c } from "./nodeShapes/poseBox.js";
-import { IMAGE_PAINTER as l } from "./nodeShapes/imagePainter.js";
-import { PATH_PAINTER as u } from "./nodeShapes/pathPainter.js";
-import { RECT_FALLBACK_PAINTER as d } from "./nodeShapes/rectFallbackPainter.js";
-import { SHAPE_PAINTER as f } from "./nodeShapes/shapePainter.js";
-import { TEXT_PAINTER as p } from "./nodeShapes/textPainter.js";
-import { glyphGeneration as m } from "@weasel-js/font";
-import { pathContainsPoint as h, strokeHitTest as g } from "@weasel-js/geom";
+import { hasSlop as n, slopForStrokeHit as r, widenSlop as i } from "../core/viewport/screenSlop.js";
+import { derivesPath as a } from "./nodeShapes/memo.js";
+import { DERIVED_PAINTER as o } from "./nodeShapes/derivedPainter.js";
+import { paintsPose as s } from "./nodeShapes/poseBox.js";
+import { IMAGE_PAINTER as c } from "./nodeShapes/imagePainter.js";
+import { PATH_PAINTER as l } from "./nodeShapes/pathPainter.js";
+import { RECT_FALLBACK_PAINTER as u } from "./nodeShapes/rectFallbackPainter.js";
+import { SHAPE_PAINTER as d } from "./nodeShapes/shapePainter.js";
+import { TEXT_PAINTER as f } from "./nodeShapes/textPainter.js";
+import { pathContainsPoint as p, pathThroughPoseFrame as m, strokeHitTest as h } from "@weasel-js/geom";
+import { glyphGeneration as g } from "@weasel-js/font";
 //#region src/canvas/NodeShape.ts
 var _ = Object.freeze({
 	filled: !0,
@@ -33,7 +32,7 @@ function x(t, n = {}) {
 }
 var S = "shape:painter", C = "shape:painter:nonrect", w = "shape:painter:derived", T = "shape:painter:derived:nonrect", E = "shape:silhouette", D = "shape:silhouette:text";
 function O(e) {
-	let n = c(e.pose), r = o(e) ? n ? w : T : n ? S : C;
+	let n = s(e.pose), r = a(e) ? n ? w : T : n ? S : C;
 	return t(e, r, void 0, () => k(e));
 }
 function k(e) {
@@ -41,20 +40,20 @@ function k(e) {
 	for (let t of v.high) if (t.matches(e)) return t;
 	for (let t of v.normal) if (t.matches(e)) return t;
 }
-function A(e, r, i) {
-	let a = () => {
-		let t = O(e)?.silhouette?.(e, r, i) ?? null;
-		return t && n(t, r);
+function A(e, n, r) {
+	let i = () => {
+		let t = O(e)?.silhouette?.(e, n, r) ?? null;
+		return t && m(t, n);
 	};
-	if (i?.derivedPath != null) return a();
-	if (O(e) === p) {
-		let n = m(), i = t(e, D, r, () => ({
-			epoch: n,
-			path: a()
+	if (r?.derivedPath != null) return i();
+	if (O(e) === f) {
+		let r = g(), a = t(e, D, n, () => ({
+			epoch: r,
+			path: i()
 		}));
-		return i.epoch !== n && (i.epoch = n, i.path = a()), i.path;
+		return a.epoch !== r && (a.epoch = r, a.path = i()), a.path;
 	}
-	return t(e, E, r, a);
+	return t(e, E, n, i);
 }
 function j(e, t, n) {
 	return O(e)?.ink?.(e, t, n) ?? null;
@@ -62,19 +61,19 @@ function j(e, t, n) {
 function M(e, t, n) {
 	return O(e)?.bounds?.(e, t, n) ?? null;
 }
-function N(e, t, n, o, s = {}) {
+function N(e, t, a, o, s = {}) {
 	let c = A(e, t, { derivedPath: s.derivedPath });
 	if (c === null) return !0;
-	let l = j(e, t, { scale: s.scale }) ?? _, u = h(c, n, o);
+	let l = j(e, t, { scale: s.scale }) ?? _, u = p(c, a, o);
 	if (l.filled && u) return !0;
-	let d = a(s.tolerance, (u ? l.insetPx : l.outsetPx) ?? 0, s.scale), { extra: f, opts: p } = i(d), m = (u ? l.inset : l.outset) + f;
-	return (m > 0 || r(d)) && g(c, n, o, m, p);
+	let d = i(s.tolerance, (u ? l.insetPx : l.outsetPx) ?? 0, s.scale), { extra: f, opts: m } = r(d), g = (u ? l.inset : l.outset) + f;
+	return (g > 0 || n(d)) && h(c, a, o, g, m);
 }
 function P() {
 	return b(), [...v.high, ...v.normal];
 }
 function F() {
-	x(p), x(s), x(u), x(f), x(l), x(d);
+	x(f), x(o), x(l), x(d), x(c), x(u);
 }
 //#endregion
 export { _ as DEFAULT_INK, O as findNodeShape, M as findShapeBounds, j as findShapeInk, A as findShapeSilhouette, P as getNodeShapes, x as registerNodeShape, N as shapeCoversPoint };

package/dist/canvas/NodeShape.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeShape.js","names":["DEFAULT_INK","PAINTERS","builtInsRegistered","ensureBuiltIns","registerBuiltInShapePainters","registerNodeShape","list","opts","painter","bumpNodeMemoGeneration","i","PAINTER_SLOT","PAINTER_SLOT_NONRECT","PAINTER_SLOT_DERIVED","PAINTER_SLOT_DERIVED_NONRECT","SILHOUETTE_SLOT","TEXT_SILHOUETTE_SLOT","findNodeShape","rect","paintsPose","node","slot","derivesPath","nodeMemo","matchNodeShape","p","findShapeSilhouette","build","sil","pose","ctx","pathThroughPoseFrame","TEXT_PAINTER","epoch","glyphGeneration","held","findShapeInk","findShapeBounds","shapeCoversPoint","ink","inside","pathContainsPoint","x","y","slop","widenSlop","hit","slopForStrokeHit","reach","extra","hasSlop","strokeHitTest","getNodeShapes","DERIVED_PAINTER","PATH_PAINTER","SHAPE_PAINTER","IMAGE_PAINTER","RECT_FALLBACK_PAINTER"],"sources":["../../src/canvas/NodeShape.ts"],"sourcesContent":["/**\n * NodeShape — the **shape trait's** registry. Each trait of a node\n * (shape, routing, label, icon, affordances, …) is its own registry;\n * this one holds the per-kind `paint` + `silhouette` (and future\n * fields) used by `defaultDrawOne`, clipping, non-rect hit-testing,\n * and lasso/area-select.\n *\n * Teaching the kit about a new kind of shape goes through this registry\n * rather than by overriding `drawOne`. Overrides are still possible but\n * shouldn't be the default seam: most consumers want the same dispatch\n * logic, just extended with their own shape kinds (images, custom paths,\n * SVG fragments, etc.).\n *\n * Built-in entries (`kit:text`, `kit:path`, `kit:rect-fallback`) are\n * registered at module load. Consumer entries added via\n * `registerNodeShape` join the chain; the first entry whose\n * `matches` predicate returns true paints the node. Every built-in but\n * `kit:derived` additionally requires a rect-shaped pose — a scene whose\n * poses are some other shape matches none of them, and paints through a\n * consumer painter or not at all.\n *\n * Two priority tiers:\n *   - `'high'` — checked before all `'normal'` entries. Use this to\n *     override a kit built-in for a specific data shape (e.g. a custom\n *     text renderer that wins over `kit:text`).\n *   - `'normal'` (default) — appended after the built-ins.\n *\n * Within a tier, entries run in registration order. Each\n * `registerNodeShape` call returns a disposer that removes the\n * entry — useful for tests, for plugin lifecycles, and for swapping\n * implementations at runtime.\n *\n * See `docs/superpowers/specs/2026-05-24-node-traits-reframe-design.md`\n * for the trait taxonomy.\n */\nimport { glyphGeneration } from '@weasel-js/font';\nimport {\n  pathContainsPoint,\n  strokeHitTest,\n  type Path\n} from '@weasel-js/geom';\nimport { pathThroughPoseFrame } from 'core/geometry/poseFrame';\nimport { bumpNodeMemoGeneration, nodeMemo } from 'core/scene/nodeMemo';\nimport type { Node } from 'core/scene/types';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\nimport { hasSlop, slopForStrokeHit, widenSlop, type PickSlop } from 'core/viewport/screenSlop';\nimport type { View } from 'core/viewport/view';\nimport type { VertexColorChannel } from '../animation/colorRegistry';\nimport type { DrawCommand } from '../renderer';\nimport { DERIVED_PAINTER } from './nodeShapes/derivedPainter';\nimport { IMAGE_PAINTER } from './nodeShapes/imagePainter';\nimport { derivesPath } from './nodeShapes/memo';\nimport { PATH_PAINTER } from './nodeShapes/pathPainter';\nimport { paintsPose } from './nodeShapes/poseBox';\nimport { RECT_FALLBACK_PAINTER } from './nodeShapes/rectFallbackPainter';\nimport { SHAPE_PAINTER } from './nodeShapes/shapePainter';\nimport { TEXT_PAINTER } from './nodeShapes/textPainter';\n\n/** Optional per-call paint context, threaded through `defaultDrawOne`'s third\n *  argument. Lets a rendering entry point override ambient environment reads\n *  — the headless `renderSceneToPixels` path supplies its own bitmap resolver\n *  here so consumers reuse their own decode caches. Custom painters may\n *  ignore it entirely. */\nexport interface NodePaintCtx {\n  /** Override bitmap resolution for image nodes. When set it is authoritative:\n   *  the global `imageCache` is not consulted, and an `undefined` result\n   *  paints the deterministic grey placeholder outline (never the ambient\n   *  load-status error variant). */\n  resolveImage?: (node: Node<unknown, string, unknown>) => ImageBitmap | undefined;\n  /** Device pixels per world unit where this paint will land — the view's\n   *  scale times the device-pixel ratio. `defaultDrawOne` fills it from its\n   *  view when absent. Lets a painter size resolution-dependent work, such as\n   *  re-rasterizing an SVG image; one that has no such work ignores it. */\n  pixelScale?: number;\n  /** The node's derived path, resolved by the scene-aware `drawOne` wrapper\n   *  before painting: `paint` has no scene handle, and deriving needs the\n   *  dependencies' poses. **Absent** for a node that derives from nothing —\n   *  the wrapper hands such a node the caller's own ctx untouched. `null`\n   *  means the node derives but has nothing to draw. */\n  derivedPath?: Path | null;\n  /** A node's animated per-anchor colors: given the colors a painter would paint\n   *  on `channel`, the colors to paint instead. **Absent** when nothing animates\n   *  the node. The kit's path painters apply it; see `withColorOverrides`. */\n  vertexColors?: (\n    channel: VertexColorChannel,\n    base: readonly number[] | undefined,\n  ) => readonly number[] | undefined;\n}\n\n/**\n * Per-node draw function — the scene-slot `drawOne` signature shared by\n * `<SceneCanvas>`, `renderSceneToCanvas` and `renderSceneToPixels`, so a\n * consumer can reuse one callback across a main canvas and a detached view.\n *\n * Called once per node in the walk. Returned commands are world-space; the\n * caller applies the view transform at the group level. `ctx` is supplied by\n * the scene-aware wrappers — see {@link NodePaintCtx}.\n */\nexport type SceneViewDrawOne<TData, TLayer extends string, TPose> = (\n  node: Node<TData, TLayer, TPose>,\n  pose: TPose,\n  view: View,\n  ctx?: NodePaintCtx,\n) => DrawCommand[];\n\n/** A painter for one kind of node: which nodes it claims, and the draw\n *  commands it emits for them. Registering one is how a consumer teaches the\n *  default renderer to draw its own node kinds. */\nexport interface NodeShapeEntry<TData = unknown, TPose = unknown> {\n  /** Stable identifier — used for unregistration and debugging. Pick\n   *  something descriptive: `'kit:text'`, `'app:image'`, etc. */\n  id: string;\n  /** Returns true when this painter renders the node. The first matching\n   *  painter (`'high'` tier first, then `'normal'`) wins. The kit's own\n   *  painters also require a rect-shaped pose, since their geometry reads\n   *  `x`/`y`/`width`/`height` off it. */\n  matches(node: Node<TData, string, TPose>): boolean;\n  /** Emits the draw commands for the node's primary visual. `ctx` is an\n   *  optional per-call paint context (see `NodePaintCtx`); painters that\n   *  don't need it can keep a two-argument signature.\n   *\n   *  **The returned array belongs to the painter.** Callers must treat it as\n   *  immutable and copy before appending — a painter is free to memoize its\n   *  command list (`kit:shape` and `kit:path` do), and an in-place `push`\n   *  would grow that list on every frame. `defaultDrawOne` copies before\n   *  adding its label overlay for exactly this reason. */\n  paint(node: Node<TData, string, TPose>, pose: TPose, ctx?: NodePaintCtx): DrawCommand[];\n  /** Optional: derive the node's silhouette path from its pose.\n   *  Used by clipping (when the container has no explicit\n   *  `clipFromPose`), by non-rect hit-testing, and by lasso/area-select.\n   *  Painters whose visual has no meaningful closed silhouette (e.g. text)\n   *  leave this undefined. */\n  silhouette?(\n    node: Node<TData, string, TPose>,\n    pose: TPose,\n    ctx?: NodeSilhouetteCtx,\n  ): Path | null;\n  /** Optional: how the silhouette is inked — whether the interior is filled,\n   *  and how wide the outline is. Read by picking, so that an unfilled shape\n   *  is grabbable by its outline rather than by its empty middle.\n   *\n   *  This is declared separately from `paint` rather than read back off the\n   *  emitted draw commands because picking runs on every pointer move, and\n   *  `paint` is allowed to be expensive (`kit:text` lays out glyphs). Keep it\n   *  to cheap field reads.\n   *\n   *  Painters that leave it undefined are treated as {@link DEFAULT_INK} —\n   *  the pre-`ink` behavior, where the whole silhouette interior is grabbable\n   *  and the outline adds nothing.\n   *\n   *  `ctx.scale` carries the view scale so a `{ px }` stroke width resolves to\n   *  world units; without it a screen-pixel width is read as world units. */\n  ink?(node: Node<TData, string, TPose>, pose: TPose, ctx?: NodeInkCtx): NodeInk | null;\n  /** Optional: a box enclosing every pixel `paint` can put down for this node,\n   *  stroke, markers and miter spikes included, in the frame `paint` emits in\n   *  — before the pose's rotation is applied around it.\n   *\n   *  Culling reads it to skip `paint` for a node outside the view, so a box\n   *  that is too small makes the node vanish before it reaches the screen\n   *  edge. Leave it undefined, or return `null`, when no cheap conservative\n   *  answer exists (`kit:text` has none short of laying out its glyphs); such\n   *  a node is always painted. Same cheap-reads rule as `ink`. */\n  bounds?(node: Node<TData, string, TPose>, pose: TPose, ctx?: NodeInkCtx): Bounds | null;\n}\n\n/** How a painter inks its silhouette. See {@link NodeShapeEntry.ink}.\n *\n *  Reach is per-side because `align` decides which side the ribbon lands on:\n *  a centered stroke straddles the outline, `'inner'` puts nothing outside it,\n *  `'outer'` nothing inside. */\nexport interface NodeInk {\n  /** True when the silhouette's interior is painted, and so grabbable. */\n  filled: boolean;\n  /** How far the ink reaches outside the outline, world units. */\n  outset: number;\n  /** How far it reaches inside. */\n  inset: number;\n  /** Reach past `outset` measured on screen, in pixels — a `{ px }` stroke's,\n   *  which the renderer holds exact in every direction, so no one world\n   *  distance stands for it under non-uniform zoom. */\n  outsetPx?: number;\n  /** Reach past `inset`, likewise. */\n  insetPx?: number;\n}\n\n/** Per-call context for {@link NodeShapeEntry.silhouette}. */\nexport interface NodeSilhouetteCtx {\n  /** The node's derived path, resolved by the caller — a painter has no scene\n   *  handle and deriving needs the dependencies' poses. Same convention as\n   *  {@link NodePaintCtx.derivedPath}: absent for a node that derives from\n   *  nothing, `null` when it derives but has nothing to draw. */\n  derivedPath?: Path | null;\n}\n\n/** Per-call context for {@link NodeShapeEntry.ink}. */\nexport interface NodeInkCtx {\n  /** View scale, for resolving `{ px }` lengths to world units — the mean of\n   *  the two axes' under non-uniform zoom. */\n  scale?: number;\n  /** The smaller axis's scale, where it differs from `scale`. A box bounding\n   *  a `{ px }` stroke reads its reach here, where a pixel is the most world. */\n  leastScale?: number;\n}\n\n/** What a painter that declares no `ink` is assumed to do. */\nexport const DEFAULT_INK: Readonly<NodeInk> = Object.freeze({ filled: true, outset: 0, inset: 0 });\n\n/** Options for `registerNodeShape`. */\nexport interface RegisterNodeShapeOptions {\n  /** `'high'` puts the painter ahead of all normally-registered ones (so\n   *  it can win over a kit built-in). `'normal'` appends at the end. */\n  priority?: 'high' | 'normal';\n}\n\nconst PAINTERS: { high: NodeShapeEntry[]; normal: NodeShapeEntry[] } = {\n  high: [],\n  normal: [],\n};\n\n// The built-ins go in on first use, not at module load: a bundler may drop an\n// import kept only for its side effect, and the registry would come up empty.\nlet builtInsRegistered = false;\nfunction ensureBuiltIns(): void {\n  if (builtInsRegistered) return;\n  builtInsRegistered = true;\n  registerBuiltInShapePainters();\n}\n\n/** Register a shape painter. Returns a disposer that removes it. */\nexport function registerNodeShape<TData, TPose>(\n  painter: NodeShapeEntry<TData, TPose>,\n  opts: RegisterNodeShapeOptions = {},\n): () => void {\n  ensureBuiltIns();\n  const list = opts.priority === 'high' ? PAINTERS.high : PAINTERS.normal;\n  list.push(painter as NodeShapeEntry);\n  // The painter set is exactly the ambient state `findNodeShape` reads, and a\n  // memo keyed on the node alone cannot see it change. See `nodeMemo`.\n  bumpNodeMemoGeneration();\n  return () => {\n    const i = list.indexOf(painter as NodeShapeEntry);\n    if (i >= 0) list.splice(i, 1);\n    bumpNodeMemoGeneration();\n  };\n}\n\n// ─── Per-node shape memo ────────────────────────────────────────────────────\n\n/**\n * Slot names for the two things picking asks per node per pointer move: which\n * painter matches, and that painter's silhouette path. Both go through\n * {@link nodeMemo}, so they invalidate on `data` (and, for the silhouette,\n * `pose`) reference changes and on a painter registration.\n *\n * Worth memoizing because both are hot and neither is free. `findNodeShape`\n * runs every registered painter's `matches` predicate; `silhouette` *builds*\n * a path — `pathForShape` allocates a fresh `Float32Array` for every ellipse,\n * polygon and star. Picking runs on every pointermove through both the\n * hover-cursor pump and `classifyTarget`, so that's two rebuilds per move per\n * node under the pointer, and shape-accurate picking is now the default.\n *\n * Separate slots rather than one entry: they mostly invalidate together, but\n * not always, and a shared entry would force the stricter key on both.\n */\nconst PAINTER_SLOT = 'shape:painter';\nconst PAINTER_SLOT_NONRECT = 'shape:painter:nonrect';\nconst PAINTER_SLOT_DERIVED = 'shape:painter:derived';\nconst PAINTER_SLOT_DERIVED_NONRECT = 'shape:painter:derived:nonrect';\nconst SILHOUETTE_SLOT = 'shape:silhouette';\nconst TEXT_SILHOUETTE_SLOT = 'shape:silhouette:text';\n\n/** Find the painter that will render `node` — first match in priority\n *  order. Returns undefined if no painter (including the built-in\n *  fallback) accepts the node. */\nexport function findNodeShape<TData, TPose>(\n  node: Node<TData, string, TPose>,\n): NodeShapeEntry<TData, TPose> | undefined {\n  // Built-in painters also gate on pose shape and on whether the node derives\n  // its path, neither of which shows in `data`, so the key carries both.\n  const rect = paintsPose(node.pose);\n  const slot = derivesPath(node)\n    ? (rect ? PAINTER_SLOT_DERIVED : PAINTER_SLOT_DERIVED_NONRECT)\n    : (rect ? PAINTER_SLOT : PAINTER_SLOT_NONRECT);\n  return nodeMemo(node as { data?: unknown }, slot, undefined, () =>\n    matchNodeShape(node),\n  );\n}\n\nfunction matchNodeShape<TData, TPose>(\n  node: Node<TData, string, TPose>,\n): NodeShapeEntry<TData, TPose> | undefined {\n  ensureBuiltIns();\n  for (const p of PAINTERS.high) {\n    if (p.matches(node as Node<unknown, string, unknown>)) {\n      return p as NodeShapeEntry<TData, TPose>;\n    }\n  }\n  for (const p of PAINTERS.normal) {\n    if (p.matches(node as Node<unknown, string, unknown>)) {\n      return p as NodeShapeEntry<TData, TPose>;\n    }\n  }\n  return undefined;\n}\n\n/** Find the painter for `node` and ask it for the node's silhouette path,\n *  in **world** coords. Returns null if no painter matches, or the matching\n *  painter has no `silhouette` method, or the method returns null. Used by\n *  clipping, generic non-rect hit-testing and lasso/area-select — anywhere\n *  the kit needs the \"closed boundary\" of whatever this kind of node draws as.\n *\n *  Painters return their silhouette in the pose's local (unrotated) frame;\n *  this bakes the pose's frame (`poseFrameOf`: its rotation and `transform`)\n *  on top, so clips/area-select of a turned or skewed node use the boundary\n *  the renderer draws. (`paint()` is unaffected — the render wrap applies\n *  the frame, not the silhouette, so nothing is applied twice.) */\nexport function findShapeSilhouette<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  ctx?: NodeSilhouetteCtx,\n): Path | null {\n  const build = (): Path | null => {\n    const sil = findNodeShape(node)?.silhouette?.(node, pose, ctx) ?? null;\n    return sil && pathThroughPoseFrame(sil, pose);\n  };\n  // `SILHOUETTE_SLOT`'s key is (node, pose, data) and cannot see\n  // `ctx.derivedPath` — the same reason `kit:derived` skips `PAINT_SLOT`.\n  // Memoizing here would serve one caller's silhouette to a caller that\n  // passed a different path. Only an actual path skips it: a scene-backed\n  // source answers `null` for every ordinary node, and treating that as a\n  // reason to bypass would retire the memo for the whole scene.\n  if (ctx?.derivedPath != null) return build();\n  // Line boxes follow font metrics, and a face landing changes those with no\n  // change to the node, so the text entry is checked against the glyph epoch.\n  if (findNodeShape(node) === (TEXT_PAINTER as NodeShapeEntry<unknown, unknown>)) {\n    const epoch = glyphGeneration();\n    const held = nodeMemo(node as { data?: unknown }, TEXT_SILHOUETTE_SLOT, pose,\n      (): { epoch: number; path: Path | null } => ({ epoch, path: build() }));\n    if (held.epoch !== epoch) {\n      held.epoch = epoch;\n      held.path = build();\n    }\n    return held.path;\n  }\n  return nodeMemo(node as { data?: unknown }, SILHOUETTE_SLOT, pose, build);\n}\n\n/** Find the painter for `node` and ask how it inks its silhouette. Returns\n *  the painter's declared {@link NodeInk}, or `null` when no painter matches\n *  or it declares none — callers substitute {@link DEFAULT_INK}. */\nexport function findShapeInk<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  ctx?: NodeInkCtx,\n): NodeInk | null {\n  return findNodeShape(node)?.ink?.(node, pose, ctx) ?? null;\n}\n\n/** Find the painter for `node` and ask for the box its paint fits in. `null`\n *  when no painter matches, or the one that does cannot say — see\n *  {@link NodeShapeEntry.bounds}. */\nexport function findShapeBounds<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  ctx?: NodeInkCtx,\n): Bounds | null {\n  return findNodeShape(node)?.bounds?.(node, pose, ctx) ?? null;\n}\n\n/** Options for {@link shapeCoversPoint}. */\nexport interface ShapeCoversPointOptions {\n  /** Extra grab distance around the outline: **world** units as a number,\n   *  or screen pixels under a view scale (`{ px, scale }`), which is measured\n   *  on screen and so stays exact under non-uniform zoom.\n   *\n   *  Without slop a hairline is a mathematically zero-width target: the\n   *  stroke of a 1px outline is half a world unit wide at scale 1, which no\n   *  one can hit. Defaults to `0` so a caller that hasn't thought about the\n   *  view still gets exact geometry rather than a wrong guess. */\n  tolerance?: PickSlop;\n  /** View scale, passed to the painter's `ink`, and what a screen reach is\n   *  read at under a world `tolerance`. Defaults to 1. */\n  scale?: number;\n  /** The node's derived path — see {@link NodeSilhouetteCtx.derivedPath}.\n   *  Without it a derived node reports no silhouette and this answers `true`\n   *  everywhere, which degrades picking to the caller's AABB: for an edge,\n   *  a zero-sized pose. */\n  derivedPath?: Path | null;\n}\n\n/**\n * Does the shape `node` actually paints cover the world point?\n *\n * The pose rect says a node covers its whole bounding box. That is wrong for\n * everything that is not a rectangle: the concave notch of a star, the corner\n * outside an ellipse, the blank right half of a text box. This asks the\n * painter's silhouette instead, which is the same boundary used for clipping\n * and area-select, so \"what you can click\" and \"what is drawn\" answer\n * together.\n *\n * \"What is drawn\" includes the *ink*, not just the boundary. A shape whose\n * interior isn't filled — an outlined rect, a pencil stroke, a bare line — is\n * grabbable along its outline and not through its empty middle, which is the\n * opposite of what a fill test alone answers. The outline's grab width is the\n * stroke's half-width plus `tolerance`.\n *\n * A painter with no `silhouette`, or one that returns `null` for this node\n * (`kit:text` does, for a node with no non-blank lines), reports `true` —\n * \"no opinion\", leaving the caller's own AABB test as the answer. Callers\n * should keep that AABB test as a cheap pre-filter; this is the refinement,\n * not a replacement.\n *\n * Rotation is already baked by `findShapeSilhouette`, so the point is in\n * plain world coordinates.\n */\nexport function shapeCoversPoint<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  x: number,\n  y: number,\n  opts: ShapeCoversPointOptions = {},\n): boolean {\n  const sil = findShapeSilhouette(node, pose, { derivedPath: opts.derivedPath });\n  if (sil === null) return true;\n  const ink = findShapeInk(node, pose, { scale: opts.scale }) ?? DEFAULT_INK;\n  const inside = pathContainsPoint(sil, x, y);\n  if (ink.filled && inside) return true;\n  // The stroke reaches a different distance on each side, so which side the\n  // point is on picks the reach. `tolerance` widens it to something a pointer\n  // can actually land on, and also makes a filled shape grabbable a few pixels\n  // outside its edge — which is what every editor does and what makes\n  // edge-dragging feel possible.\n  const slop = widenSlop(opts.tolerance, (inside ? ink.insetPx : ink.outsetPx) ?? 0, opts.scale);\n  const { extra, opts: hit } = slopForStrokeHit(slop);\n  const reach = (inside ? ink.inset : ink.outset) + extra;\n  return (reach > 0 || hasSlop(slop)) && strokeHitTest(sil, x, y, reach, hit);\n}\n\n/** Snapshot of the current painters in evaluation order — `'high'` tier\n *  first, then `'normal'`. Useful for debugging which painter handles a\n *  given node. */\nexport function getNodeShapes(): readonly NodeShapeEntry[] {\n  ensureBuiltIns();\n  return [...PAINTERS.high, ...PAINTERS.normal];\n}\n\n/** Test-only: clear the registry and re-register the built-ins. */\nexport function _resetShapePaintersForTests(): void {\n  PAINTERS.high.length = 0;\n  PAINTERS.normal.length = 0;\n  builtInsRegistered = false;\n  ensureBuiltIns();\n  // Swapping the painter set out from under a node invalidates anything\n  // memoized against the old one. (`registerNodeShape` already bumps, but the\n  // clearing above happens without one.)\n  bumpNodeMemoGeneration();\n}\n\n// ─── Built-in painters ─────────────────────────────────────────────────\n\nfunction registerBuiltInShapePainters(): void {\n  registerNodeShape(TEXT_PAINTER);\n  // Ahead of path/shape/image: a derived node whose `data` also carries a\n  // `path`, `shape` or `image` means the derived path, and those three match\n  // on the presence of the field alone.\n  registerNodeShape(DERIVED_PAINTER);\n  registerNodeShape(PATH_PAINTER);\n  registerNodeShape(SHAPE_PAINTER);\n  registerNodeShape(IMAGE_PAINTER);\n  registerNodeShape(RECT_FALLBACK_PAINTER);\n}\n"],"mappings":"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"}
+{"version":3,"file":"NodeShape.js","names":["DEFAULT_INK","PAINTERS","builtInsRegistered","ensureBuiltIns","registerBuiltInShapePainters","registerNodeShape","list","opts","painter","bumpNodeMemoGeneration","i","PAINTER_SLOT","PAINTER_SLOT_NONRECT","PAINTER_SLOT_DERIVED","PAINTER_SLOT_DERIVED_NONRECT","SILHOUETTE_SLOT","TEXT_SILHOUETTE_SLOT","findNodeShape","rect","paintsPose","node","slot","derivesPath","nodeMemo","matchNodeShape","p","findShapeSilhouette","build","sil","pose","ctx","pathThroughPoseFrame","TEXT_PAINTER","epoch","glyphGeneration","held","findShapeInk","findShapeBounds","shapeCoversPoint","ink","inside","pathContainsPoint","x","y","slop","widenSlop","hit","slopForStrokeHit","reach","extra","hasSlop","strokeHitTest","getNodeShapes","DERIVED_PAINTER","PATH_PAINTER","SHAPE_PAINTER","IMAGE_PAINTER","RECT_FALLBACK_PAINTER"],"sources":["../../src/canvas/NodeShape.ts"],"sourcesContent":["/**\n * NodeShape — the **shape trait's** registry: the per-kind `paint` + `silhouette` used by\n * `defaultDrawOne`, clipping, non-rect hit-testing, and lasso/area-select. Teaching the kit\n * about a new kind of shape goes through this registry rather than by overriding `drawOne`.\n *\n * The first entry whose `matches` predicate returns true paints the node: `'high'` entries\n * first, then the built-ins, then `'normal'` ones, in registration order within a tier. Every\n * built-in but `kit:derived` additionally requires a rect-shaped pose — a scene whose poses are\n * some other shape matches none of them, and paints through a consumer painter or not at all.\n */\nimport { glyphGeneration } from '@weasel-js/font';\nimport {\n  pathContainsPoint,\n  strokeHitTest,\n  type Path\n} from '@weasel-js/geom';\nimport { pathThroughPoseFrame } from '@weasel-js/geom';\nimport { bumpNodeMemoGeneration, nodeMemo } from 'core/scene/nodeMemo';\nimport type { Node } from 'core/scene/types';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\nimport { hasSlop, slopForStrokeHit, widenSlop, type PickSlop } from 'core/viewport/screenSlop';\nimport type { View } from 'core/viewport/view';\nimport type { VertexColorChannel } from '@weasel-js/animator';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport { DERIVED_PAINTER } from './nodeShapes/derivedPainter';\nimport { IMAGE_PAINTER } from './nodeShapes/imagePainter';\nimport { derivesPath } from './nodeShapes/memo';\nimport { PATH_PAINTER } from './nodeShapes/pathPainter';\nimport { paintsPose } from './nodeShapes/poseBox';\nimport { RECT_FALLBACK_PAINTER } from './nodeShapes/rectFallbackPainter';\nimport { SHAPE_PAINTER } from './nodeShapes/shapePainter';\nimport { TEXT_PAINTER } from './nodeShapes/textPainter';\n\n/** Optional per-call paint context, threaded through `defaultDrawOne`'s third argument. Lets\n *  a rendering entry point override ambient environment reads; custom painters may ignore it\n *  entirely. */\nexport interface NodePaintCtx {\n  /** Override bitmap resolution for image nodes. When set it is authoritative:\n   *  the global `imageCache` is not consulted, and an `undefined` result\n   *  paints the deterministic grey placeholder outline (never the ambient\n   *  load-status error variant). */\n  resolveImage?: (node: Node<unknown, string, unknown>) => ImageBitmap | undefined;\n  /** Device pixels per world unit where this paint will land — the view's\n   *  scale times the device-pixel ratio. `defaultDrawOne` fills it from its\n   *  view when absent. Lets a painter size resolution-dependent work, such as\n   *  re-rasterizing an SVG image; one that has no such work ignores it. */\n  pixelScale?: number;\n  /** The node's derived path, resolved before painting by the `drawOne`\n   *  wrapper of whichever scene or adapter is drawn: `paint` has no handle on\n   *  either, and deriving needs the dependencies' poses. **Absent** for a node that derives from nothing —\n   *  the wrapper hands such a node the caller's own ctx untouched. `null`\n   *  means the node derives but has nothing to draw. */\n  derivedPath?: Path | null;\n  /** A node's animated per-anchor colors: given the colors a painter would paint\n   *  on `channel`, the colors to paint instead. **Absent** when nothing animates\n   *  the node. The kit's path painters apply it; see `withColorOverrides`. */\n  vertexColors?: (\n    channel: VertexColorChannel,\n    base: readonly number[] | undefined,\n  ) => readonly number[] | undefined;\n}\n\n/**\n * Per-node draw function — the scene-slot `drawOne` signature shared by\n * `<SceneCanvas>`, `renderSceneToCanvas` and `renderSceneToPixels`, so a\n * consumer can reuse one callback across a main canvas and a detached view.\n *\n * Called once per node in the walk. Returned commands are world-space; the\n * caller applies the view transform at the group level. `ctx` is supplied by\n * the scene-aware wrappers — see {@link NodePaintCtx}.\n */\nexport type SceneViewDrawOne<TData, TLayer extends string, TPose> = (\n  node: Node<TData, TLayer, TPose>,\n  pose: TPose,\n  view: View,\n  ctx?: NodePaintCtx,\n) => DrawCommand[];\n\n/** A painter for one kind of node: which nodes it claims, and the draw\n *  commands it emits for them. Registering one is how a consumer teaches the\n *  default renderer to draw its own node kinds. */\nexport interface NodeShapeEntry<TData = unknown, TPose = unknown> {\n  /** Stable identifier — used for unregistration and debugging. Pick\n   *  something descriptive: `'kit:text'`, `'app:image'`, etc. */\n  id: string;\n  /** Returns true when this painter renders the node. The first matching\n   *  painter (`'high'` tier first, then `'normal'`) wins. The kit's own\n   *  painters also require a rect-shaped pose, since their geometry reads\n   *  `x`/`y`/`width`/`height` off it. */\n  matches(node: Node<TData, string, TPose>): boolean;\n  /** Emits the draw commands for the node's primary visual.\n   *\n   *  **The returned array belongs to the painter.** Callers must treat it as\n   *  immutable and copy before appending — a painter is free to memoize its\n   *  command list, and an in-place `push` would grow that list on every frame. */\n  paint(node: Node<TData, string, TPose>, pose: TPose, ctx?: NodePaintCtx): DrawCommand[];\n  /** Optional: the node's silhouette path from its pose. Used by clipping (when the\n   *  container has no explicit `clipFromPose`), by non-rect hit-testing, and by\n   *  lasso/area-select. Painters whose visual has no meaningful closed silhouette\n   *  leave this undefined. */\n  silhouette?(\n    node: Node<TData, string, TPose>,\n    pose: TPose,\n    ctx?: NodeSilhouetteCtx,\n  ): Path | null;\n  /** Optional: how the silhouette is inked — whether the interior is filled,\n   *  and how wide the outline is. Read by picking, so that an unfilled shape\n   *  is grabbable by its outline rather than by its empty middle.\n   *\n   *  Picking runs on every pointer move, so keep it to cheap field reads.\n   *  Painters that leave it undefined are treated as {@link DEFAULT_INK}: the\n   *  whole silhouette interior is grabbable and the outline adds nothing.\n   *\n   *  `ctx.scale` carries the view scale so a `{ px }` stroke width resolves to\n   *  world units; without it a screen-pixel width is read as world units. */\n  ink?(node: Node<TData, string, TPose>, pose: TPose, ctx?: NodeInkCtx): NodeInk | null;\n  /** Optional: a box enclosing every pixel `paint` can put down for this node,\n   *  stroke, markers and miter spikes included, in the frame `paint` emits in\n   *  — before the pose's rotation is applied around it.\n   *\n   *  Culling reads it to skip `paint` for a node outside the view, so a box\n   *  that is too small makes the node vanish before it reaches the screen\n   *  edge. Leave it undefined, or return `null`, when no cheap conservative\n   *  answer exists (`kit:text` has none short of laying out its glyphs); such\n   *  a node is always painted. Same cheap-reads rule as `ink`. */\n  bounds?(node: Node<TData, string, TPose>, pose: TPose, ctx?: NodeInkCtx): Bounds | null;\n}\n\n/** How a painter inks its silhouette. See {@link NodeShapeEntry.ink}.\n *\n *  Reach is per-side because `align` decides which side the ribbon lands on:\n *  a centered stroke straddles the outline, `'inner'` puts nothing outside it,\n *  `'outer'` nothing inside. */\nexport interface NodeInk {\n  /** True when the silhouette's interior is painted, and so grabbable. */\n  filled: boolean;\n  /** How far the ink reaches outside the outline, world units. */\n  outset: number;\n  /** How far it reaches inside. */\n  inset: number;\n  /** Reach past `outset` measured on screen, in pixels — a `{ px }` stroke's,\n   *  which the renderer holds exact in every direction, so no one world\n   *  distance stands for it under non-uniform zoom. */\n  outsetPx?: number;\n  /** Reach past `inset`, likewise. */\n  insetPx?: number;\n}\n\n/** Per-call context for {@link NodeShapeEntry.silhouette}. */\nexport interface NodeSilhouetteCtx {\n  /** The node's derived path, resolved by the caller — a painter has no scene\n   *  handle and deriving needs the dependencies' poses. Same convention as\n   *  {@link NodePaintCtx.derivedPath}: absent for a node that derives from\n   *  nothing, `null` when it derives but has nothing to draw. */\n  derivedPath?: Path | null;\n}\n\n/** Per-call context for {@link NodeShapeEntry.ink}. */\nexport interface NodeInkCtx {\n  /** View scale, for resolving `{ px }` lengths to world units — the mean of\n   *  the two axes' under non-uniform zoom. */\n  scale?: number;\n  /** The smaller axis's scale, where it differs from `scale`. A box bounding\n   *  a `{ px }` stroke reads its reach here, where a pixel is the most world. */\n  leastScale?: number;\n}\n\n/** What a painter that declares no `ink` is assumed to do. */\nexport const DEFAULT_INK: Readonly<NodeInk> = Object.freeze({ filled: true, outset: 0, inset: 0 });\n\n/** Options for `registerNodeShape`. */\nexport interface RegisterNodeShapeOptions {\n  /** `'high'` puts the painter ahead of all normally-registered ones (so\n   *  it can win over a kit built-in). `'normal'` appends at the end. */\n  priority?: 'high' | 'normal';\n}\n\nconst PAINTERS: { high: NodeShapeEntry[]; normal: NodeShapeEntry[] } = {\n  high: [],\n  normal: [],\n};\n\n// The built-ins go in on first use, not at module load: a bundler may drop an\n// import kept only for its side effect, and the registry would come up empty.\nlet builtInsRegistered = false;\nfunction ensureBuiltIns(): void {\n  if (builtInsRegistered) return;\n  builtInsRegistered = true;\n  registerBuiltInShapePainters();\n}\n\n/** Register a shape painter. Returns a disposer that removes it. */\nexport function registerNodeShape<TData, TPose>(\n  painter: NodeShapeEntry<TData, TPose>,\n  opts: RegisterNodeShapeOptions = {},\n): () => void {\n  ensureBuiltIns();\n  const list = opts.priority === 'high' ? PAINTERS.high : PAINTERS.normal;\n  list.push(painter as NodeShapeEntry);\n  // The painter set is exactly the ambient state `findNodeShape` reads, and a\n  // memo keyed on the node alone cannot see it change. See `nodeMemo`.\n  bumpNodeMemoGeneration();\n  return () => {\n    const i = list.indexOf(painter as NodeShapeEntry);\n    if (i >= 0) list.splice(i, 1);\n    bumpNodeMemoGeneration();\n  };\n}\n\n/**\n * Slot names for what picking asks per node per pointer move: which painter matches, and that\n * painter's silhouette path. Both go through {@link nodeMemo}, so they invalidate on `data`\n * (and, for the silhouette, `pose`) reference changes and on a painter registration.\n *\n * Separate slots rather than one entry: they mostly invalidate together, but not always, and a\n * shared entry would force the stricter key on both.\n */\nconst PAINTER_SLOT = 'shape:painter';\nconst PAINTER_SLOT_NONRECT = 'shape:painter:nonrect';\nconst PAINTER_SLOT_DERIVED = 'shape:painter:derived';\nconst PAINTER_SLOT_DERIVED_NONRECT = 'shape:painter:derived:nonrect';\nconst SILHOUETTE_SLOT = 'shape:silhouette';\nconst TEXT_SILHOUETTE_SLOT = 'shape:silhouette:text';\n\n/** The painter that will render `node` — first match in priority order — or undefined if\n *  none accepts it. */\nexport function findNodeShape<TData, TPose>(\n  node: Node<TData, string, TPose>,\n): NodeShapeEntry<TData, TPose> | undefined {\n  // Built-in painters also gate on pose shape and on whether the node derives\n  // its path, neither of which shows in `data`, so the key carries both.\n  const rect = paintsPose(node.pose);\n  const slot = derivesPath(node)\n    ? (rect ? PAINTER_SLOT_DERIVED : PAINTER_SLOT_DERIVED_NONRECT)\n    : (rect ? PAINTER_SLOT : PAINTER_SLOT_NONRECT);\n  return nodeMemo(node as { data?: unknown }, slot, undefined, () =>\n    matchNodeShape(node),\n  );\n}\n\nfunction matchNodeShape<TData, TPose>(\n  node: Node<TData, string, TPose>,\n): NodeShapeEntry<TData, TPose> | undefined {\n  ensureBuiltIns();\n  for (const p of PAINTERS.high) {\n    if (p.matches(node as Node<unknown, string, unknown>)) {\n      return p as NodeShapeEntry<TData, TPose>;\n    }\n  }\n  for (const p of PAINTERS.normal) {\n    if (p.matches(node as Node<unknown, string, unknown>)) {\n      return p as NodeShapeEntry<TData, TPose>;\n    }\n  }\n  return undefined;\n}\n\n/** The silhouette path of `node`, in **world** coords, or null if no painter matches or the\n *  matching painter has none.\n *\n *  Painters return their silhouette in the pose's local (unrotated) frame;\n *  this bakes the pose's frame (`poseFrameOf`: its rotation and `transform`)\n *  on top, so clips/area-select of a turned or skewed node use the boundary\n *  the renderer draws. */\nexport function findShapeSilhouette<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  ctx?: NodeSilhouetteCtx,\n): Path | null {\n  const build = (): Path | null => {\n    const sil = findNodeShape(node)?.silhouette?.(node, pose, ctx) ?? null;\n    return sil && pathThroughPoseFrame(sil, pose);\n  };\n  // `SILHOUETTE_SLOT`'s key is (node, pose, data) and cannot see\n  // `ctx.derivedPath` — the same reason `kit:derived` skips `PAINT_SLOT`.\n  // Memoizing here would serve one caller's silhouette to a caller that\n  // passed a different path. Only an actual path skips it: a scene-backed\n  // source answers `null` for every ordinary node, and treating that as a\n  // reason to bypass would retire the memo for the whole scene.\n  if (ctx?.derivedPath != null) return build();\n  // Line boxes follow font metrics, and a face landing changes those with no\n  // change to the node, so the text entry is checked against the glyph epoch.\n  if (findNodeShape(node) === (TEXT_PAINTER as NodeShapeEntry<unknown, unknown>)) {\n    const epoch = glyphGeneration();\n    const held = nodeMemo(node as { data?: unknown }, TEXT_SILHOUETTE_SLOT, pose,\n      (): { epoch: number; path: Path | null } => ({ epoch, path: build() }));\n    if (held.epoch !== epoch) {\n      held.epoch = epoch;\n      held.path = build();\n    }\n    return held.path;\n  }\n  return nodeMemo(node as { data?: unknown }, SILHOUETTE_SLOT, pose, build);\n}\n\n/** Find the painter for `node` and ask how it inks its silhouette. Returns\n *  the painter's declared {@link NodeInk}, or `null` when no painter matches\n *  or it declares none — callers substitute {@link DEFAULT_INK}. */\nexport function findShapeInk<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  ctx?: NodeInkCtx,\n): NodeInk | null {\n  return findNodeShape(node)?.ink?.(node, pose, ctx) ?? null;\n}\n\n/** Find the painter for `node` and ask for the box its paint fits in. `null`\n *  when no painter matches, or the one that does cannot say — see\n *  {@link NodeShapeEntry.bounds}. */\nexport function findShapeBounds<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  ctx?: NodeInkCtx,\n): Bounds | null {\n  return findNodeShape(node)?.bounds?.(node, pose, ctx) ?? null;\n}\n\n/** Options for {@link shapeCoversPoint}. */\nexport interface ShapeCoversPointOptions {\n  /** Extra grab distance around the outline: **world** units as a number,\n   *  or screen pixels under a view scale (`{ px, scale }`), which is measured\n   *  on screen and so stays exact under non-uniform zoom. Defaults to `0`,\n   *  where a hairline is too thin a target to hit. */\n  tolerance?: PickSlop;\n  /** View scale, passed to the painter's `ink`, and what a screen reach is\n   *  read at under a world `tolerance`. Defaults to 1. */\n  scale?: number;\n  /** The node's derived path — see {@link NodeSilhouetteCtx.derivedPath}.\n   *  Without it a derived node reports no silhouette and this answers `true`\n   *  everywhere, which degrades picking to the caller's AABB: for an edge,\n   *  a zero-sized pose. */\n  derivedPath?: Path | null;\n}\n\n/**\n * Does the shape `node` actually paints cover the world point? Asks the painter's silhouette,\n * the same boundary used for clipping and area-select, rather than the pose rect.\n *\n * The ink counts too: a shape whose interior isn't filled is grabbable along its outline and\n * not through its empty middle. The outline's grab width is the stroke's half-width plus\n * `tolerance`.\n *\n * A painter with no `silhouette`, or one that returns `null` for this node, reports `true` —\n * \"no opinion\" — so callers should keep their own AABB test as a pre-filter.\n */\nexport function shapeCoversPoint<TData, TPose>(\n  node: Node<TData, string, TPose>,\n  pose: TPose,\n  x: number,\n  y: number,\n  opts: ShapeCoversPointOptions = {},\n): boolean {\n  const sil = findShapeSilhouette(node, pose, { derivedPath: opts.derivedPath });\n  if (sil === null) return true;\n  const ink = findShapeInk(node, pose, { scale: opts.scale }) ?? DEFAULT_INK;\n  const inside = pathContainsPoint(sil, x, y);\n  if (ink.filled && inside) return true;\n  // The stroke reaches a different distance on each side, so which side the point is on\n  // picks the reach. `tolerance` also makes a filled shape grabbable a few pixels outside\n  // its edge.\n  const slop = widenSlop(opts.tolerance, (inside ? ink.insetPx : ink.outsetPx) ?? 0, opts.scale);\n  const { extra, opts: hit } = slopForStrokeHit(slop);\n  const reach = (inside ? ink.inset : ink.outset) + extra;\n  return (reach > 0 || hasSlop(slop)) && strokeHitTest(sil, x, y, reach, hit);\n}\n\n/** The current painters in evaluation order — `'high'` tier first, then `'normal'`. */\nexport function getNodeShapes(): readonly NodeShapeEntry[] {\n  ensureBuiltIns();\n  return [...PAINTERS.high, ...PAINTERS.normal];\n}\n\n/** Test-only: clear the registry and re-register the built-ins. */\nexport function _resetShapePaintersForTests(): void {\n  PAINTERS.high.length = 0;\n  PAINTERS.normal.length = 0;\n  builtInsRegistered = false;\n  ensureBuiltIns();\n  // `registerNodeShape` already bumps, but the clearing above happens without one.\n  bumpNodeMemoGeneration();\n}\n\nfunction registerBuiltInShapePainters(): void {\n  registerNodeShape(TEXT_PAINTER);\n  // Ahead of path/shape/image: a derived node whose `data` also carries a\n  // `path`, `shape` or `image` means the derived path, and those three match\n  // on the presence of the field alone.\n  registerNodeShape(DERIVED_PAINTER);\n  registerNodeShape(PATH_PAINTER);\n  registerNodeShape(SHAPE_PAINTER);\n  registerNodeShape(IMAGE_PAINTER);\n  registerNodeShape(RECT_FALLBACK_PAINTER);\n}\n"],"mappings":"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"}

package/dist/canvas/PickHud.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickHud.js","names":["s","hud_module_default","PickHud","toWorldRef","useLatest","toWorld","state","setState","useState","useHostAnchor","anchorRef","canvasRef","offset","useEffect","onMove","canvas","view","viewRef","rect","e","worldX","worldY","clientToWorld","ids","pickEvery","best","pickBest","style","id"],"sources":["../../src/canvas/PickHud.tsx"],"sourcesContent":["/**\n * Dev HUD listing the ids returned by `pickEvery(world)` under the cursor.\n *\n * Anchors to the canvas's top-right corner like `CursorCoordsHud`, offset\n * downward so it sits just below that HUD. Updates on `document`\n * pointermove. Refreshes its position on scroll / resize so it tracks the\n * canvas through layout changes.\n */\nimport { useEffect, useState } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld } from 'core/viewport/clientToWorld';\nimport { useHostAnchor } from './useHostAnchor';\nimport s from './hud.module.css';\n\n/** Props for `<PickHud>`. */\nexport interface PickHudProps {\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  /** World-space hit-test. Same shape as `useSelectTool`'s `pickEvery`. */\n  pickEvery: (worldX: number, worldY: number) => readonly string[];\n  /** Optional single-best resolver — the id this point would select on a\n   *  bare click. When supplied, that id is rendered bold in the list. */\n  pickBest?: (worldX: number, worldY: number) => string | null;\n  /** Inset from the canvas's top-right corner. Default `{ top: 76, right: 8 }`\n   *  so the HUD clears `CursorCoordsHud` (~64 px tall in its 3-line form). */\n  offset?: { top?: number; right?: number };\n}\n\ninterface HudState {\n  ids: readonly string[];\n  best: string | null;\n  inCanvas: boolean;\n}\n\n/** Debug overlay listing every node under the pointer, with the one a click\n *  would actually select shown in bold. */\nexport function PickHud({ canvasRef, anchorRef, viewRef, toWorld, pickEvery, pickBest, offset }: PickHudProps) {\n  const toWorldRef = useLatest(toWorld);\n  const [state, setState] = useState<HudState>({\n    ids: [], best: null, inCanvas: false,\n  });\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 ?? 76 },\n    },\n  );\n\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      const canvas = canvasRef.current;\n      const view = viewRef.current;\n      if (!canvas || !view) {\n        setState({ ids: [], best: 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      if (!inCanvas) {\n        setState({ ids: [], best: null, inCanvas: false });\n        return;\n      }\n      const [worldX, worldY] = toWorldRef.current?.(e.clientX, e.clientY)\n        ?? clientToWorld(e.clientX, e.clientY, rect, view);\n      let ids: readonly string[] = [];\n      try {\n        ids = pickEvery(worldX, worldY);\n      } catch {\n        ids = [];\n      }\n      let best: string | null = null;\n      if (pickBest) {\n        try { best = pickBest(worldX, worldY); } catch { best = null; }\n      }\n      setState({ ids, best, inCanvas: true });\n    };\n\n    document.addEventListener('pointermove', onMove);\n\n    return () => {\n      document.removeEventListener('pointermove', onMove);\n    };\n  }, [canvasRef, viewRef, pickEvery, pickBest, toWorldRef]);\n\n  if (!style) return null;\n\n  return (\n    <div ref={ref} className={`${s.hud} ${s.sized}`} style={style}>\n      <div className={`${s.header} ${s.muted}`}>pickEvery ({state.ids.length})</div>\n      {state.ids.length === 0 ? (\n        <div className={s.absent}>{state.inCanvas ? '—' : 'off-canvas'}</div>\n      ) : (\n        <ul className={s.list}>\n          {/* pickEvery returns back-to-front (topmost last). Display top-first. */}\n          {state.ids.slice().reverse().map((id) => (\n            <li\n              key={id}\n              className={id === state.best ? `${s.item} ${s.itemBest}` : s.item}\n            >\n              {id}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA6CA,SAAgBE,EAAQ,EAAE,cAAW,cAAW,YAAS,YAAS,cAAW,aAAU,aAAwB;CAC7G,IAAMC,IAAaC,EAAUC,CAAO,GAC9B,CAACC,GAAOC,KAAYC,EAAmB;EAC3C,KAAK,CAAC;EAAG,MAAM;EAAM,UAAU;CACjC,CAAC,GACK,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;EAAG;CACxD,CACF;CA0CA,OAxCAC,QAAgB;EACd,IAAMC,KAAU,MAAoB;GAClC,IAAMC,IAASJ,EAAU,SACnBK,IAAOC,EAAQ;GACrB,IAAI,CAACF,KAAU,CAACC,GAAM;IACpB,EAAS;KAAE,KAAK,CAAC;KAAG,MAAM;KAAM,UAAU;IAAM,CAAC;IACjD;GACF;GACA,IAAME,IAAOH,EAAO,sBAAsB;GAI1C,IAAI,EAFFI,EAAE,WAAWD,EAAK,QAAQC,EAAE,WAAWD,EAAK,SAC5CC,EAAE,WAAWD,EAAK,OAAQC,EAAE,WAAWD,EAAK,SAC/B;IACb,EAAS;KAAE,KAAK,CAAC;KAAG,MAAM;KAAM,UAAU;IAAM,CAAC;IACjD;GACF;GACA,IAAM,CAACE,GAAQC,KAAUlB,EAAW,UAAUgB,EAAE,SAASA,EAAE,OAAO,KAC7DG,EAAcH,EAAE,SAASA,EAAE,SAASD,GAAMF,CAAI,GAC/CO,IAAyB,CAAC;GAC9B,IAAI;IACF,IAAMC,EAAUJ,GAAQC,CAAM;GAChC,QAAQ;IACN,IAAM,CAAC;GACT;GACA,IAAII,IAAsB;GAC1B,IAAIC,GACF,IAAI;IAAE,IAAOA,EAASN,GAAQC,CAAM;GAAG,QAAQ;IAAE,IAAO;GAAM;GAEhE,EAAS;IAAE;IAAK;IAAM,UAAU;GAAK,CAAC;EACxC;EAIA,OAFA,SAAS,iBAAiB,eAAeP,CAAM,SAElC;GACX,SAAS,oBAAoB,eAAeA,CAAM;EACpD;CACF,GAAG;EAACH;EAAWM;EAASO;EAAWE;EAAUvB;CAAU,CAAC,GAEnDwB,IAGH,kBAAC,OAAD;EAAU;EAAK,WAAW,GAAG3B,EAAE,IAAI,GAAGA,EAAE;EAAgB;EAAxD,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW,GAAGA,EAAE,OAAO,GAAGA,EAAE;GAAjC,UAAA;IAA0C;IAAYM,EAAM,IAAI;IAAO;GAAM;EAC5E,CAAA,GAAAA,EAAM,IAAI,WAAW,IACpB,kBAAC,OAAD;GAAK,WAAWN,EAAE;GAAS,UAAAM,EAAM,WAAW,MAAM;EAAkB,CAAA,IAEpE,kBAAC,MAAD;GAAI,WAAWN,EAAE;GAEd,UAAAM,EAAM,IAAI,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,MAChC,kBAAC,MAAD;IAEE,WAAWsB,MAAOtB,EAAM,OAAO,GAAGN,EAAE,KAAK,GAAGA,EAAE,aAAaA,EAAE;IAE5D,UAAA4B;GACC,GAJGA,CAIH,CACL;EACC,CAAA,CAEH;MApBY;AAsBrB"}
+{"version":3,"file":"PickHud.js","names":["s","hud_module_default","PickHud","toWorldRef","useLatest","toWorld","state","setState","useState","useHostAnchor","anchorRef","canvasRef","offset","useEffect","onMove","canvas","view","viewRef","rect","e","worldX","worldY","clientToWorld","ids","pickEvery","best","pickBest","style","id"],"sources":["../../src/canvas/PickHud.tsx"],"sourcesContent":["/// <reference path=\"../css-modules.d.ts\" />\n/**\n * Dev HUD listing the ids returned by `pickEvery(world)` under the cursor.\n *\n * Anchors to the canvas's top-right corner like `CursorCoordsHud`, offset\n * downward so it sits just below that HUD. Updates on `document`\n * pointermove. Refreshes its position on scroll / resize so it tracks the\n * canvas through layout changes.\n */\nimport { useEffect, useState } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { View } from 'core/viewport/view';\nimport { clientToWorld } from 'core/viewport/clientToWorld';\nimport { useHostAnchor } from './useHostAnchor';\nimport s from './hud.module.css';\n\n/** Props for `<PickHud>`. */\nexport interface PickHudProps {\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  /** World-space hit-test. Same shape as `useSelectTool`'s `pickEvery`. */\n  pickEvery: (worldX: number, worldY: number) => readonly string[];\n  /** Optional single-best resolver — the id this point would select on a\n   *  bare click. When supplied, that id is rendered bold in the list. */\n  pickBest?: (worldX: number, worldY: number) => string | null;\n  /** Inset from the canvas's top-right corner. Default `{ top: 76, right: 8 }`\n   *  so the HUD clears `CursorCoordsHud` (~64 px tall in its 3-line form). */\n  offset?: { top?: number; right?: number };\n}\n\ninterface HudState {\n  ids: readonly string[];\n  best: string | null;\n  inCanvas: boolean;\n}\n\n/** Debug overlay listing every node under the pointer, with the one a click\n *  would actually select shown in bold. */\nexport function PickHud({ canvasRef, anchorRef, viewRef, toWorld, pickEvery, pickBest, offset }: PickHudProps) {\n  const toWorldRef = useLatest(toWorld);\n  const [state, setState] = useState<HudState>({\n    ids: [], best: null, inCanvas: false,\n  });\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 ?? 76 },\n    },\n  );\n\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      const canvas = canvasRef.current;\n      const view = viewRef.current;\n      if (!canvas || !view) {\n        setState({ ids: [], best: 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      if (!inCanvas) {\n        setState({ ids: [], best: null, inCanvas: false });\n        return;\n      }\n      const [worldX, worldY] = toWorldRef.current?.(e.clientX, e.clientY)\n        ?? clientToWorld(e.clientX, e.clientY, rect, view);\n      let ids: readonly string[] = [];\n      try {\n        ids = pickEvery(worldX, worldY);\n      } catch {\n        ids = [];\n      }\n      let best: string | null = null;\n      if (pickBest) {\n        try { best = pickBest(worldX, worldY); } catch { best = null; }\n      }\n      setState({ ids, best, inCanvas: true });\n    };\n\n    document.addEventListener('pointermove', onMove);\n\n    return () => {\n      document.removeEventListener('pointermove', onMove);\n    };\n  }, [canvasRef, viewRef, pickEvery, pickBest, toWorldRef]);\n\n  if (!style) return null;\n\n  return (\n    <div ref={ref} className={`${s.hud} ${s.sized}`} style={style}>\n      <div className={`${s.header} ${s.muted}`}>pickEvery ({state.ids.length})</div>\n      {state.ids.length === 0 ? (\n        <div className={s.absent}>{state.inCanvas ? '—' : 'off-canvas'}</div>\n      ) : (\n        <ul className={s.list}>\n          {/* pickEvery returns back-to-front (topmost last). Display top-first. */}\n          {state.ids.slice().reverse().map((id) => (\n            <li\n              key={id}\n              className={id === state.best ? `${s.item} ${s.itemBest}` : s.item}\n            >\n              {id}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA8CA,SAAgBE,EAAQ,EAAE,cAAW,cAAW,YAAS,YAAS,cAAW,aAAU,aAAwB;CAC7G,IAAMC,IAAaC,EAAUC,CAAO,GAC9B,CAACC,GAAOC,KAAYC,EAAmB;EAC3C,KAAK,CAAC;EAAG,MAAM;EAAM,UAAU;CACjC,CAAC,GACK,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;EAAG;CACxD,CACF;CA0CA,OAxCAC,QAAgB;EACd,IAAMC,KAAU,MAAoB;GAClC,IAAMC,IAASJ,EAAU,SACnBK,IAAOC,EAAQ;GACrB,IAAI,CAACF,KAAU,CAACC,GAAM;IACpB,EAAS;KAAE,KAAK,CAAC;KAAG,MAAM;KAAM,UAAU;IAAM,CAAC;IACjD;GACF;GACA,IAAME,IAAOH,EAAO,sBAAsB;GAI1C,IAAI,EAFFI,EAAE,WAAWD,EAAK,QAAQC,EAAE,WAAWD,EAAK,SAC5CC,EAAE,WAAWD,EAAK,OAAQC,EAAE,WAAWD,EAAK,SAC/B;IACb,EAAS;KAAE,KAAK,CAAC;KAAG,MAAM;KAAM,UAAU;IAAM,CAAC;IACjD;GACF;GACA,IAAM,CAACE,GAAQC,KAAUlB,EAAW,UAAUgB,EAAE,SAASA,EAAE,OAAO,KAC7DG,EAAcH,EAAE,SAASA,EAAE,SAASD,GAAMF,CAAI,GAC/CO,IAAyB,CAAC;GAC9B,IAAI;IACF,IAAMC,EAAUJ,GAAQC,CAAM;GAChC,QAAQ;IACN,IAAM,CAAC;GACT;GACA,IAAII,IAAsB;GAC1B,IAAIC,GACF,IAAI;IAAE,IAAOA,EAASN,GAAQC,CAAM;GAAG,QAAQ;IAAE,IAAO;GAAM;GAEhE,EAAS;IAAE;IAAK;IAAM,UAAU;GAAK,CAAC;EACxC;EAIA,OAFA,SAAS,iBAAiB,eAAeP,CAAM,SAElC;GACX,SAAS,oBAAoB,eAAeA,CAAM;EACpD;CACF,GAAG;EAACH;EAAWM;EAASO;EAAWE;EAAUvB;CAAU,CAAC,GAEnDwB,IAGH,kBAAC,OAAD;EAAU;EAAK,WAAW,GAAG3B,EAAE,IAAI,GAAGA,EAAE;EAAgB;EAAxD,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW,GAAGA,EAAE,OAAO,GAAGA,EAAE;GAAjC,UAAA;IAA0C;IAAYM,EAAM,IAAI;IAAO;GAAM;EAC5E,CAAA,GAAAA,EAAM,IAAI,WAAW,IACpB,kBAAC,OAAD;GAAK,WAAWN,EAAE;GAAS,UAAAM,EAAM,WAAW,MAAM;EAAkB,CAAA,IAEpE,kBAAC,MAAD;GAAI,WAAWN,EAAE;GAEd,UAAAM,EAAM,IAAI,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,MAChC,kBAAC,MAAD;IAEE,WAAWsB,MAAOtB,EAAM,OAAO,GAAGN,EAAE,KAAK,GAAGA,EAAE,aAAaA,EAAE;IAE5D,UAAA4B;GACC,GAJGA,CAIH,CACL;EACC,CAAA,CAEH;MApBY;AAsBrB"}