@weasel-js/core 1.10.1 → 1.11.0

package/README.md

@@ -8,13 +8,13 @@ Built for diagram editors, sketch tools, schematic editors, scene composers —
 
 - Pointer interactions: move, resize, rotate, insert, clone, area-select, lasso, path-anchor editing, text edit
 - Op-based scene mutation with undo/redo and coalescing
-- A registry of actions with default key and gesture bindings, each one overridable by id (`@experimental`)
+- A registry of actions with default key and gesture bindings, each one overridable by id
 - Layered canvas rendering with debug overlays
 - Rect, rotated and path poses; first-class compound paths; nested containers
 - Viewport with zoom/pan tools, momentum, and boundary clamping
 - Detached read-only scene views and navigation minimap (`<SceneViewCanvas>`, `<MinimapCanvas>`)
 - WebGL2 renderer with MSDF text, gradients, patterns, and per-vertex colors
-- Custom fragment shaders via `registerProgram` (`@experimental`)
+- Custom fragment shaders via `registerProgram`
 
 ## Install
 
@@ -60,19 +60,20 @@ A bare `<SceneCanvas>` only renders. It keeps a selection that nothing sets from
 Interactions are **actions** — descriptors registered into an actions registry — reached by **gesture bindings**. A tool is a list of `{ spec, actionId }` pairs and nothing more; the kit's own select, shape and viewport tools are built that way.
 
 ```tsx
-import { SceneCanvas, BUILTIN_TOOL_IDS, useScene, useSelection, type RectPose } from '@weasel-js/core';
-import { createGridLayer, gridSnapStrategy } from '@weasel-js/guides';
+import { SceneCanvas, BUILTIN_TOOL_IDS, useScene, useSelection } from '@weasel-js/core';
+import { createGridLayer, gridSnapSource } from '@weasel-js/guides';
 
 const W = 800, H = 600;
 const grid = createGridLayer({ spacing: 20, bounds: () => ({ x: 0, y: 0, width: W, height: H }) });
+const snap = { sources: [gridSnapSource({ spacing: 20 })] };
 
 export function Editor() {
   const scene = useScene({ systemLayers: [{ id: 'default' }], initial: [] });
   const selection = useSelection({ mode: 'multi' });
 
-  // Click to select, drag to move with grid snapping, handles to resize and
-  // rotate, the shape tools, and the standard keyboard actions (Cmd+A, Cmd+Z,
-  // Delete, …):
+  // Click to select, drag to move, handles to resize and rotate, the shape and
+  // text tools, sticky notes, the knife, the bone and weight tools, and the
+  // standard keyboard actions (Cmd+A, Cmd+Z, Delete, …), all snapping to the grid:
   return (
     <SceneCanvas
       width={W}
@@ -81,7 +82,7 @@ export function Editor() {
       selection={selection}
       features={['draw']}
       defaultTools={BUILTIN_TOOL_IDS}
-      selectTool={{ snap: gridSnapStrategy<RectPose>(20) }}
+      snap={snap}
       layers={{ grid: { layer: grid } }}
     />
   );
@@ -100,7 +101,7 @@ Lower-level surfaces take a narrow **adapter** instead of a scene — a few meth
 
 An `Action` is a named operation — `delete`, `duplicate`, `group`, `insert`, `viewport.dragPan` — paired with the input that triggers it. `<ActionsProvider>` holds the registered descriptors, and the gesture dispatcher matches live input against each one's `defaultBinding` and the active tool's bindings. Keystrokes and pointer gestures take the same path, so a keyboard shortcut and a drag are two bindings on one action rather than two mechanisms.
 
-`<SceneCanvas>` mounts a provider when none is above it and registers the kit-standard actions its `features` presets name — under `draw`, all of them: escape, select-all, delete, duplicate, group and ungroup, undo and redo, flip, nudge, reorder, align, distribute, the pathfinder booleans, path-anchor editing, fill and stroke, clipboard, and the pointer-driven move, resize, rotate, clone, area-select and lasso. `FEATURE_ACTION_IDS` lists which preset registers which, and `COMPOSITE_FEATURES` what `pick`, `transform` and `draw` abbreviate. `insert` comes with the shape tools that bind it.
+`<SceneCanvas>` mounts a provider when none is above it and registers the kit-standard actions its `features` presets name — under `draw`, all of them: escape, select-all, delete, duplicate, group and ungroup, undo and redo, flip, nudge, reorder, align, distribute, the pathfinder booleans, path-anchor editing, fill and stroke, clipboard, and the pointer-driven move, resize, rotate, clone, area-select and lasso. `FEATURE_ACTION_IDS` lists which preset registers which, and `COMPOSITE_FEATURES` what `pick`, `transform` and `draw` abbreviate. `insert` comes with the shape tools that bind it. Each name stands for an exported `FeaturePreset` (`selectPreset`, `editPreset`, …), and `features` also takes a package's preset object; `<LeanSceneCanvas>` takes objects only, so an app's bundle holds only the presets it imports.
 
 ### Tuning an action
 
@@ -116,14 +117,14 @@ A tuning applies to whichever descriptor holds the id, whether a preset or a too
 ```tsx
 const radius = useRef(8);
 const tune = useMemo<ActionTunings>(() => ({
-  brushDeleteAnchors: { params: () => ({ radiusPx: radius.current }) },
-  cycleCornerStyle: { bindings: [{ kind: 'key', key: 'k' }] },
+  simplifyBrush: { params: () => ({ radiusPx: radius.current }) },
+  cycleCornerShape: { bindings: [{ kind: 'key', key: 'k' }] },
 }), []);
 
 <SceneCanvas scene={scene} features={['paths']} tune={tune} />
 ```
 
-`ActionParamSchema` types `params` for the kit actions that read them (`flip`, `align.*`, `distribute.*`, `reorder.*`, `nudge.*`, `tool.activate`); any other id takes a plain record. An action of your own declares its params the way `DepSchema` takes deps:
+`ActionParamSchema` types `params` for the kit actions that read them (`flip`, `align.*`, `distribute.*`, `reorder.*`, `nudge.*`, `tool.activate`, `constrainAnchors`, `unconstrainAnchors`, `editAnchors`); any other id takes a plain record. `editAnchors` takes `handleLock` (`'angle'` or `'length'`, held without the Shift or Mod modifier). An action of your own declares its params the way `DepSchema` takes deps:
 
 ```ts
 declare module '@weasel-js/core' {
@@ -133,7 +134,7 @@ declare module '@weasel-js/core' {
 
 Pass `tune` a stable object — a module constant or a `useMemo` — since a new one re-applies every tuning. The registry underneath is `ActionsRegistry.tune(id, tuning)`, which returns its release.
 
-### Replacing actions (`@experimental`)
+### Replacing actions
 
 ```tsx
 <SceneCanvas
@@ -176,7 +177,7 @@ Core doesn't ship a prebuilt atlas — bake one from a weasel checkout with `npm
 
 `registerFont` lives in `@weasel-js/font` and is re-exported from core. An unregistered family renders in the default family with a one-time warning — see that package's README for `setFontFallbackPolicy`.
 
-## Custom shaders (`@experimental`)
+## Custom shaders
 
 A render layer can draw with its own fragment shader. Register the program once, then return a `kind: 'shader'` draw command with its uniforms and bounds:
 
@@ -222,7 +223,7 @@ Every package is published under `@weasel-js` and released together at one versi
 | Package | What it is |
 |---|---|
 | `core` | the scene graph, `<SceneCanvas>`, actions, tools, and the WebGL2 renderer |
-| `geom` | pure 2D geometry — affine, box, curve, polyline; polygon booleans under `./booleans` |
+| `geom` | pure geometry — 2D affine, box, curve, polyline; polygon booleans under `./booleans`; 3D vectors, quaternions, matrices and rays under `./3d` |
 | `gestures` | the gesture taxonomy, route grammars and matchers; no React, no DOM |
 | `history` | undo/redo with scoped sub-histories; no React, no DOM |
 | `react` | generic React hooks the other packages share: `useLatest`, `useStableByContent` |

package/dist/WeaselProvider.js

@@ -1,13 +1,29 @@
-import { PointerProviderIfRoot as e } from "./canvas/SceneCanvas/PointerProviderIfRoot.js";
-import { ActionsProviderIfRoot as t } from "./canvas/SceneCanvas/ActionsProviderIfRoot.js";
-import { DepRegistryProviderIfRoot as n } from "./canvas/SceneCanvas/DepRegistryProviderIfRoot.js";
-import { ActionsProvider as r, ActiveToolContextProvider as i, ActiveToolContextProviderIfRoot as a, DepRegistryProvider as o, PointerContextProvider as s, SelectionContextProvider as c, SelectionContextProviderIfRoot as l } from "@weasel-js/routing/react";
-import { jsx as u } from "react/jsx-runtime";
+import { PointerProviderIfRoot } from "./canvas/SceneCanvas/PointerProviderIfRoot.js";
+import { ActionsProviderIfRoot } from "./canvas/SceneCanvas/ActionsProviderIfRoot.js";
+import { DepRegistryProviderIfRoot } from "./canvas/SceneCanvas/DepRegistryProviderIfRoot.js";
+import { IconRegistryScope } from "./iconRegistry/IconRegistryProvider.js";
+import { ActionsProvider, ActiveToolContextProvider, ActiveToolContextProviderIfRoot, DepRegistryProvider, PointerContextProvider, SelectionContextProvider, SelectionContextProviderIfRoot } from "@weasel-js/routing/react";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/WeaselProvider.tsx
-function d({ children: d, isolate: f = !1 }) {
-	return /* @__PURE__ */ u(f ? o : n, { children: /* @__PURE__ */ u(f ? r : t, { children: /* @__PURE__ */ u(f ? i : a, { children: /* @__PURE__ */ u(f ? c : l, { children: /* @__PURE__ */ u(f ? s : e, { children: d }) }) }) }) });
+/**
+* Mounts every kit-wide provider at once — deps, actions, active tool,
+* selection, and pointer — each only if one is not already in scope, or
+* unconditionally under `isolate`.
+*
+* `<SceneCanvas>` does this for itself, so this is for the case where kit
+* state has to be shared by things outside a canvas: a toolbar, a property
+* panel, or two canvases that should agree on the selection. Mount it above
+* any `useTools(...)` call, or the dispatcher sees a stale active tool.
+*/
+function WeaselProvider({ children, isolate = false, icons, iconVariants }) {
+	return /* @__PURE__ */ jsx(IconRegistryScope, {
+		icons,
+		variants: iconVariants,
+		children: /* @__PURE__ */ jsx(isolate ? DepRegistryProvider : DepRegistryProviderIfRoot, { children: /* @__PURE__ */ jsx(isolate ? ActionsProvider : ActionsProviderIfRoot, { children: /* @__PURE__ */ jsx(isolate ? ActiveToolContextProvider : ActiveToolContextProviderIfRoot, { children: /* @__PURE__ */ jsx(isolate ? SelectionContextProvider : SelectionContextProviderIfRoot, { children: /* @__PURE__ */ jsx(isolate ? PointerContextProvider : PointerProviderIfRoot, { children }) }) }) }) })
+	});
 }
-//#endregion
-export { d as WeaselProvider };
 
+//#endregion
+export { WeaselProvider };
 //# sourceMappingURL=WeaselProvider.js.map

package/dist/WeaselProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeaselProvider.js","names":["WeaselProvider","isolate","DepRegistryProvider","DepRegistryProviderIfRoot","ActionsProvider","ActionsProviderIfRoot","ActiveToolContextProvider","ActiveToolContextProviderIfRoot","SelectionContextProvider","SelectionContextProviderIfRoot","PointerContextProvider","PointerProviderIfRoot"],"sources":["../src/WeaselProvider.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport { DepRegistryProviderIfRoot } from './canvas/SceneCanvas/DepRegistryProviderIfRoot';\nimport { ActionsProviderIfRoot } from './canvas/SceneCanvas/ActionsProviderIfRoot';\nimport { PointerProviderIfRoot } from './canvas/SceneCanvas/PointerProviderIfRoot';\nimport { ActiveToolContextProvider, ActiveToolContextProviderIfRoot } from '@weasel-js/routing/react';\nimport {\n  SelectionContextProvider,\n  SelectionContextProviderIfRoot,\n} from '@weasel-js/routing/react';\nimport { DepRegistryProvider } from '@weasel-js/routing/react';\nimport { ActionsProvider } from '@weasel-js/routing/react';\nimport { PointerContextProvider } from '@weasel-js/routing/react';\n\ntype Wrapper = ComponentType<{ children: ReactNode }>;\n\n/** Props for {@link WeaselProvider}. */\nexport interface WeaselProviderProps {\n  children: ReactNode;\n  /**\n   * Mount every provider unconditionally rather than deferring to one already\n   * in scope.\n   *\n   * An actions registry holds one dispatcher, so a second `<SceneCanvas>`\n   * joining a scope displaces the first and takes its input away. Wrap each of\n   * two canvases on one page in an isolated provider. They then share\n   * nothing — a toolbar outside both can drive neither.\n   */\n  isolate?: boolean;\n}\n\n/**\n * Mounts every kit-wide provider at once — deps, actions, active tool,\n * selection, and pointer — each only if one is not already in scope, or\n * unconditionally under `isolate`.\n *\n * `<SceneCanvas>` does this for itself, so this is for the case where kit\n * state has to be shared by things outside a canvas: a toolbar, a property\n * panel, or two canvases that should agree on the selection. Mount it above\n * any `useTools(...)` call, or the dispatcher sees a stale active tool.\n */\nexport function WeaselProvider({ children, isolate = false }: WeaselProviderProps) {\n  const Deps: Wrapper = isolate ? DepRegistryProvider : DepRegistryProviderIfRoot;\n  const Actions: Wrapper = isolate ? ActionsProvider : ActionsProviderIfRoot;\n  const ActiveTool: Wrapper = isolate\n    ? ActiveToolContextProvider\n    : ActiveToolContextProviderIfRoot;\n  const Selection: Wrapper = isolate\n    ? SelectionContextProvider\n    : SelectionContextProviderIfRoot;\n  const Pointer: Wrapper = isolate ? PointerContextProvider : PointerProviderIfRoot;\n  return (\n    <Deps>\n      <Actions>\n        <ActiveTool>\n          <Selection>\n            <Pointer>\n              {children}\n            </Pointer>\n          </Selection>\n        </ActiveTool>\n      </Actions>\n    </Deps>\n  );\n}\n"],"mappings":";;;;;;AAwCA,SAAgBA,EAAe,EAAE,aAAU,aAAU,MAA8B;CAUjF,OACE,kBAVoBC,IAAUC,IAAsBC,GAUpD,EAAA,UACE,kBAVqBF,IAAUG,IAAkBC,GAUjD,EAAA,UACE,kBAVsBJ,IACxBK,IACAC,GAQE,EAAA,UACE,kBARmBN,IACvBO,IACAC,GAMI,EAAA,UACE,kBANeR,IAAUS,IAAyBC,GAMlD,EACG,YACM,CAAA,EACA,CAAA,EACD,CAAA,EACL,CAAA,EACL,CAAA;AAEV"}
+{"version":3,"file":"WeaselProvider.js","names":[],"sources":["../src/WeaselProvider.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport { IconRegistryScope, type IconRegistryProviderProps } from './iconRegistry';\nimport { DepRegistryProviderIfRoot } from './canvas/SceneCanvas/DepRegistryProviderIfRoot';\nimport { ActionsProviderIfRoot } from './canvas/SceneCanvas/ActionsProviderIfRoot';\nimport { PointerProviderIfRoot } from './canvas/SceneCanvas/PointerProviderIfRoot';\nimport { ActiveToolContextProvider, ActiveToolContextProviderIfRoot } from '@weasel-js/routing/react';\nimport {\n  SelectionContextProvider,\n  SelectionContextProviderIfRoot,\n} from '@weasel-js/routing/react';\nimport { DepRegistryProvider } from '@weasel-js/routing/react';\nimport { ActionsProvider } from '@weasel-js/routing/react';\nimport { PointerContextProvider } from '@weasel-js/routing/react';\n\ntype Wrapper = ComponentType<{ children: ReactNode }>;\n\n/** Props for {@link WeaselProvider}. */\nexport interface WeaselProviderProps {\n  children: ReactNode;\n  /**\n   * Mount every provider unconditionally rather than deferring to one already\n   * in scope.\n   *\n   * An actions registry holds one dispatcher, so a second `<SceneCanvas>`\n   * joining a scope displaces the first and takes its input away. Wrap each of\n   * two canvases on one page in an isolated provider. They then share\n   * nothing — a toolbar outside both can drive neither.\n   */\n  isolate?: boolean;\n  /** Icon tables to register, e.g. `virtual:weasel-icons`'s default export. Mounts a registry of its own rather than joining one in scope. */\n  icons?: IconRegistryProviderProps['icons'];\n  /** Icon variants a component may load by name. Mounts a registry of its own, like `icons`. */\n  iconVariants?: IconRegistryProviderProps['variants'];\n}\n\n/**\n * Mounts every kit-wide provider at once — deps, actions, active tool,\n * selection, and pointer — each only if one is not already in scope, or\n * unconditionally under `isolate`.\n *\n * `<SceneCanvas>` does this for itself, so this is for the case where kit\n * state has to be shared by things outside a canvas: a toolbar, a property\n * panel, or two canvases that should agree on the selection. Mount it above\n * any `useTools(...)` call, or the dispatcher sees a stale active tool.\n */\nexport function WeaselProvider({ children, isolate = false, icons, iconVariants }: WeaselProviderProps) {\n  const Deps: Wrapper = isolate ? DepRegistryProvider : DepRegistryProviderIfRoot;\n  const Actions: Wrapper = isolate ? ActionsProvider : ActionsProviderIfRoot;\n  const ActiveTool: Wrapper = isolate\n    ? ActiveToolContextProvider\n    : ActiveToolContextProviderIfRoot;\n  const Selection: Wrapper = isolate\n    ? SelectionContextProvider\n    : SelectionContextProviderIfRoot;\n  const Pointer: Wrapper = isolate ? PointerContextProvider : PointerProviderIfRoot;\n  // `isolate` leaves the icon registry alone: icons are the app's, settled when it is built.\n  return (\n    <IconRegistryScope icons={icons} variants={iconVariants}>\n      <Deps>\n        <Actions>\n          <ActiveTool>\n            <Selection>\n              <Pointer>\n                {children}\n              </Pointer>\n            </Selection>\n          </ActiveTool>\n        </Actions>\n      </Deps>\n    </IconRegistryScope>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6CA,SAAgB,eAAe,EAAE,UAAU,UAAU,OAAO,OAAO,gBAAqC;CAWtG,OACE,oBAAC,mBAAD;EAA0B;EAAO,UAAU;EACzC,UAAA,oBAZkB,UAAU,sBAAsB,2BAYlD,EAAA,UACE,oBAZmB,UAAU,kBAAkB,uBAY/C,EAAA,UACE,oBAZoB,UACxB,4BACA,iCAUI,EAAA,UACE,oBAViB,UACvB,2BACA,gCAQM,EAAA,UACE,oBARa,UAAU,yBAAyB,uBAQhD,EACG,SACM,CAAA,EACA,CAAA,EACD,CAAA,EACL,CAAA,EACL,CAAA;CACW,CAAA;AAEvB"}

package/dist/affordances/composeAffordanceLayer.js

@@ -1,222 +1,299 @@
-import { viewToTransform as e } from "../core/viewport/view.js";
-import { worldToScreen as t } from "../core/viewport/viewTransform.js";
-import { angleOf as n, isRigid as r, localToWorld as i, pxExtentIn as a, targetCorners as o } from "../core/geometry/targetFrame.js";
-import { annulusSemiAxes as s, hitAffordanceRegions as c, pointRegionAnchor as l, pointRegionFrame as u, pointRegionScreenQuad as d, transformOf as f } from "./hitAffordanceRegions.js";
-import { PATH_L as p, PATH_M as m, PATH_Z as h, boundsOfPath as g } from "@weasel-js/geom";
+import { viewToTransform } from "../core/viewport/view.js";
+import { worldToScreen } from "../core/viewport/viewTransform.js";
+import { angleOf, isRigid, localToWorld, pxExtentIn, targetCorners } from "../core/geometry/targetFrame.js";
+import { annulusSemiAxes, hitAffordanceRegions, pointRegionAnchor, pointRegionFrame, pointRegionLive, pointRegionScreenQuad, transformOf } from "./hitAffordanceRegions.js";
+import { PATH_L, PATH_M, PATH_Z, boundsOfPath } from "@weasel-js/geom";
+
 //#region src/affordances/composeAffordanceLayer.ts
-function _(t, n, r) {
+/**
+* Bundle a list of Affordances into a single RenderLayer.
+*
+* Paint order matches array order (first → last = bottom → top). Hit-test walks affordances in
+* reverse and stops at the first that claims the point; within it the nearest region wins.
+*
+* `decorate(state, view)` runs *after* a given affordance's regions, for paint only.
+*/
+function composeAffordanceLayer(id, label, affordances) {
 	return {
-		id: t,
-		label: n,
+		id,
+		label,
 		space: "screen",
-		draw: (t, n, i) => {
-			let a = v(t), o = y(t), s = b(t), c = [], l = e(n);
-			for (let e of r) if (!s || s(e.id)) {
-				for (let t of e.regions(a)) {
-					let r = f(a, t.targetId);
-					t.paint && C(t, r, n, a, l, c), o && x(o, e.id, t, r, n);
+		draw: (data, view, _dims) => {
+			const state = asChromeState(data);
+			const debug = asDebugSink(data);
+			const isVisible = asIsVisible(data);
+			const out = [];
+			const t = viewToTransform(view);
+			for (const a of affordances) {
+				if (isVisible && !isVisible(a.id)) continue;
+				for (const region of a.regions(state)) {
+					const xf = transformOf(state, region.targetId);
+					if (region.shape.kind === "point" && !pointRegionLive(region.shape, xf, view)) continue;
+					if (region.paint) paintRegion(region, xf, view, state, t, out);
+					if (debug) recordRegionHitbox(debug, a.id, region, xf, view);
 				}
-				if (e.decorate) for (let t of e.decorate(a, n)) c.push(t);
+				if (a.decorate) for (const cmd of a.decorate(state, view)) out.push(cmd);
 			}
-			return c;
+			return out;
 		},
-		hitTest: (e, t, n, i, a, o) => {
-			let s = v(n);
-			if (!s) return null;
-			let l = c(r, e, t, s, i, o ?? b(n) ?? void 0);
-			if (!l) return null;
-			let { cursor: u } = l, { strength: d, claimedKinds: f } = l.region;
+		hitTest: (wx, wy, data, view, _dims, isVisible) => {
+			const state = asChromeState(data);
+			if (!state) return null;
+			const hit = hitAffordanceRegions(affordances, wx, wy, state, view, isVisible ?? asIsVisible(data) ?? void 0);
+			if (!hit) return null;
+			const { cursor } = hit;
+			const { strength, claimedKinds } = hit.region;
 			return {
-				...l.binding,
-				...u === void 0 ? {} : { cursor: u },
-				...d === void 0 ? {} : { strength: d },
-				...f === void 0 ? {} : { claimedKinds: f }
+				...hit.binding,
+				...cursor !== void 0 ? { cursor } : {},
+				...strength !== void 0 ? { strength } : {},
+				...claimedKinds !== void 0 ? { claimedKinds } : {}
 			};
 		}
 	};
 }
-function v(e) {
-	let t = e;
-	return typeof t?.getChromeState == "function" ? t.getChromeState() : e;
+function asChromeState(data) {
+	const maybe = data;
+	if (typeof maybe?.getChromeState === "function") return maybe.getChromeState();
+	return data;
 }
-function y(e) {
-	let t = e;
-	return typeof t?.getDebug == "function" ? t.getDebug() : null;
+function asDebugSink(data) {
+	const maybe = data;
+	if (typeof maybe?.getDebug === "function") return maybe.getDebug();
+	return null;
 }
-function b(e) {
-	let t = e;
-	return typeof t?.getIsVisible == "function" ? t.getIsVisible() : null;
+/** The chrome-caps visibility predicate off the data envelope. When absent (tests passing
+*  bare state), every affordance renders. */
+function asIsVisible(data) {
+	const maybe = data;
+	if (typeof maybe?.getIsVisible === "function") return maybe.getIsVisible();
+	return null;
 }
-function x(e, t, n, r, i) {
-	if (n.shape.kind === "point") {
-		let a = u(n.shape, r, i), o = d(n.shape, r, i, (e, t) => [e, t]);
-		e.recordHitbox(t, "handle", {
+function recordRegionHitbox(debug, affordanceId, region, xf, view) {
+	if (region.shape.kind === "point") {
+		const f = pointRegionFrame(region.shape, xf, view);
+		const quad = pointRegionScreenQuad(region.shape, xf, view, (x, y) => [x, y]);
+		debug.recordHitbox(affordanceId, "handle", {
 			kind: "polygon",
-			points: o.map((e) => ({
-				x: a.x + (e.x - a.x) / i.scale.x,
-				y: a.y + (e.y - a.y) / i.scale.y
+			points: quad.map((q) => ({
+				x: f.x + (q.x - f.x) / view.scale.x,
+				y: f.y + (q.y - f.y) / view.scale.y
 			}))
 		});
 		return;
 	}
-	if (n.shape.kind === "annulus") {
-		let a = n.shape, { rx: o, ry: c } = s(a, i, r);
-		S(e, t, r, {
-			x: a.cx - o,
-			y: a.cy - c,
-			width: 2 * o,
-			height: 2 * c
+	if (region.shape.kind === "annulus") {
+		const s = region.shape;
+		const { rx, ry } = annulusSemiAxes(s, view, xf);
+		recordLocalRect(debug, affordanceId, xf, {
+			x: s.cx - rx,
+			y: s.cy - ry,
+			width: 2 * rx,
+			height: 2 * ry
 		});
 		return;
 	}
-	S(e, t, r, n.shape.kind === "outline" ? g(n.shape.path) : n.shape);
+	recordLocalRect(debug, affordanceId, xf, region.shape.kind === "outline" ? boundsOfPath(region.shape.path) : region.shape);
 }
-function S(e, t, a, s) {
-	if (!r(a)) {
-		e.recordHitbox(t, "handle", {
+/** A rect of the target's own frame as a debug hitbox: the unturned box plus
+*  the rotation while the frame only turns it, and the quad it lands on once
+*  the frame skews or stretches it. */
+function recordLocalRect(debug, affordanceId, xf, r) {
+	if (!isRigid(xf)) {
+		debug.recordHitbox(affordanceId, "handle", {
 			kind: "polygon",
-			points: o(s, a)
+			points: targetCorners(r, xf)
 		});
 		return;
 	}
-	let c = i(a, s.x + s.width / 2, s.y + s.height / 2);
-	e.recordHitbox(t, "handle", {
+	const w = localToWorld(xf, r.x + r.width / 2, r.y + r.height / 2);
+	debug.recordHitbox(affordanceId, "handle", {
 		kind: "rect",
-		x: c.x - s.width / 2,
-		y: c.y - s.height / 2,
-		width: s.width,
-		height: s.height,
-		...a.identity ? {} : { rotation: n(a) }
+		x: w.x - r.width / 2,
+		y: w.y - r.height / 2,
+		width: r.width,
+		height: r.height,
+		...xf.identity ? {} : { rotation: angleOf(xf) }
 	});
 }
-function C(e, n, r, i, o, c) {
-	let l = e.paint;
-	if (l.kind === "square") {
-		if (e.shape.kind !== "point") return;
-		let i = u(e.shape, n, r), [a, s] = t(i.x, i.y, o), d = l.sizePx / 2, f = l.fill ? { fill: l.fill } : {}, g = l.stroke ? { stroke: l.stroke } : {};
-		if (i.angle === 0) {
-			c.push({
+function paintRegion(region, xf, view, state, viewT, out) {
+	const paint = region.paint;
+	if (paint.kind === "square") {
+		if (region.shape.kind !== "point") return;
+		const f = pointRegionFrame(region.shape, xf, view);
+		const [sx, sy] = worldToScreen(f.x, f.y, viewT);
+		const half = paint.sizePx / 2;
+		const fill = paint.fill ? { fill: paint.fill } : {};
+		const stroke = paint.stroke ? { stroke: paint.stroke } : {};
+		if (f.angle === 0) {
+			out.push({
 				kind: "path",
 				path: {
 					kind: "rect",
-					x: a - d,
-					y: s - d,
-					width: l.sizePx,
-					height: l.sizePx
+					x: sx - half,
+					y: sy - half,
+					width: paint.sizePx,
+					height: paint.sizePx
 				},
-				...f,
-				...g
+				...fill,
+				...stroke
 			});
 			return;
 		}
-		let _ = Math.cos(i.angle) * d, v = Math.sin(i.angle) * d, y = /* @__PURE__ */ new Float32Array(8);
+		const c = Math.cos(f.angle) * half, sn = Math.sin(f.angle) * half;
+		const coords = /* @__PURE__ */ new Float32Array(8);
 		[
 			[-1, -1],
 			[1, -1],
 			[1, 1],
 			[-1, 1]
-		].forEach(([e, t], n) => {
-			y[n * 2] = a + _ * e - v * t, y[n * 2 + 1] = s + v * e + _ * t;
-		}), c.push({
+		].forEach(([u, v], i) => {
+			coords[i * 2] = sx + c * u - sn * v;
+			coords[i * 2 + 1] = sy + sn * u + c * v;
+		});
+		out.push({
 			kind: "path",
 			path: {
 				kind: "polygon",
 				commands: new Uint8Array([
-					m,
-					p,
-					p,
-					p,
-					h
+					PATH_M,
+					PATH_L,
+					PATH_L,
+					PATH_L,
+					PATH_Z
 				]),
-				coords: y,
+				coords,
 				fillRule: "nonzero"
 			},
-			...f,
-			...g
+			...fill,
+			...stroke
 		});
 		return;
 	}
-	if (l.kind === "annulus") {
-		if (e.shape.kind !== "annulus") return;
-		let t = e.shape, i = a(l.insetPx ?? 0, r.scale, n), u = w(t, s(t, r, n), i, n, o, l.fill, l.stroke);
-		u && c.push(u);
+	if (paint.kind === "annulus") {
+		if (region.shape.kind !== "annulus") return;
+		const s = region.shape;
+		const insetLocal = pxExtentIn(paint.insetPx ?? 0, view.scale, xf);
+		const cmd = annulusCommand(s, annulusSemiAxes(s, view, xf), insetLocal, xf, viewT, paint.fill, paint.stroke);
+		if (cmd) out.push(cmd);
 		return;
 	}
-	if (l.kind === "custom") {
-		let t = {
-			world: T(e, n, r),
-			local: e.shape,
-			view: r,
-			state: i
+	if (paint.kind === "custom") {
+		const ctx = {
+			world: worldOf(region, xf, view),
+			local: region.shape,
+			view,
+			state
 		};
-		for (let e of l.draw(t)) c.push(e);
+		for (const cmd of paint.draw(ctx)) out.push(cmd);
 		return;
 	}
 }
-function w(e, n, r, a, o, s, c) {
-	let l = n.rx - r.x, u = n.ry - r.y;
-	if (l <= 0 || u <= 0) return null;
-	let d = e.cx, f = e.cy, g = e.innerWidth / 2 + r.x, _ = e.innerHeight / 2 + r.y, v = _ < u, y = g < l;
-	if (!v && !y) return null;
-	let b = v ? l * Math.sqrt(1 - (_ / u) ** 2) : 0, x = y ? u * Math.sqrt(1 - (g / l) ** 2) : 0, S = [], C = [];
-	function w(e, t) {
-		S.push(m), C.push({
-			x: d + l * Math.cos(e),
-			y: f + u * Math.sin(e)
+/** Build a screen-space DrawCommand for an annulus region: the area
+*  inside the (contracted) outer ellipse but outside the (expanded)
+*  inner rect. Renders as four disjoint petal subpaths — one per rect
+*  edge — so the visible fill is true `ellipse \ rect`. A naive
+*  ellipse + rect even-odd path would also fill the rect's corner
+*  triangles where they poke past the contracted ellipse. Returns null
+*  when the band collapses on both axes. */
+function annulusCommand(shape, semiAxes, insetLocal, xf, viewT, fill, stroke) {
+	const rx = semiAxes.rx - insetLocal.x;
+	const ry = semiAxes.ry - insetLocal.y;
+	if (rx <= 0 || ry <= 0) return null;
+	const cx = shape.cx;
+	const cy = shape.cy;
+	const rectHW = shape.innerWidth / 2 + insetLocal.x;
+	const rectHH = shape.innerHeight / 2 + insetLocal.y;
+	const haveTopBottom = rectHH < ry;
+	const haveLeftRight = rectHW < rx;
+	if (!haveTopBottom && !haveLeftRight) return null;
+	const xT = haveTopBottom ? rx * Math.sqrt(1 - (rectHH / ry) ** 2) : 0;
+	const yR = haveLeftRight ? ry * Math.sqrt(1 - (rectHW / rx) ** 2) : 0;
+	const SAMPLES = 24;
+	const cmds = [];
+	const localPts = [];
+	function appendPetal(t0, t1) {
+		cmds.push(PATH_M);
+		localPts.push({
+			x: cx + rx * Math.cos(t0),
+			y: cy + ry * Math.sin(t0)
 		});
-		for (let n = 1; n <= 24; n++) {
-			let r = e + (t - e) * (n / 24);
-			S.push(p), C.push({
-				x: d + l * Math.cos(r),
-				y: f + u * Math.sin(r)
+		for (let i = 1; i <= SAMPLES; i++) {
+			const t = t0 + (t1 - t0) * (i / SAMPLES);
+			cmds.push(PATH_L);
+			localPts.push({
+				x: cx + rx * Math.cos(t),
+				y: cy + ry * Math.sin(t)
 			});
 		}
-		S.push(h);
+		cmds.push(PATH_Z);
+	}
+	if (haveTopBottom) {
+		appendPetal(Math.atan2(-rectHH / ry, xT / rx), Math.atan2(-rectHH / ry, -xT / rx));
+		appendPetal(Math.atan2(rectHH / ry, xT / rx), Math.atan2(rectHH / ry, -xT / rx));
 	}
-	v && (w(Math.atan2(-_ / u, b / l), Math.atan2(-_ / u, -b / l)), w(Math.atan2(_ / u, b / l), Math.atan2(_ / u, -b / l))), y && (w(Math.atan2(-x / u, g / l), Math.atan2(x / u, g / l)), w(Math.atan2(-x / u, -g / l), Math.atan2(x / u, -g / l) - 2 * Math.PI));
-	let T = new Float32Array(C.length * 2);
-	for (let e = 0; e < C.length; e++) {
-		let n = i(a, C[e].x, C[e].y), [r, s] = t(n.x, n.y, o);
-		T[e * 2] = r, T[e * 2 + 1] = s;
+	if (haveLeftRight) {
+		appendPetal(Math.atan2(-yR / ry, rectHW / rx), Math.atan2(yR / ry, rectHW / rx));
+		appendPetal(Math.atan2(-yR / ry, -rectHW / rx), Math.atan2(yR / ry, -rectHW / rx) - 2 * Math.PI);
+	}
+	const coords = new Float32Array(localPts.length * 2);
+	for (let i = 0; i < localPts.length; i++) {
+		const w = localToWorld(xf, localPts[i].x, localPts[i].y);
+		const [sx, sy] = worldToScreen(w.x, w.y, viewT);
+		coords[i * 2] = sx;
+		coords[i * 2 + 1] = sy;
 	}
 	return {
 		kind: "path",
 		path: {
 			kind: "polygon",
-			commands: new Uint8Array(S),
-			coords: T,
+			commands: new Uint8Array(cmds),
+			coords,
 			fillRule: "nonzero"
 		},
-		...s ? { fill: s } : {},
-		...c ? { stroke: c } : {}
+		...fill ? { fill } : {},
+		...stroke ? { stroke } : {}
 	};
 }
-function T(e, t, n) {
-	if (e.shape.kind === "point") {
-		let r = l(e.shape, t, n);
+function worldOf(region, xf, view) {
+	if (region.shape.kind === "point") {
+		const w = pointRegionAnchor(region.shape, xf, view);
 		return {
-			x: r.x,
-			y: r.y
+			x: w.x,
+			y: w.y
 		};
 	}
-	if (e.shape.kind === "annulus") {
-		let r = e.shape, { rx: a, ry: o } = s(r, n, t), c = i(t, r.cx, r.cy), [l, u, d, f] = t.toWorld, p = Math.hypot(a * l, o * d), m = Math.hypot(a * u, o * f);
+	if (region.shape.kind === "annulus") {
+		const s = region.shape;
+		const { rx, ry } = annulusSemiAxes(s, view, xf);
+		const c = localToWorld(xf, s.cx, s.cy);
+		const [ma, mb, mc, md] = xf.toWorld;
+		const hw = Math.hypot(rx * ma, ry * mc);
+		const hh = Math.hypot(rx * mb, ry * md);
 		return {
-			x: c.x - p,
-			y: c.y - m,
-			width: 2 * p,
-			height: 2 * m
+			x: c.x - hw,
+			y: c.y - hh,
+			width: 2 * hw,
+			height: 2 * hh
 		};
 	}
-	let r = e.shape.kind === "outline" ? g(e.shape.path) : e.shape, a = i(t, r.x, r.y), o = i(t, r.x + r.width, r.y), c = i(t, r.x, r.y + r.height), u = i(t, r.x + r.width, r.y + r.height), d = Math.min(a.x, o.x, c.x, u.x), f = Math.min(a.y, o.y, c.y, u.y), p = Math.max(a.x, o.x, c.x, u.x), m = Math.max(a.y, o.y, c.y, u.y);
+	const r = region.shape.kind === "outline" ? boundsOfPath(region.shape.path) : region.shape;
+	const a = localToWorld(xf, r.x, r.y);
+	const b = localToWorld(xf, r.x + r.width, r.y);
+	const c = localToWorld(xf, r.x, r.y + r.height);
+	const d = localToWorld(xf, r.x + r.width, r.y + r.height);
+	const minX = Math.min(a.x, b.x, c.x, d.x);
+	const minY = Math.min(a.y, b.y, c.y, d.y);
+	const maxX = Math.max(a.x, b.x, c.x, d.x);
+	const maxY = Math.max(a.y, b.y, c.y, d.y);
 	return {
-		x: d,
-		y: f,
-		width: p - d,
-		height: m - f
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
 	};
 }
-//#endregion
-export { _ as composeAffordanceLayer };
 
+//#endregion
+export { composeAffordanceLayer };
 //# sourceMappingURL=composeAffordanceLayer.js.map