@grida/hud 0.2.0 → 0.2.1

package/dist/surface-BvMmXoEl.mjs

@@ -1,2471 +0,0 @@
-import { i as cursorToCss, r as cursorEquals } from "./cursor-BieMVb71.mjs";
-import { auxiliary_line_xylr, guide_line_xylr } from "@grida/cmath/_measurement";
-import cmath from "@grida/cmath";
-//#region primitives/pixel-grid.ts
-const DEFAULT_PIXEL_GRID_COLOR = "rgba(150, 150, 150, 0.15)";
-const DEFAULT_PIXEL_GRID_STEPS = [1, 1];
-function drawPixelGrid(p) {
-	const { ctx, transform, width, height, dpr, color = DEFAULT_PIXEL_GRID_COLOR, steps = DEFAULT_PIXEL_GRID_STEPS } = p;
-	ctx.save();
-	const [[sx, , tx], [, sy, ty]] = transform;
-	ctx.setTransform(sx * dpr, 0, 0, sy * dpr, tx * dpr, ty * dpr);
-	ctx.strokeStyle = color;
-	ctx.lineWidth = 1 / Math.max(Math.abs(sx * dpr), Math.abs(sy * dpr));
-	const minUserX = (0 - tx * dpr) / (sx * dpr);
-	const maxUserX = (width * dpr - tx * dpr) / (sx * dpr);
-	const minUserY = (0 - ty * dpr) / (sy * dpr);
-	const maxUserY = (height * dpr - ty * dpr) / (sy * dpr);
-	const [stepX, stepY] = steps;
-	const startX = Math.floor(minUserX / stepX) * stepX - 2 * stepX;
-	const endX = Math.ceil(maxUserX / stepX) * stepX + 2 * stepX;
-	const startY = Math.floor(minUserY / stepY) * stepY - 2 * stepY;
-	const endY = Math.ceil(maxUserY / stepY) * stepY + 2 * stepY;
-	ctx.beginPath();
-	for (let x = startX; x <= endX; x += stepX) {
-		ctx.moveTo(x, startY);
-		ctx.lineTo(x, endY);
-	}
-	for (let y = startY; y <= endY; y += stepY) {
-		ctx.moveTo(startX, y);
-		ctx.lineTo(endX, y);
-	}
-	ctx.stroke();
-	ctx.restore();
-}
-//#endregion
-//#region primitives/canvas.ts
-const DEFAULT_COLOR = "#f44336";
-const DEFAULT_LABEL_FG = "#ffffff";
-const DEFAULT_LINE_WIDTH = .5;
-const CROSSHAIR_SIZE = 4;
-const LABEL_FONT = "10px sans-serif";
-const LABEL_FONT_HEIGHT = 14;
-const LABEL_PADDING_X = 4;
-const LABEL_PADDING_Y = 2;
-const LABEL_BORDER_RADIUS = 4;
-const LABEL_OFFSET = 16;
-const SCREEN_RECT_LINE_WIDTH = 1;
-/**
-* Imperative Canvas 2D renderer for the HUD overlay.
-*
-* Owns a single `<canvas>` element and draws {@link HUDDraw} command lists
-* each frame. All drawing is immediate-mode: the canvas is cleared and
-* fully redrawn on every `draw()` call.
-*
-* The viewport transform is assumed to be axis-aligned (scale + translate only,
-* no rotation/shear). The off-diagonal components of the transform matrix are
-* ignored.
-*/
-var HUDCanvas = class {
-	constructor(canvas, options) {
-		this.canvas = canvas;
-		this.transform = [[
-			1,
-			0,
-			0
-		], [
-			0,
-			1,
-			0
-		]];
-		this.width = 0;
-		this.height = 0;
-		this.pixelGrid = null;
-		this.ctx = canvas.getContext("2d");
-		this.dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-		this.color = options?.color ?? DEFAULT_COLOR;
-	}
-	setColor(color) {
-		this.color = color ?? DEFAULT_COLOR;
-	}
-	setSize(w, h) {
-		const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-		if (this.width === w && this.height === h && this.dpr === dpr) return;
-		this.dpr = dpr;
-		this.width = w;
-		this.height = h;
-		this.canvas.width = w * this.dpr;
-		this.canvas.height = h * this.dpr;
-		this.canvas.style.width = `${w}px`;
-		this.canvas.style.height = `${h}px`;
-	}
-	setTransform(transform) {
-		this.transform = transform;
-	}
-	/**
-	* Configure the back-most pixel-grid layer. Pass `null` to disable.
-	* Drawn before any HUD primitive, gated by `zoomThreshold`. See
-	* `PixelGridConfig.transform` for the two-transform contract.
-	*/
-	setPixelGrid(config) {
-		if (config === null) {
-			this.pixelGrid = null;
-			return;
-		}
-		this.pixelGrid = {
-			...config,
-			transform: config.transform ?? this.pixelGrid?.transform
-		};
-	}
-	/**
-	* Update only the pixel grid's transform, without replacing the rest of
-	* the config. Cheap to call per camera tick.
-	*/
-	setPixelGridTransform(transform) {
-		if (this.pixelGrid) this.pixelGrid = {
-			...this.pixelGrid,
-			transform
-		};
-	}
-	/**
-	* Clear the canvas and draw all primitives in `commands`.
-	* Pass `undefined` to clear without drawing (e.g. when no overlay is active).
-	*/
-	draw(commands) {
-		const ctx = this.ctx;
-		ctx.setTransform(1, 0, 0, 1, 0, 0);
-		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-		const pg = this.pixelGrid;
-		const pgTransform = pg?.transform ?? this.transform;
-		if (pg?.enabled && pgTransform[0][0] > pg.zoomThreshold) drawPixelGrid({
-			ctx,
-			transform: pgTransform,
-			width: this.width,
-			height: this.height,
-			dpr: this.dpr,
-			color: pg.color,
-			steps: pg.steps
-		});
-		if (!commands) return;
-		const { lines, rules, points, rects, polylines, screenRects } = commands;
-		if (rules && rules.length > 0) this.drawRules(rules);
-		if (rects && rects.length > 0) this.drawRects(rects);
-		if (polylines && polylines.length > 0) this.drawPolylines(polylines);
-		if (lines && lines.length > 0) this.drawLines(lines);
-		if (points && points.length > 0) this.drawPoints(points);
-		if (screenRects && screenRects.length > 0) this.drawScreenRects(screenRects);
-	}
-	applyViewTransform() {
-		const [[sx, , tx], [, sy, ty]] = this.transform;
-		this.ctx.setTransform(sx * this.dpr, 0, 0, sy * this.dpr, tx * this.dpr, ty * this.dpr);
-	}
-	applyScreenTransform() {
-		this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
-	}
-	/** Project a scalar offset on `axis` to screen-space. */
-	deltaToScreen(offset, axis) {
-		const i = axis === "x" ? 0 : 1;
-		const row = this.transform[i];
-		return row[i] * offset + row[2];
-	}
-	drawRules(rules) {
-		const ctx = this.ctx;
-		this.applyScreenTransform();
-		ctx.lineWidth = DEFAULT_LINE_WIDTH;
-		for (const rule of rules) {
-			const screenOffset = this.deltaToScreen(rule.offset, rule.axis);
-			ctx.strokeStyle = rule.color ?? this.color;
-			ctx.beginPath();
-			if (rule.axis === "x") {
-				ctx.moveTo(screenOffset, 0);
-				ctx.lineTo(screenOffset, this.height);
-			} else {
-				ctx.moveTo(0, screenOffset);
-				ctx.lineTo(this.width, screenOffset);
-			}
-			ctx.stroke();
-		}
-	}
-	drawLines(lines) {
-		const ctx = this.ctx;
-		const zoom = this.transform[0][0];
-		const [[sx, , tx], [, sy, ty]] = this.transform;
-		this.applyViewTransform();
-		ctx.strokeStyle = this.color;
-		ctx.lineWidth = DEFAULT_LINE_WIDTH / zoom;
-		let dashed = false;
-		let currentWidth = DEFAULT_LINE_WIDTH;
-		let currentColor = this.color;
-		for (const line of lines) {
-			if (line.dashed && !dashed) {
-				ctx.setLineDash([4 / zoom, 3 / zoom]);
-				dashed = true;
-			} else if (!line.dashed && dashed) {
-				ctx.setLineDash([]);
-				dashed = false;
-			}
-			const w = line.strokeWidth ?? DEFAULT_LINE_WIDTH;
-			if (w !== currentWidth) {
-				ctx.lineWidth = w / zoom;
-				currentWidth = w;
-			}
-			const c = line.color ?? this.color;
-			if (c !== currentColor) {
-				ctx.strokeStyle = c;
-				currentColor = c;
-			}
-			ctx.beginPath();
-			ctx.moveTo(line.x1, line.y1);
-			ctx.lineTo(line.x2, line.y2);
-			ctx.stroke();
-		}
-		if (dashed) ctx.setLineDash([]);
-		this.applyScreenTransform();
-		ctx.font = LABEL_FONT;
-		ctx.textAlign = "center";
-		ctx.textBaseline = "middle";
-		for (const line of lines) {
-			if (!line.label) continue;
-			const midX = (line.x1 + line.x2) / 2;
-			const midY = (line.y1 + line.y2) / 2;
-			const lx = sx * midX + tx;
-			const ly = sy * midY + ty;
-			const angle = line.labelAngle ?? 0;
-			const isVertical = Math.abs(line.x2 - line.x1) < Math.abs(line.y2 - line.y1);
-			const baseOffsetX = isVertical ? LABEL_OFFSET : 0;
-			const baseOffsetY = isVertical ? 0 : LABEL_OFFSET;
-			const cos = Math.cos(angle);
-			const sin = Math.sin(angle);
-			const labelX = lx + baseOffsetX * cos - baseOffsetY * sin;
-			const labelY = ly + baseOffsetX * sin + baseOffsetY * cos;
-			const tw = ctx.measureText(line.label).width + LABEL_PADDING_X * 2;
-			const th = LABEL_FONT_HEIGHT + LABEL_PADDING_Y * 2;
-			if (angle !== 0) {
-				ctx.save();
-				ctx.translate(labelX, labelY);
-				ctx.rotate(angle);
-				ctx.translate(-labelX, -labelY);
-			}
-			ctx.fillStyle = line.color ?? this.color;
-			ctx.beginPath();
-			ctx.roundRect(labelX - tw / 2, labelY - th / 2, tw, th, LABEL_BORDER_RADIUS);
-			ctx.fill();
-			ctx.fillStyle = DEFAULT_LABEL_FG;
-			ctx.fillText(line.label, labelX, labelY);
-			if (angle !== 0) ctx.restore();
-		}
-	}
-	drawRects(rects) {
-		const ctx = this.ctx;
-		const zoom = this.transform[0][0];
-		this.applyViewTransform();
-		ctx.lineWidth = DEFAULT_LINE_WIDTH / zoom;
-		let currentWidth = DEFAULT_LINE_WIDTH;
-		for (const rect of rects) {
-			const doStroke = rect.stroke !== false;
-			const doFill = rect.fill === true;
-			const color = rect.color ?? this.color;
-			if (rect.dashed) ctx.setLineDash([4 / zoom, 3 / zoom]);
-			if (doFill) {
-				ctx.globalAlpha = rect.fillOpacity ?? 1;
-				ctx.fillStyle = color;
-				ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-				ctx.globalAlpha = 1;
-			}
-			if (doStroke) {
-				const w = rect.strokeWidth ?? DEFAULT_LINE_WIDTH;
-				if (w !== currentWidth) {
-					ctx.lineWidth = w / zoom;
-					currentWidth = w;
-				}
-				ctx.strokeStyle = color;
-				ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
-			}
-			if (rect.dashed) ctx.setLineDash([]);
-		}
-	}
-	drawPolylines(polylines) {
-		const ctx = this.ctx;
-		const zoom = this.transform[0][0];
-		this.applyViewTransform();
-		ctx.lineWidth = DEFAULT_LINE_WIDTH / zoom;
-		for (const poly of polylines) {
-			if (poly.points.length < 2) continue;
-			ctx.beginPath();
-			ctx.moveTo(poly.points[0][0], poly.points[0][1]);
-			for (let i = 1; i < poly.points.length; i++) ctx.lineTo(poly.points[i][0], poly.points[i][1]);
-			const doFill = poly.fill === true;
-			const doStroke = poly.stroke !== false;
-			const color = poly.color ?? this.color;
-			if (doFill) {
-				ctx.closePath();
-				ctx.globalAlpha = poly.fillOpacity ?? 1;
-				ctx.fillStyle = color;
-				ctx.fill("evenodd");
-				ctx.globalAlpha = 1;
-			}
-			if (doStroke) {
-				if (poly.dashed) ctx.setLineDash([4 / zoom, 3 / zoom]);
-				ctx.strokeStyle = color;
-				ctx.stroke();
-				if (poly.dashed) ctx.setLineDash([]);
-			}
-		}
-	}
-	drawPoints(points) {
-		const ctx = this.ctx;
-		this.applyScreenTransform();
-		ctx.lineWidth = DEFAULT_LINE_WIDTH;
-		const half = CROSSHAIR_SIZE / 2;
-		const [[sx, , tx], [, sy, ty]] = this.transform;
-		const buckets = /* @__PURE__ */ new Map();
-		for (const p of points) {
-			const c = p.color ?? this.color;
-			const arr = buckets.get(c);
-			if (arr) arr.push(p);
-			else buckets.set(c, [p]);
-		}
-		for (const [color, group] of buckets) {
-			ctx.strokeStyle = color;
-			ctx.beginPath();
-			for (const p of group) {
-				const scrX = sx * p.x + tx;
-				const scrY = sy * p.y + ty;
-				ctx.moveTo(scrX - half, scrY - half);
-				ctx.lineTo(scrX + half, scrY + half);
-				ctx.moveTo(scrX + half, scrY - half);
-				ctx.lineTo(scrX - half, scrY + half);
-			}
-			ctx.stroke();
-		}
-	}
-	/**
-	* Draw rects whose **size is in screen-space** but whose **anchor is in
-	* document-space**. The doc-space point is projected via the current
-	* transform; the rect is then drawn at fixed CSS-pixel dimensions.
-	*
-	* This is the primitive used to draw resize / rotate handles — they must
-	* remain a constant visual size regardless of viewport zoom.
-	*/
-	drawScreenRects(rects) {
-		const ctx = this.ctx;
-		const [[sx, , tx], [, sy, ty]] = this.transform;
-		this.applyScreenTransform();
-		ctx.lineWidth = SCREEN_RECT_LINE_WIDTH;
-		for (const r of rects) {
-			const scrX = sx * r.x + tx;
-			const scrY = sy * r.y + ty;
-			const w = r.width;
-			const h = r.height;
-			const anchor = r.anchor ?? "center";
-			let x = scrX;
-			let y = scrY;
-			switch (anchor) {
-				case "center":
-					x = scrX - w / 2;
-					y = scrY - h / 2;
-					break;
-				case "tl":
-					x = scrX;
-					y = scrY;
-					break;
-				case "tr":
-					x = scrX - w;
-					y = scrY;
-					break;
-				case "bl":
-					x = scrX;
-					y = scrY - h;
-					break;
-				case "br":
-					x = scrX - w;
-					y = scrY - h;
-					break;
-			}
-			const doFill = r.fill !== false;
-			const doStroke = r.stroke !== false;
-			const angle = r.angle ?? 0;
-			if (angle !== 0) {
-				const cx = x + w / 2;
-				const cy = y + h / 2;
-				ctx.save();
-				ctx.translate(cx, cy);
-				ctx.rotate(angle);
-				ctx.translate(-cx, -cy);
-			}
-			if (doFill) {
-				ctx.fillStyle = r.fillColor ?? this.color;
-				ctx.fillRect(x, y, w, h);
-			}
-			if (doStroke) {
-				ctx.strokeStyle = r.strokeColor ?? this.color;
-				ctx.strokeRect(x, y, w, h);
-			}
-			if (angle !== 0) ctx.restore();
-		}
-	}
-};
-//#endregion
-//#region primitives/draw.ts
-/**
-* Filter a draw command list by semantic group.
-*
-* Ungrouped primitives are always kept. The function is intentionally shallow:
-* primitives are immutable command objects on the hot draw path, so preserving
-* object identity keeps this as a visibility pass rather than a rewrite.
-*/
-function filterHUDDrawByGroup(draw, filter) {
-	if (!draw) return void 0;
-	const hidden = new Set(filter.hidden ?? []);
-	if (hidden.size === 0) return draw;
-	const out = {};
-	out.lines = keepVisible(draw.lines, hidden);
-	out.rules = keepVisible(draw.rules, hidden);
-	out.points = keepVisible(draw.points, hidden);
-	out.rects = keepVisible(draw.rects, hidden);
-	out.polylines = keepVisible(draw.polylines, hidden);
-	out.screenRects = keepVisible(draw.screenRects, hidden);
-	return hasAny(out) ? out : void 0;
-}
-function keepVisible(items, hidden) {
-	if (!items || items.length === 0) return void 0;
-	const kept = items.filter((item) => !item.group || !hidden.has(item.group));
-	return kept.length > 0 ? kept : void 0;
-}
-function hasAny(draw) {
-	return (draw.lines?.length ?? 0) > 0 || (draw.rules?.length ?? 0) > 0 || (draw.points?.length ?? 0) > 0 || (draw.rects?.length ?? 0) > 0 || (draw.polylines?.length ?? 0) > 0 || (draw.screenRects?.length ?? 0) > 0;
-}
-//#endregion
-//#region primitives/snap-guide.ts
-/**
-* Convert a `guide.SnapGuide` (the output of `guide.plot()`) into a
-* generic {@link HUDDraw} command list.
-*
-* `color`, when supplied, is applied as the per-item stroke override
-* for every emitted line, rule, and point. When absent, the HUD
-* canvas's current color is used.
-*/
-function snapGuideToHUDDraw(sg, color) {
-	if (!sg) return void 0;
-	return {
-		lines: sg.lines.map((l) => ({
-			...l,
-			color
-		})),
-		rules: sg.rules.map(([axis, offset]) => ({
-			axis,
-			offset,
-			color
-		})),
-		points: sg.points.map(([x, y]) => ({
-			x,
-			y,
-			color
-		}))
-	};
-}
-//#endregion
-//#region primitives/measurement-guide.ts
-const SIDES = [
-	"top",
-	"right",
-	"bottom",
-	"left"
-];
-/**
-* Convert a {@link Measurement} (the output of `measure()`) into a
-* generic {@link HUDDraw} command list.
-*
-* All coordinates are in **document space** — the HUD canvas applies
-* the viewport transform.
-*
-* Produces:
-* - Two stroke-only rects for the A and B bounding boxes
-* - One labelled guide line per non-zero distance (solid)
-* - One auxiliary line per non-zero side connecting the guide to B (dashed)
-*
-* If `color` is provided, every emitted line and rect carries that color so
-* the guides render distinctly from the canvas's chrome color. When used via
-* `surface.draw(extra)` (the host-fed-extras channel) this is required to
-* separate measurement from selection chrome on a shared canvas.
-*/
-function measurementToHUDDraw(m, color) {
-	const { a, b, box, distance } = m;
-	const rects = [{
-		x: a.x,
-		y: a.y,
-		width: a.width,
-		height: a.height,
-		color
-	}, {
-		x: b.x,
-		y: b.y,
-		width: b.width,
-		height: b.height,
-		color
-	}];
-	const lines = [];
-	for (let i = 0; i < 4; i++) {
-		const dist = distance[i];
-		if (dist <= 0) continue;
-		const side = SIDES[i];
-		const label = cmath.ui.formatNumber(dist, 1);
-		const [x1, y1, x2, y2] = guide_line_xylr(box, side, dist);
-		lines.push({
-			x1,
-			y1,
-			x2,
-			y2,
-			label,
-			color
-		});
-		const [ax1, ay1, ax2, ay2, aLen] = auxiliary_line_xylr([x2, y2], b, side);
-		if (aLen > 0) lines.push({
-			x1: ax1,
-			y1: ay1,
-			x2: ax2,
-			y2: ay2,
-			dashed: true,
-			color
-		});
-	}
-	return {
-		rects,
-		lines
-	};
-}
-//#endregion
-//#region primitives/marquee.ts
-/**
-* Convert two marquee corner points into a {@link HUDDraw} command list.
-*
-* All coordinates are in **document space**.
-*
-* Produces a single rectangle with a stroke outline and a semi-transparent fill.
-*/
-function marqueeToHUDDraw(a, b) {
-	const rect = cmath.rect.fromPoints([a, b]);
-	return { rects: [{
-		x: rect.x,
-		y: rect.y,
-		width: rect.width,
-		height: rect.height,
-		fill: true,
-		fillOpacity: .2
-	}] };
-}
-//#endregion
-//#region primitives/lasso.ts
-/**
-* Convert a lasso point sequence into a {@link HUDDraw} command list.
-*
-* All coordinates are in **document space**.
-*
-* Produces a single polyline with a dashed stroke and a semi-transparent fill.
-*/
-function lassoToHUDDraw(points) {
-	if (points.length < 2) return void 0;
-	return { polylines: [{
-		points,
-		fill: true,
-		fillOpacity: .2,
-		dashed: true
-	}] };
-}
-//#endregion
-//#region event/event.ts
-const NO_MODS = {
-	shift: false,
-	alt: false,
-	meta: false,
-	ctrl: false
-};
-function emptyResponse() {
-	return {
-		needsRedraw: false,
-		cursorChanged: false,
-		hoverChanged: false
-	};
-}
-//#endregion
-//#region event/gesture.ts
-const IDLE = { kind: "idle" };
-/**
-* Compute a normalized rectangle from two corner points in document-space.
-* Thin alias over `cmath.rect.fromPoints` for ergonomic two-point use.
-*/
-function rectFromPoints(a, b) {
-	return cmath.rect.fromPoints([a, b]);
-}
-/**
-* Apply a resize-handle drag to a `SelectionShape` and return the new shape.
-*
-* `dx, dy` is the total drag delta in **document-space**, measured from
-* `anchor_doc` (the pointer-down point) to the current pointer.
-*
-* - For `kind: "rect"` shapes, the delta applies directly to the doc-space
-*   bbox. Same math as the legacy `Rect`-only `applyResize`; no behavior
-*   change for axis-aligned hosts.
-* - For `kind: "transformed"` shapes, the doc-space delta is rotated into
-*   the shape's **local** frame via the matrix's linear part (the rotation
-*   component, translation dropped), then applied to `local`. The matrix
-*   itself is preserved — only `local.x/y/width/height` change. Net effect:
-*   dragging a corner of a rotated rect extends the artwork along its
-*   rotation axis, not along world axes.
-* - For `kind: "line"` and `kind: "unresolved"` the shape is returned
-*   unchanged (lines have endpoint-knob gestures, not corner-resize).
-*
-* No constraints: width/height can go negative — host is responsible for
-* normalizing if it cares (most callers clamp to a min-size).
-*/
-function applyResize(initial, direction, dx, dy) {
-	if (initial.kind === "rect") return {
-		kind: "rect",
-		rect: applyResizeRect(initial.rect, direction, dx, dy)
-	};
-	if (initial.kind === "transformed") {
-		const m = initial.matrix;
-		const linear = [[
-			m[0][0],
-			m[0][1],
-			0
-		], [
-			m[1][0],
-			m[1][1],
-			0
-		]];
-		const inv_linear = cmath.transform.invert(linear);
-		const [ldx, ldy] = cmath.vector2.transform([dx, dy], inv_linear);
-		return {
-			kind: "transformed",
-			local: applyResizeRect(initial.local, direction, ldx, ldy),
-			matrix: m
-		};
-	}
-	return initial;
-}
-function applyResizeRect(initial, direction, dx, dy) {
-	let { x, y, width, height } = initial;
-	switch (direction) {
-		case "n":
-			y += dy;
-			height -= dy;
-			break;
-		case "s":
-			height += dy;
-			break;
-		case "e":
-			width += dx;
-			break;
-		case "w":
-			x += dx;
-			width -= dx;
-			break;
-		case "ne":
-			y += dy;
-			height -= dy;
-			width += dx;
-			break;
-		case "nw":
-			y += dy;
-			height -= dy;
-			x += dx;
-			width -= dx;
-			break;
-		case "se":
-			width += dx;
-			height += dy;
-			break;
-		case "sw":
-			x += dx;
-			width -= dx;
-			height += dy;
-			break;
-	}
-	return {
-		x,
-		y,
-		width,
-		height
-	};
-}
-//#endregion
-//#region event/shape.ts
-/**
-* Compute the axis-aligned bounding box of a `SelectionShape` in doc-space.
-* Used for layout math the chrome builder needs (e.g. handle positions).
-*
-* Throws on `kind: "unresolved"` — the chrome builder must resolve those
-* via `shapeOf` first.
-*/
-function shapeBounds(shape) {
-	if (shape.kind === "rect") return shape.rect;
-	if (shape.kind === "transformed") return cmath.rect.transform(shape.local, shape.matrix);
-	if (shape.kind === "line") return cmath.rect.fromPoints([shape.p1, shape.p2]);
-	throw new Error(`shapeBounds: cannot bound unresolved shape (id=${shape.id})`);
-}
-//#endregion
-//#region event/click-tracker.ts
-var ClickTracker = class {
-	constructor(opts = {}) {
-		this.last_time = 0;
-		this.last_x = 0;
-		this.last_y = 0;
-		this.count = 0;
-		this.window_ms = opts.windowMs ?? 500;
-		this.distance_px = opts.distancePx ?? 5;
-	}
-	/**
-	* Register a click at `(x, y)` and return the current consecutive-click
-	* count (1 for single, 2 for double, etc.). `now` is in milliseconds.
-	*/
-	register(x, y, now = nowMs()) {
-		const dt = now - this.last_time;
-		const dx = x - this.last_x;
-		const dy = y - this.last_y;
-		const dist2 = dx * dx + dy * dy;
-		const max2 = this.distance_px * this.distance_px;
-		if (dt <= this.window_ms && dist2 <= max2 && this.count > 0) this.count += 1;
-		else this.count = 1;
-		this.last_time = now;
-		this.last_x = x;
-		this.last_y = y;
-		return this.count;
-	}
-	reset() {
-		this.count = 0;
-		this.last_time = 0;
-	}
-};
-function nowMs() {
-	if (typeof performance !== "undefined" && performance.now) return performance.now();
-	return Date.now();
-}
-//#endregion
-//#region event/hit-regions.ts
-/**
-* Registry of overlay UI hit regions.
-*
-* Regions are appended in declaration order. `hitTest` resolves by
-* **lowest priority value** at the hit point; declaration order
-* serves as tie-break only (later push wins on equal priorities,
-* preserving the prior "topmost wins on overlap" feel).
-*/
-var HitRegions = class {
-	constructor() {
-		this.regions = [];
-	}
-	clear() {
-		this.regions.length = 0;
-	}
-	push(region) {
-		this.regions.push(region);
-	}
-	hitTest(point) {
-		return this.hitTestRegion(point)?.action ?? null;
-	}
-	/** Returns the full region (label + priority) — used by tests and
-	*  debug tooling that want to assert on `label`. `hitTest` delegates here. */
-	hitTestRegion(point) {
-		let best = null;
-		for (const r of this.regions) {
-			const test_point = r.inverse_transform ? cmath.vector2.transform(point, r.inverse_transform) : point;
-			if (!cmath.rect.containsPoint(r.rect, test_point)) continue;
-			if (best === null || r.priority <= best.priority) best = r;
-		}
-		return best;
-	}
-	isEmpty() {
-		return this.regions.length === 0;
-	}
-	/** Read-only access for tests. */
-	toArray() {
-		return this.regions;
-	}
-};
-//#endregion
-//#region event/decision.ts
-/**
-* Selection-intent decision module — pure functions, ZERO side effects.
-*
-* Mental model:
-*
-*   The HUD is an event router over real overlay layers. The host creates
-*   overlays (resize knob, rotate region, endpoint knob, translate body,
-*   etc.); the router decides what each one does on pointer-down by overlay
-*   type, falling back to a scene-content pick when no overlay claims.
-*   Pointer events are synthesized on top of raw pointer input — no native
-*   `click`, no DOM ordering.
-*
-*   Architecture:
-*
-*     PointerDownInput  ─►  classifyScenario()  ─►  Scenario  ─►  dispatch()  ─►  PointerDownDecision
-*                           (recognizer)                          (declarative table)
-*
-*   The `Scenario` enum is a **descriptive label** for each `(overlay hit,
-*   pick result, selection, modifiers)` combination — useful for tests and
-*   readable dispatch — NOT a contract the HUD imposes on hosts. The
-*   contract is per-overlay routing semantics (e.g. resize knob always
-*   starts a gesture; translate body always defers) and the Tier-1 → Tier-2
-*   fallback when no overlay claims the point.
-*
-* Adding a new UX rule:
-*
-*   1. Add a new `Scenario` constant (or reuse one).
-*   2. Add/update the recognizer branch in {@link classifyScenario}.
-*   3. Add/update the dispatch branch in {@link decidePointerDown}.
-*   4. Add tests pinning the classification and the dispatch.
-*   5. Update the working-group doc.
-*
-* Working-group spec (implementation-agnostic):
-*   https://grida.co/docs/wg/feat-editor/ux-surface/selection-intent
-*
-* UX-narrative sibling:
-*   https://grida.co/docs/wg/feat-editor/ux-surface/selection
-*/
-/**
-* Recognize which scenario a pointer-down belongs to. Total over inputs.
-* Pure, no I/O. The single source of truth for "which atomic intent did the
-* user just express?"
-*/
-function classifyScenario(input) {
-	const { ui_action, hovered_id, selection_ids, modifiers, click_count, readonly } = input;
-	if (ui_action) switch (ui_action.kind) {
-		case "resize_handle": return readonly ? "Noop" : "HandleResize";
-		case "rotate_handle": return readonly ? "Noop" : "HandleRotate";
-		case "endpoint_handle": return readonly ? "Noop" : "HandleEndpoint";
-		case "select_node": {
-			const id = ui_action.id;
-			if (click_count >= 2) return "EnterEdit";
-			return classifyContent(id, selection_ids, modifiers);
-		}
-		case "translate_handle": return classifyBodyRegion(hovered_id, selection_ids, modifiers, click_count);
-	}
-	if (hovered_id) {
-		if (click_count >= 2) return "EnterEdit";
-		return classifyContent(hovered_id, selection_ids, modifiers);
-	}
-	if (modifiers.shift) return "EmptyAdditiveMarquee";
-	if (selection_ids.length > 0) return "EmptyDeselectThenMarquee";
-	return "EmptyMarquee";
-}
-/**
-* Tier-2 content classification (also reused for the Tier-1 `select_node`
-* overlay variant). The asymmetry lives here in one place:
-*
-*   would-deselect (in selection) → ambiguous (defer)
-*   would-select   (not in selection) → singleton (immediate)
-*/
-function classifyContent(id, selection_ids, modifiers) {
-	if (selection_ids.includes(id)) return modifiers.shift ? "ContentToggleOrDrag" : "ContentNarrowOrDrag";
-	return modifiers.shift ? "ContentAdd" : "ContentReplace";
-}
-/**
-* Body-region classification. Every variant defers, because in the body
-* region "drag the existing selection" is always a candidate intent — even
-* with shift, even when the underlying hover would otherwise be a clear
-* select. The body region's whole purpose is to claim drag.
-*/
-function classifyBodyRegion(hovered_id, selection_ids, modifiers, click_count) {
-	if (click_count >= 2) return "EnterEdit";
-	if (!hovered_id) return "BodyDragOnly";
-	if (selection_ids.includes(hovered_id)) return modifiers.shift ? "BodyToggleOrDrag" : "BodyNarrowOrDrag";
-	return modifiers.shift ? "BodyAddOrDrag" : "BodySwapOrDrag";
-}
-/**
-* Decide what a primary-button pointer-down should do. Thin wrapper:
-* classify the scenario, then dispatch declaratively. The dispatch table is
-* a flat switch — adding a new scenario shows up as exactly one new case.
-*/
-function decidePointerDown(input) {
-	return dispatch(classifyScenario(input), input);
-}
-function dispatch(scenario, input) {
-	const { ui_action, hovered_id, selection_ids, modifiers } = input;
-	switch (scenario) {
-		case "Noop": return { kind: "noop" };
-		case "HandleResize": {
-			const a = ui_action;
-			return {
-				kind: "start_resize",
-				ids: a.ids,
-				direction: a.direction,
-				initial_shape: a.initial_shape
-			};
-		}
-		case "HandleRotate": {
-			const a = ui_action;
-			return {
-				kind: "start_rotate",
-				ids: a.ids,
-				corner: a.corner,
-				initial_shape: a.initial_shape
-			};
-		}
-		case "HandleEndpoint": {
-			const a = ui_action;
-			return {
-				kind: "start_endpoint",
-				id: a.id,
-				endpoint: a.endpoint,
-				p1: a.p1,
-				p2: a.p2
-			};
-		}
-		case "EnterEdit": {
-			const chrome_ids = ui_action && ui_action.kind === "translate_handle" ? ui_action.ids : null;
-			const id = hovered_id ?? (chrome_ids && chrome_ids.length === 1 ? chrome_ids[0] : null);
-			if (id === null) return { kind: "noop" };
-			return {
-				kind: "enter_edit",
-				id
-			};
-		}
-		case "ContentReplace": {
-			const id = contentId(ui_action, hovered_id);
-			return {
-				kind: "immediate_select",
-				select_ids: [id],
-				mode: "replace",
-				pending: { ids_at_down: [id] }
-			};
-		}
-		case "ContentAdd": {
-			const id = contentId(ui_action, hovered_id);
-			return {
-				kind: "immediate_select",
-				select_ids: [id],
-				mode: "toggle",
-				pending: { ids_at_down: [id, ...selection_ids.filter((s) => s !== id)] }
-			};
-		}
-		case "ContentNarrowOrDrag":
-		case "ContentToggleOrDrag": {
-			const id = contentId(ui_action, hovered_id);
-			return {
-				kind: "pend",
-				pending: {
-					ids_at_down: [...selection_ids],
-					deferred: {
-						node_id: id,
-						shift: modifiers.shift
-					}
-				}
-			};
-		}
-		case "BodyDragOnly": return {
-			kind: "pend",
-			pending: { ids_at_down: [...ui_action.ids] }
-		};
-		case "BodyNarrowOrDrag":
-		case "BodyToggleOrDrag":
-		case "BodySwapOrDrag":
-		case "BodyAddOrDrag": return {
-			kind: "pend",
-			pending: {
-				ids_at_down: [...ui_action.ids],
-				deferred: {
-					node_id: hovered_id,
-					shift: modifiers.shift
-				}
-			}
-		};
-		case "EmptyDeselectThenMarquee": return {
-			kind: "start_marquee_pend",
-			emit_deselect_all: true
-		};
-		case "EmptyMarquee":
-		case "EmptyAdditiveMarquee": return {
-			kind: "start_marquee_pend",
-			emit_deselect_all: false
-		};
-	}
-}
-/** Resolve the id that the user clicked on for content-class scenarios. */
-function contentId(ui_action, hovered_id) {
-	if (ui_action && ui_action.kind === "select_node") return ui_action.id;
-	return hovered_id;
-}
-/**
-* What the cursor should show while idle. Drives the cursor in lockstep
-* with the pointer-down decision — both read the same inputs, so cursor
-* and intent can't drift.
-*
-* Hover (the visual outline) is NOT decided here — it's always
-* `hovered_id`. Cursor is about INTENT (what the next pointer-down would
-* do), not what's visually under the pointer.
-*/
-function decideIdleCursor(input) {
-	const { ui_action, hovered_id, selection_ids } = input;
-	if (ui_action) switch (ui_action.kind) {
-		case "resize_handle": return {
-			kind: "resize",
-			direction: ui_action.direction,
-			baseAngle: shape_screen_angle_rad(ui_action.initial_shape)
-		};
-		case "rotate_handle": return {
-			kind: "rotate",
-			corner: ui_action.corner,
-			baseAngle: shape_screen_angle_rad(ui_action.initial_shape)
-		};
-		case "translate_handle": return "move";
-		case "select_node":
-		case "endpoint_handle": return "pointer";
-	}
-	if (hovered_id && selection_ids.includes(hovered_id)) return "move";
-	return "default";
-}
-/**
-* Doc-space rotation of a `SelectionShape` in radians. For `transformed`
-* shapes this is the angle baked into `matrix`; for `rect`/`line` it's 0.
-*
-* Used by `decideIdleCursor` and by the rotate-gesture cursor compositor
-* so the resize / rotate cursor always tilts to match the selection's
-* orientation — without requiring the HUD's camera to be axis-aligned
-* for the doc-space angle to be the right thing to render (the renderer
-* draws the cursor in screen px, and in svg-editor the camera contributes
-* scale + translate only, so doc-space == screen-space rotation).
-*
-* For hosts that ROTATE the HUD camera, this should compose with the
-* camera's angle at consume time. Not relevant for svg-editor.
-*/
-function shape_screen_angle_rad(shape) {
-	if (shape.kind !== "transformed") return 0;
-	return cmath.transform.angle(shape.matrix) * Math.PI / 180;
-}
-//#endregion
-//#region event/transform.ts
-const IDENTITY = [[
-	1,
-	0,
-	0
-], [
-	0,
-	1,
-	0
-]];
-/** Project a screen-space point into document-space. */
-function screenToDoc(t, x, y) {
-	const [[sx, , tx], [, sy, ty]] = t;
-	return [(x - tx) / (sx || 1), (y - ty) / (sy || 1)];
-}
-/** Project a document-space point into screen-space. */
-function docToScreen(t, x, y) {
-	const [[sx, , tx], [, sy, ty]] = t;
-	return [sx * x + tx, sy * y + ty];
-}
-//#endregion
-//#region event/state.ts
-const DRAG_THRESHOLD_PX = 3;
-/**
-* Pure-logic surface state machine.
-*
-* Owns gesture, hover, modifiers, cursor, click-tracker, hit-regions, and
-* the current selection **mirror** pushed by the host. Does not own the
-* authoritative selection — emits `select` intents the host commits.
-*
-* No canvas knowledge. No DOM knowledge. No React.
-*/
-var SurfaceState = class {
-	constructor() {
-		this.gesture = IDLE;
-		this.hover = null;
-		this.hover_override = null;
-		this.cursor = "default";
-		this.modifiers = { ...NO_MODS };
-		this.readonly = false;
-		this.groups = [];
-		this.selection_ids = [];
-		this.transform = IDENTITY;
-		this.hit_regions = new HitRegions();
-		this.click_tracker = new ClickTracker();
-		this.pending = null;
-	}
-	/**
-	* The effective hover: override beats pick.
-	* Used by chrome rendering and by `Surface.hover()`.
-	*/
-	getEffectiveHover() {
-		return this.hover_override ?? this.hover;
-	}
-	/**
-	* Push a new selection from the host. Accepts either:
-	*
-	* - **A flat `NodeId[]`** — each id becomes its own single-member group
-	*   with shape resolved via `shapeOf(id)` at chrome build time. Simple
-	*   hosts (e.g. svg-editor v1) use this overload.
-	* - **A `SelectionGroup[]`** — pre-computed groups (typically grouped by
-	*   parent), each with its own pre-unioned shape. Hosts that already
-	*   compute groups (e.g. the main editor) use this overload.
-	*
-	* The flat-ids form is resolved lazily — `shapeOf` is called by the chrome
-	* builder, not here. This keeps `setSelection` cheap and lets host shape
-	* changes (e.g. after a node move) be reflected without re-calling
-	* `setSelection`.
-	*/
-	setSelection(input) {
-		if (input.length === 0) {
-			this.groups = [];
-			this.selection_ids = [];
-			return;
-		}
-		if (typeof input[0] === "string") {
-			const ids = input;
-			this.selection_ids = [...ids];
-			this.groups = ids.map((id) => ({
-				ids: [id],
-				shape: {
-					kind: "unresolved",
-					id
-				}
-			}));
-		} else {
-			const groups = input;
-			this.groups = groups.map((g) => ({
-				ids: [...g.ids],
-				shape: g.shape
-			}));
-			const flat = [];
-			for (const g of groups) flat.push(...g.ids);
-			this.selection_ids = flat;
-		}
-	}
-	/** Read-only access to the flat list of selected ids (for hover logic). */
-	getSelectionIds() {
-		return this.selection_ids;
-	}
-	/** Read-only access to the selection groups (for chrome rendering). */
-	getSelectionGroups() {
-		return this.groups;
-	}
-	setTransform(t) {
-		this.transform = t;
-	}
-	getTransform() {
-		return this.transform;
-	}
-	setReadonly(v) {
-		this.readonly = v;
-	}
-	hitRegions() {
-		return this.hit_regions;
-	}
-	dispatch(event, deps) {
-		switch (event.kind) {
-			case "pointer_move": return this.onPointerMove(event.x, event.y, event.mods, deps);
-			case "pointer_down":
-				this.modifiers = event.mods;
-				return this.onPointerDown(event.x, event.y, event.button, deps);
-			case "pointer_up":
-				this.modifiers = event.mods;
-				return this.onPointerUp(event.x, event.y, event.button, deps);
-			case "modifiers":
-				this.modifiers = event.mods;
-				return emptyResponse();
-			case "wheel":
-			case "key": return emptyResponse();
-			case "blur": return this.onBlur(deps);
-		}
-	}
-	onPointerMove(sx, sy, mods, deps) {
-		this.modifiers = mods;
-		const response = emptyResponse();
-		const point_doc = screenToDoc(this.transform, sx, sy);
-		if (this.pending && this.gesture.kind === "idle") {
-			const ax = this.pending.anchor_screen[0];
-			const ay = this.pending.anchor_screen[1];
-			const dx = sx - ax;
-			const dy = sy - ay;
-			if (dx * dx + dy * dy >= DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) {
-				const ids = this.pending.ids_at_down;
-				this.pending.deferred = void 0;
-				if (ids.length > 0) {
-					this.gesture = {
-						kind: "translate",
-						ids,
-						anchor_doc: this.pending.anchor_doc,
-						last_doc: point_doc
-					};
-					this.setCursor("move", response);
-				} else this.gesture = {
-					kind: "marquee",
-					anchor_doc: this.pending.anchor_doc,
-					current_doc: point_doc
-				};
-			}
-		}
-		switch (this.gesture.kind) {
-			case "idle": {
-				const hit = deps.pick(point_doc);
-				this.setHover(hit, response);
-				const ui_action = this.hit_regions.hitTest([sx, sy]);
-				this.setCursor(decideIdleCursor({
-					ui_action,
-					hovered_id: hit,
-					selection_ids: this.selection_ids
-				}), response);
-				return response;
-			}
-			case "translate": {
-				const g = this.gesture;
-				const dx = point_doc[0] - g.anchor_doc[0];
-				const dy = point_doc[1] - g.anchor_doc[1];
-				this.gesture = {
-					...g,
-					last_doc: point_doc
-				};
-				deps.emitIntent({
-					kind: "translate",
-					ids: g.ids,
-					dx,
-					dy,
-					phase: "preview"
-				});
-				response.needsRedraw = true;
-				return response;
-			}
-			case "marquee": {
-				const g = this.gesture;
-				this.gesture = {
-					...g,
-					current_doc: point_doc
-				};
-				response.needsRedraw = true;
-				return response;
-			}
-			case "resize": {
-				const g = this.gesture;
-				const dx = point_doc[0] - g.anchor_doc[0];
-				const dy = point_doc[1] - g.anchor_doc[1];
-				const next_shape = applyResize(g.initial_shape, g.direction, dx, dy);
-				this.gesture = {
-					...g,
-					current_shape: next_shape
-				};
-				deps.emitIntent({
-					kind: "resize",
-					ids: g.ids,
-					anchor: g.direction,
-					rect: shapeBounds(next_shape),
-					shape: next_shape,
-					phase: "preview"
-				});
-				response.needsRedraw = true;
-				return response;
-			}
-			case "rotate": {
-				const g = this.gesture;
-				const angle = Math.atan2(point_doc[1] - g.center_doc[1], point_doc[0] - g.center_doc[0]);
-				this.gesture = {
-					...g,
-					current_angle: angle
-				};
-				const delta = angle - g.anchor_angle;
-				deps.emitIntent({
-					kind: "rotate",
-					ids: g.ids,
-					angle: delta,
-					phase: "preview"
-				});
-				this.setCursor({
-					kind: "rotate",
-					corner: g.corner,
-					baseAngle: g.initial_cursor_angle + delta
-				}, response);
-				response.needsRedraw = true;
-				return response;
-			}
-			case "endpoint": {
-				const g = this.gesture;
-				this.gesture = {
-					...g,
-					pos_doc: point_doc
-				};
-				deps.emitIntent({
-					kind: "set_endpoint",
-					id: g.id,
-					endpoint: g.endpoint,
-					pos: point_doc,
-					phase: "preview"
-				});
-				response.needsRedraw = true;
-				return response;
-			}
-			case "pan":
-				this.gesture = {
-					kind: "pan",
-					prev_screen: [sx, sy]
-				};
-				return response;
-		}
-		return response;
-	}
-	onPointerDown(sx, sy, button, deps) {
-		const response = emptyResponse();
-		if (button !== "primary") return response;
-		const point_doc = screenToDoc(this.transform, sx, sy);
-		const screen = [sx, sy];
-		const ui_action = this.hit_regions.hitTest(screen);
-		const hovered_id = deps.pick(point_doc);
-		const click_count = this.click_tracker.register(sx, sy);
-		const decision = decidePointerDown({
-			ui_action,
-			hovered_id,
-			selection_ids: this.selection_ids,
-			modifiers: this.modifiers,
-			click_count,
-			readonly: this.readonly
-		});
-		switch (decision.kind) {
-			case "noop": return response;
-			case "start_resize":
-				this.gesture = {
-					kind: "resize",
-					ids: [...decision.ids],
-					direction: decision.direction,
-					initial_shape: decision.initial_shape,
-					anchor_doc: point_doc,
-					current_shape: decision.initial_shape
-				};
-				response.needsRedraw = true;
-				return response;
-			case "start_rotate": {
-				const [cx, cy] = cmath.rect.getCenter(shapeBounds(decision.initial_shape));
-				const angle = Math.atan2(point_doc[1] - cy, point_doc[0] - cx);
-				const initial_cursor_angle = decision.initial_shape.kind === "transformed" ? cmath.transform.angle(decision.initial_shape.matrix) * Math.PI / 180 : 0;
-				this.gesture = {
-					kind: "rotate",
-					ids: [...decision.ids],
-					corner: decision.corner,
-					center_doc: [cx, cy],
-					anchor_angle: angle,
-					current_angle: angle,
-					initial_cursor_angle
-				};
-				this.setCursor({
-					kind: "rotate",
-					corner: decision.corner,
-					baseAngle: initial_cursor_angle
-				}, response);
-				response.needsRedraw = true;
-				return response;
-			}
-			case "start_endpoint": {
-				const start = decision.endpoint === "p1" ? decision.p1 : decision.p2;
-				this.gesture = {
-					kind: "endpoint",
-					id: decision.id,
-					endpoint: decision.endpoint,
-					pos_doc: [start[0], start[1]]
-				};
-				response.needsRedraw = true;
-				return response;
-			}
-			case "enter_edit":
-				deps.emitIntent({
-					kind: "enter_content_edit",
-					id: decision.id
-				});
-				this.pending = null;
-				return response;
-			case "immediate_select":
-				deps.emitIntent({
-					kind: "select",
-					ids: [...decision.select_ids],
-					mode: decision.mode
-				});
-				response.needsRedraw = true;
-				this.pending = {
-					anchor_doc: point_doc,
-					anchor_screen: screen,
-					ids_at_down: decision.pending.ids_at_down,
-					deferred: decision.pending.deferred
-				};
-				return response;
-			case "pend":
-				this.pending = {
-					anchor_doc: point_doc,
-					anchor_screen: screen,
-					ids_at_down: decision.pending.ids_at_down,
-					deferred: decision.pending.deferred
-				};
-				return response;
-			case "start_marquee_pend":
-				if (decision.emit_deselect_all) {
-					deps.emitIntent({ kind: "deselect_all" });
-					response.needsRedraw = true;
-				}
-				this.pending = {
-					anchor_doc: point_doc,
-					anchor_screen: screen,
-					ids_at_down: []
-				};
-				return response;
-		}
-	}
-	onPointerUp(_sx, _sy, button, deps) {
-		const response = emptyResponse();
-		if (button !== "primary") return response;
-		if (this.pending && this.pending.deferred) {
-			const d = this.pending.deferred;
-			deps.emitIntent({
-				kind: "select",
-				ids: [d.node_id],
-				mode: d.shift ? "toggle" : "replace"
-			});
-			response.needsRedraw = true;
-		}
-		this.pending = null;
-		switch (this.gesture.kind) {
-			case "translate": {
-				const g = this.gesture;
-				const dx = g.last_doc[0] - g.anchor_doc[0];
-				const dy = g.last_doc[1] - g.anchor_doc[1];
-				deps.emitIntent({
-					kind: "translate",
-					ids: g.ids,
-					dx,
-					dy,
-					phase: "commit"
-				});
-				this.gesture = IDLE;
-				response.needsRedraw = true;
-				if (cursorEquals(this.cursor, "move")) this.setCursor("default", response);
-				break;
-			}
-			case "marquee": {
-				const g = this.gesture;
-				const rect = rectFromPoints(g.anchor_doc, g.current_doc);
-				deps.emitIntent({
-					kind: "marquee_select",
-					rect,
-					additive: this.modifiers.shift,
-					phase: "commit"
-				});
-				this.gesture = IDLE;
-				response.needsRedraw = true;
-				break;
-			}
-			case "resize": {
-				const g = this.gesture;
-				deps.emitIntent({
-					kind: "resize",
-					ids: g.ids,
-					anchor: g.direction,
-					rect: shapeBounds(g.current_shape),
-					shape: g.current_shape,
-					phase: "commit"
-				});
-				this.gesture = IDLE;
-				response.needsRedraw = true;
-				break;
-			}
-			case "rotate": {
-				const g = this.gesture;
-				deps.emitIntent({
-					kind: "rotate",
-					ids: g.ids,
-					angle: g.current_angle - g.anchor_angle,
-					phase: "commit"
-				});
-				this.gesture = IDLE;
-				response.needsRedraw = true;
-				break;
-			}
-			case "endpoint": {
-				const g = this.gesture;
-				deps.emitIntent({
-					kind: "set_endpoint",
-					id: g.id,
-					endpoint: g.endpoint,
-					pos: g.pos_doc,
-					phase: "commit"
-				});
-				this.gesture = IDLE;
-				response.needsRedraw = true;
-				break;
-			}
-		}
-		return response;
-	}
-	onBlur(deps) {
-		const response = emptyResponse();
-		this.pending = null;
-		if (this.gesture.kind !== "idle") {
-			deps.emitIntent({ kind: "cancel_gesture" });
-			this.gesture = IDLE;
-			response.needsRedraw = true;
-		}
-		return response;
-	}
-	setHover(id, response) {
-		if (this.hover === id) return;
-		const prev_eff = this.getEffectiveHover();
-		this.hover = id;
-		if (prev_eff !== this.getEffectiveHover()) {
-			response.hoverChanged = true;
-			response.needsRedraw = true;
-		}
-	}
-	/**
-	* Set or clear the host-driven hover override. Pass `null` to clear.
-	* Returns a response indicating whether the *effective* hover changed —
-	* the caller should redraw and notify subscribers if `hoverChanged`.
-	*/
-	setHoverOverride(id) {
-		const response = emptyResponse();
-		if (this.hover_override === id) return response;
-		const prev_eff = this.getEffectiveHover();
-		this.hover_override = id;
-		if (prev_eff !== this.getEffectiveHover()) {
-			response.hoverChanged = true;
-			response.needsRedraw = true;
-		}
-		return response;
-	}
-	setCursor(next, response) {
-		if (!cursorEquals(this.cursor, next)) {
-			this.cursor = next;
-			response.cursorChanged = true;
-		}
-	}
-};
-//#endregion
-//#region surface/style.ts
-const DEFAULT_STYLE = {
-	chromeColor: "#2563eb",
-	hoverColor: "#60a5fa",
-	handleSize: 8,
-	handleFill: "#ffffff",
-	handleStroke: "#2563eb",
-	selectionOutlineWidth: 1,
-	hoverOutlineWidth: 2,
-	showRotationHandles: false
-};
-function mergeStyle(base, partial) {
-	if (!partial) return base;
-	return {
-		...base,
-		...partial
-	};
-}
-//#endregion
-//#region event/overlay.ts
-/**
-* Minimum hit-target size in screen-px.
-*
-* Visual knobs are typically 8px, but the hit region is 16px so users don't
-* need pixel-perfect aim. Matches `MIN_HIT_SIZE` in the Rust overlay.
-*/
-const MIN_HIT_SIZE = 16;
-/**
-* Below this selection size (in screen-px on either axis), chrome is
-* suppressed — both the visual handles AND the hit regions. Matches
-* `MIN_HANDLES_VISIBLE_SIZE` in the Rust overlay.
-*/
-const MIN_CHROME_VISIBLE_SIZE = 12;
-//#endregion
-//#region event/selection-controls.ts
-const CORNER_DIRS = [
-	"nw",
-	"ne",
-	"se",
-	"sw"
-];
-const EDGE_DIRS = [
-	"n",
-	"e",
-	"s",
-	"w"
-];
-const CORNER_LABEL = {
-	nw: "resize_handle:nw",
-	ne: "resize_handle:ne",
-	se: "resize_handle:se",
-	sw: "resize_handle:sw"
-};
-const EDGE_LABEL = {
-	n: "resize_edge:n",
-	e: "resize_edge:e",
-	s: "resize_edge:s",
-	w: "resize_edge:w"
-};
-const ROTATE_LABEL = {
-	nw: "rotate:nw",
-	ne: "rotate:ne",
-	se: "rotate:se",
-	sw: "rotate:sw"
-};
-const HUDHitPriority = {
-	ENDPOINT_HANDLE: 10,
-	RESIZE_HANDLE_EDGE_SMALL: 22,
-	TRANSLATE_BODY_SMALL: 25,
-	RESIZE_HANDLE_EDGE: 30,
-	RESIZE_HANDLE_CORNER: 31,
-	TRANSLATE_BODY: 40,
-	ROTATE_HANDLE: 50
-};
-/** The principle constant — the minimum guaranteed length for the body
-*  interior on each axis AND for each side strip along its parallel
-*  axis. Tunable; everything else derives. */
-const MIN_GUARANTEED_INTERACTIVE_DIM = 20;
-/** Below this axis dim, body promotes above corner. Derived from the
-*  principle. */
-const BODY_FLIP_THRESHOLD = 36;
-/**
-* @returns { corner, edge } — lengths in screen-px summing to `total`
-* (corner * 2 + edge === total). Each is `>= 0`.
-*
-* Three phases:
-*  - **comfortable** (`total >= 2 * corner_preferred + edge_min`):
-*    corners at preferred, edge takes the surplus.
-*  - **squeezed** (`total >= edge_min`): edge at its min, corners share
-*    the remainder.
-*  - **tiny** (`total < edge_min`): edge takes everything, corners 0.
-*/
-function negotiateAxis(total, corner_preferred, edge_min) {
-	if (total <= 0) return {
-		corner: 0,
-		edge: 0
-	};
-	if (total >= corner_preferred * 2 + edge_min) return {
-		corner: corner_preferred,
-		edge: total - corner_preferred * 2
-	};
-	if (total >= edge_min) return {
-		corner: (total - edge_min) / 2,
-		edge: edge_min
-	};
-	return {
-		corner: 0,
-		edge: total
-	};
-}
-/**
-* Compute the selection control layout for a screen-space rect.
-*
-* Pure: no DOM, no global state. Same inputs → same zones.
-*
-* The perimeter ring straddles the bbox edge with `extension =
-* hit_size / 2` overhang outside. Along each axis the run of length
-* `axis_dim + 2 * extension` is split via {@link negotiateAxis} into
-* `[corner | edge | corner]`. The 4 corners and 4 edges in 2D then tile
-* the ring as a strict 3×3 grid of cells — **non-overlapping**. Body
-* sits at rect_screen and may overlap with the ring's inside-bbox half
-* in comfortable mode; priority resolves those overlaps.
-*
-* See the comment block in this file for the full principle.
-*/
-function computeSelectionControlLayout(rect_screen, opts) {
-	const zones = [];
-	const w_violated = rect_screen.width < BODY_FLIP_THRESHOLD;
-	const h_violated = rect_screen.height < BODY_FLIP_THRESHOLD;
-	const small_mode = w_violated || h_violated;
-	const controls_visible = rect_screen.width >= 12 && rect_screen.height >= 12;
-	if (rect_screen.width >= 1 || rect_screen.height >= 1) zones.push({
-		rect: rect_screen,
-		priority: small_mode ? HUDHitPriority.TRANSLATE_BODY_SMALL : HUDHitPriority.TRANSLATE_BODY,
-		role: { kind: "translate" },
-		label: "translate"
-	});
-	if (!controls_visible) return {
-		zones,
-		controls_visible,
-		small_mode
-	};
-	const hit_size = Math.max(opts.handle_size + 4, 16);
-	const extension = hit_size / 2;
-	const total_x = rect_screen.width + extension * 2;
-	const total_y = rect_screen.height + extension * 2;
-	const { corner: cx, edge: ex } = negotiateAxis(total_x, hit_size, 20);
-	const { corner: cy, edge: ey } = negotiateAxis(total_y, hit_size, 20);
-	const left = rect_screen.x - extension;
-	const top = rect_screen.y - extension;
-	const mid_x = left + cx;
-	const mid_y = top + cy;
-	const right_x = mid_x + ex;
-	const right_y = mid_y + ey;
-	const cornerRects = {
-		nw: {
-			x: left,
-			y: top,
-			width: cx,
-			height: cy
-		},
-		ne: {
-			x: right_x,
-			y: top,
-			width: cx,
-			height: cy
-		},
-		sw: {
-			x: left,
-			y: right_y,
-			width: cx,
-			height: cy
-		},
-		se: {
-			x: right_x,
-			y: right_y,
-			width: cx,
-			height: cy
-		}
-	};
-	const edgeRects = {
-		n: {
-			x: mid_x,
-			y: top,
-			width: ex,
-			height: cy
-		},
-		s: {
-			x: mid_x,
-			y: right_y,
-			width: ex,
-			height: cy
-		},
-		w: {
-			x: left,
-			y: mid_y,
-			width: cx,
-			height: ey
-		},
-		e: {
-			x: right_x,
-			y: mid_y,
-			width: cx,
-			height: ey
-		}
-	};
-	for (const dir of CORNER_DIRS) {
-		const rect = cornerRects[dir];
-		if (rect.width <= 0 || rect.height <= 0) continue;
-		zones.push({
-			rect,
-			priority: HUDHitPriority.RESIZE_HANDLE_CORNER,
-			role: {
-				kind: "resize_corner",
-				direction: dir
-			},
-			label: CORNER_LABEL[dir]
-		});
-	}
-	const edge_priority = {
-		n: w_violated ? HUDHitPriority.RESIZE_HANDLE_EDGE_SMALL : HUDHitPriority.RESIZE_HANDLE_EDGE,
-		s: w_violated ? HUDHitPriority.RESIZE_HANDLE_EDGE_SMALL : HUDHitPriority.RESIZE_HANDLE_EDGE,
-		e: h_violated ? HUDHitPriority.RESIZE_HANDLE_EDGE_SMALL : HUDHitPriority.RESIZE_HANDLE_EDGE,
-		w: h_violated ? HUDHitPriority.RESIZE_HANDLE_EDGE_SMALL : HUDHitPriority.RESIZE_HANDLE_EDGE
-	};
-	for (const dir of EDGE_DIRS) {
-		const rect = edgeRects[dir];
-		if (rect.width <= 0 || rect.height <= 0) continue;
-		zones.push({
-			rect,
-			priority: edge_priority[dir],
-			role: {
-				kind: "resize_edge",
-				direction: dir
-			},
-			label: EDGE_LABEL[dir]
-		});
-	}
-	if (opts.show_rotation) for (const dir of CORNER_DIRS) {
-		const resize = cornerRects[dir];
-		if (resize.width <= 0 || resize.height <= 0) continue;
-		const [dx, dy] = cmath.compass.cardinal_direction_vector[dir];
-		zones.push({
-			rect: {
-				x: resize.x + (dx > 0 ? 0 : -16),
-				y: resize.y + (dy > 0 ? 0 : -16),
-				width: resize.width + 16,
-				height: resize.height + 16
-			},
-			priority: HUDHitPriority.ROTATE_HANDLE,
-			role: {
-				kind: "rotate",
-				corner: dir
-			},
-			label: ROTATE_LABEL[dir]
-		});
-	}
-	return {
-		zones,
-		controls_visible,
-		small_mode
-	};
-}
-//#endregion
-//#region surface/chrome.ts
-/**
-* Build the per-frame surface chrome.
-*
-* Returns a pair:
-* - `overlays` — interactable elements (handles, endpoint knobs, rotation
-*   regions). Each pairs a hit shape with an optional render shape.
-* - `decoration` — pure visual `HUDDraw` (selection outlines, hover outline,
-*   marquee, line outlines). Not interactable.
-*
-* Priority is data, not iteration order. Each `OverlayElement` carries its
-* own `priority` (lower wins) and a stable `label`. The `HitRegions`
-* registry resolves overlapping regions by priority, not push order. See
-* `event/selection-controls.ts` for the canonical priority ladder.
-*
-* The Surface fans `overlays` into `HitRegions` (for events) and merges
-* their render shapes into `decoration` (for the canvas draw call).
-*/
-function buildChrome(input) {
-	const { state, shapeOf, style, groups } = input;
-	const transform = state.getTransform();
-	const overlays = [];
-	const decoration_rects = [];
-	const decoration_lines = [];
-	const decoration_polylines = [];
-	const hover_id = state.gesture.kind === "idle" ? state.getEffectiveHover() : null;
-	if (hover_id) {
-		const shape = shapeOf(hover_id);
-		if (shape) pushShapeOutline(shape, decoration_rects, decoration_lines, decoration_polylines, {
-			dashed: false,
-			strokeWidth: style.hoverOutlineWidth,
-			group: groups?.hover
-		});
-	}
-	for (const group of state.getSelectionGroups()) {
-		const shape = resolveGroupShape(group, shapeOf);
-		if (!shape) continue;
-		pushShapeOutline(shape, decoration_rects, decoration_lines, decoration_polylines, {
-			dashed: false,
-			strokeWidth: style.selectionOutlineWidth,
-			group: groups?.selection
-		});
-		if (shape.kind === "rect") pushRectChrome(shape.rect, group.ids, transform, style, groups?.selectionControls, overlays);
-		else if (shape.kind === "transformed") pushTransformedChrome(shape.local, shape.matrix, group.ids, transform, style, groups?.selectionControls, overlays);
-		else if (shape.kind === "line") {
-			pushLineBody(shape, group.ids, transform, groups?.selectionControls, overlays);
-			pushLineEndpoints(group.ids[0], shape.p1, shape.p2, style, groups?.selectionControls, overlays);
-		}
-	}
-	if (state.gesture.kind === "marquee") {
-		const g = state.gesture;
-		const mr = rectFromPoints(g.anchor_doc, g.current_doc);
-		decoration_rects.push({
-			...mr,
-			stroke: true,
-			fill: true,
-			fillOpacity: .15,
-			group: groups?.marquee
-		});
-	}
-	if (state.gesture.kind === "resize") {
-		const shape = state.gesture.current_shape;
-		if (shape.kind === "transformed") {
-			const corners = cmath.rect.toCorners(shape.local).map((p) => cmath.vector2.transform(p, shape.matrix));
-			decoration_polylines.push({
-				points: [...corners, corners[0]],
-				stroke: true,
-				fill: false,
-				dashed: true,
-				group: groups?.transformPreview
-			});
-		} else decoration_rects.push({
-			...shapeBounds(shape),
-			stroke: true,
-			fill: false,
-			dashed: true,
-			group: groups?.transformPreview
-		});
-	}
-	return {
-		overlays,
-		decoration: {
-			rects: decoration_rects.length > 0 ? decoration_rects : void 0,
-			lines: decoration_lines.length > 0 ? decoration_lines : void 0,
-			polylines: decoration_polylines.length > 0 ? decoration_polylines : void 0
-		}
-	};
-}
-function resolveGroupShape(group, shapeOf) {
-	if (group.shape.kind === "unresolved") return shapeOf(group.shape.id);
-	return group.shape;
-}
-function pushRectChrome(rect_doc, ids, transform, style, group, out) {
-	const layout = computeSelectionControlLayout(cmath.rect.transform(rect_doc, transform), {
-		handle_size: style.handleSize,
-		show_rotation: style.showRotationHandles && ids.length >= 1
-	});
-	for (const zone of layout.zones) {
-		const el = zoneToOverlay(zone, rect_doc, ids, style, group, layout.controls_visible);
-		if (el) out.push(el);
-	}
-}
-function zoneToOverlay(zone, rect_doc, ids, style, group, controls_visible) {
-	switch (zone.role.kind) {
-		case "translate": return {
-			label: zone.label,
-			group,
-			action: {
-				kind: "translate_handle",
-				ids
-			},
-			hit: {
-				kind: "screen_aabb",
-				rect: zone.rect
-			},
-			priority: zone.priority,
-			cursor: "move"
-		};
-		case "resize_corner": {
-			const dir = zone.role.direction;
-			const size = style.handleSize;
-			const anchor_doc = cmath.rect.getCardinalPoint(rect_doc, dir);
-			return {
-				label: zone.label,
-				group,
-				action: {
-					kind: "resize_handle",
-					direction: dir,
-					ids,
-					initial_shape: {
-						kind: "rect",
-						rect: rect_doc
-					}
-				},
-				hit: {
-					kind: "screen_aabb",
-					rect: zone.rect
-				},
-				render: controls_visible ? {
-					kind: "screen_rect",
-					anchor_doc,
-					width: size,
-					height: size,
-					placement: "center",
-					fill: true,
-					stroke: true,
-					fillColor: style.handleFill,
-					strokeColor: style.handleStroke
-				} : void 0,
-				priority: zone.priority,
-				cursor: {
-					kind: "resize",
-					direction: dir
-				}
-			};
-		}
-		case "resize_edge": return {
-			label: zone.label,
-			group,
-			action: {
-				kind: "resize_handle",
-				direction: zone.role.direction,
-				ids,
-				initial_shape: {
-					kind: "rect",
-					rect: rect_doc
-				}
-			},
-			hit: {
-				kind: "screen_aabb",
-				rect: zone.rect
-			},
-			priority: zone.priority,
-			cursor: {
-				kind: "resize",
-				direction: zone.role.direction
-			}
-		};
-		case "rotate": return {
-			label: zone.label,
-			group,
-			action: {
-				kind: "rotate_handle",
-				corner: zone.role.corner,
-				ids,
-				initial_shape: {
-					kind: "rect",
-					rect: rect_doc
-				}
-			},
-			hit: {
-				kind: "screen_aabb",
-				rect: zone.rect
-			},
-			priority: zone.priority,
-			cursor: {
-				kind: "rotate",
-				corner: zone.role.corner
-			}
-		};
-	}
-}
-function pushTransformedChrome(local, matrix, ids, camera, style, group, out) {
-	const local_to_screen = cmath.transform.multiply(camera, matrix);
-	const scale_xy = cmath.transform.getScale(local_to_screen);
-	const angle_deg = cmath.transform.angle(local_to_screen);
-	const angle_rad = angle_deg * Math.PI / 180;
-	const screen_w = local.width * scale_xy[0];
-	const screen_h = local.height * scale_xy[1];
-	const local_center = [local.x + local.width / 2, local.y + local.height / 2];
-	const screen_center = cmath.vector2.transform(local_center, local_to_screen);
-	const layout = computeSelectionControlLayout({
-		x: screen_center[0] - screen_w / 2,
-		y: screen_center[1] - screen_h / 2,
-		width: screen_w,
-		height: screen_h
-	}, {
-		handle_size: style.handleSize,
-		show_rotation: style.showRotationHandles && ids.length >= 1
-	});
-	const inverse_transform = cmath.transform.rotate(cmath.transform.identity, -angle_deg, screen_center);
-	const initial_shape = {
-		kind: "transformed",
-		local,
-		matrix
-	};
-	for (const zone of layout.zones) {
-		const hit = {
-			kind: "screen_obb",
-			rect: zone.rect,
-			inverse_transform
-		};
-		switch (zone.role.kind) {
-			case "translate":
-				out.push({
-					label: zone.label,
-					group,
-					action: {
-						kind: "translate_handle",
-						ids
-					},
-					hit,
-					priority: zone.priority,
-					cursor: "move"
-				});
-				break;
-			case "resize_corner": {
-				const dir = zone.role.direction;
-				const size = style.handleSize;
-				const cardinal_local = cmath.rect.getCardinalPoint(local, dir);
-				const anchor_doc = cmath.vector2.transform(cardinal_local, matrix);
-				out.push({
-					label: zone.label,
-					group,
-					action: {
-						kind: "resize_handle",
-						direction: dir,
-						ids,
-						initial_shape
-					},
-					hit,
-					render: layout.controls_visible ? {
-						kind: "screen_rect",
-						anchor_doc,
-						width: size,
-						height: size,
-						placement: "center",
-						fill: true,
-						stroke: true,
-						fillColor: style.handleFill,
-						strokeColor: style.handleStroke,
-						angle: angle_rad
-					} : void 0,
-					priority: zone.priority,
-					cursor: {
-						kind: "resize",
-						direction: dir
-					}
-				});
-				break;
-			}
-			case "resize_edge":
-				out.push({
-					label: zone.label,
-					group,
-					action: {
-						kind: "resize_handle",
-						direction: zone.role.direction,
-						ids,
-						initial_shape
-					},
-					hit,
-					priority: zone.priority,
-					cursor: {
-						kind: "resize",
-						direction: zone.role.direction
-					}
-				});
-				break;
-			case "rotate":
-				out.push({
-					label: zone.label,
-					group,
-					action: {
-						kind: "rotate_handle",
-						corner: zone.role.corner,
-						ids,
-						initial_shape
-					},
-					hit,
-					priority: zone.priority,
-					cursor: {
-						kind: "rotate",
-						corner: zone.role.corner
-					}
-				});
-				break;
-		}
-	}
-}
-function pushLineBody(shape, ids, transform, group, out) {
-	const bounds_doc = shapeBounds(shape);
-	const rect_screen = cmath.rect.transform(bounds_doc, transform);
-	if (rect_screen.width < 1 && rect_screen.height < 1) return;
-	const hitW = Math.max(rect_screen.width, 16);
-	const hitH = Math.max(rect_screen.height, 16);
-	const hitRect = {
-		x: rect_screen.x - (hitW - rect_screen.width) / 2,
-		y: rect_screen.y - (hitH - rect_screen.height) / 2,
-		width: hitW,
-		height: hitH
-	};
-	out.push({
-		label: "translate",
-		group,
-		action: {
-			kind: "translate_handle",
-			ids
-		},
-		hit: {
-			kind: "screen_aabb",
-			rect: hitRect
-		},
-		priority: HUDHitPriority.TRANSLATE_BODY,
-		cursor: "move"
-	});
-}
-function pushLineEndpoints(id, p1, p2, style, group, out) {
-	const size = style.handleSize;
-	const hit_size = Math.max(size + 4, 16);
-	const endpoints = [{
-		which: "p1",
-		pos: p1
-	}, {
-		which: "p2",
-		pos: p2
-	}];
-	for (const ep of endpoints) out.push({
-		label: `endpoint:${ep.which}`,
-		group,
-		action: {
-			kind: "endpoint_handle",
-			endpoint: ep.which,
-			id,
-			p1: [p1[0], p1[1]],
-			p2: [p2[0], p2[1]]
-		},
-		hit: {
-			kind: "screen_rect_at_doc",
-			anchor_doc: ep.pos,
-			width: hit_size,
-			height: hit_size,
-			placement: "center"
-		},
-		render: {
-			kind: "screen_rect",
-			anchor_doc: ep.pos,
-			width: size,
-			height: size,
-			placement: "center",
-			fill: true,
-			stroke: true,
-			fillColor: style.handleFill,
-			strokeColor: style.handleStroke
-		},
-		priority: HUDHitPriority.ENDPOINT_HANDLE,
-		cursor: "pointer"
-	});
-}
-function pushShapeOutline(shape, rects, lines, polylines, opts) {
-	if (shape.kind === "rect") rects.push({
-		...shape.rect,
-		stroke: true,
-		fill: false,
-		dashed: opts.dashed,
-		strokeWidth: opts.strokeWidth,
-		group: opts.group
-	});
-	else if (shape.kind === "transformed") {
-		const corners_doc = cmath.rect.toCorners(shape.local).map((p) => cmath.vector2.transform(p, shape.matrix));
-		polylines.push({
-			points: [...corners_doc, corners_doc[0]],
-			stroke: true,
-			fill: false,
-			dashed: opts.dashed,
-			group: opts.group
-		});
-	} else if (shape.kind === "line") lines.push({
-		x1: shape.p1[0],
-		y1: shape.p1[1],
-		x2: shape.p2[0],
-		y2: shape.p2[1],
-		dashed: opts.dashed,
-		strokeWidth: opts.strokeWidth,
-		group: opts.group
-	});
-}
-/**
-* Fan a list of `OverlayElement`s into per-primitive render arrays and into
-* the hit-region registry. Returns the additional render primitives that
-* should be merged with the decoration `HUDDraw`.
-*
-* Priority and label are forwarded verbatim from each overlay element to
-* the registered HitRegion — the registry resolves overlaps by priority.
-*/
-function fanOverlays(overlays, transform, regions) {
-	regions.clear();
-	const screenRects = [];
-	for (const el of overlays) {
-		const projected = projectHit(el.hit, transform);
-		regions.push({
-			rect: projected.rect,
-			inverse_transform: projected.inverse_transform,
-			action: el.action,
-			priority: el.priority,
-			label: el.label
-		});
-		if (!el.render) continue;
-		if (el.render.kind === "screen_rect") screenRects.push({
-			x: el.render.anchor_doc[0],
-			y: el.render.anchor_doc[1],
-			width: el.render.width,
-			height: el.render.height,
-			anchor: el.render.placement,
-			fill: el.render.fill,
-			stroke: el.render.stroke,
-			fillColor: el.render.fillColor,
-			strokeColor: el.render.strokeColor,
-			angle: el.render.angle,
-			group: el.group
-		});
-	}
-	return { screenRects };
-}
-function projectHit(hit, transform) {
-	if (hit.kind === "screen_aabb") return { rect: hit.rect };
-	if (hit.kind === "screen_obb") return {
-		rect: hit.rect,
-		inverse_transform: hit.inverse_transform
-	};
-	const [sx, sy] = docToScreen(transform, hit.anchor_doc[0], hit.anchor_doc[1]);
-	const placement = hit.placement ?? "center";
-	let x = sx;
-	let y = sy;
-	switch (placement) {
-		case "center":
-			x = sx - hit.width / 2;
-			y = sy - hit.height / 2;
-			break;
-		case "tl":
-			x = sx;
-			y = sy;
-			break;
-		case "tr":
-			x = sx - hit.width;
-			y = sy;
-			break;
-		case "bl":
-			x = sx;
-			y = sy - hit.height;
-			break;
-		case "br":
-			x = sx - hit.width;
-			y = sy - hit.height;
-			break;
-	}
-	return { rect: {
-		x,
-		y,
-		width: hit.width,
-		height: hit.height
-	} };
-}
-/**
-* Merge a base `HUDDraw` (chrome decoration) with optional host-fed extras
-* and surface-owned interactable screenRects into a single command list.
-*/
-function mergeDraws(base, extra, screenRects) {
-	return {
-		lines: cat(base.lines, extra?.lines),
-		rules: cat(base.rules, extra?.rules),
-		points: cat(base.points, extra?.points),
-		rects: cat(base.rects, extra?.rects),
-		polylines: cat(base.polylines, extra?.polylines),
-		screenRects: cat(cat(base.screenRects, extra?.screenRects), screenRects)
-	};
-}
-/**
-* Concatenate two optional arrays. Returns the non-empty side directly when
-* the other is empty — no defensive copy on the hot draw path.
-*/
-function cat(a, b) {
-	if (!b || b.length === 0) return a;
-	if (!a || a.length === 0) return b;
-	return [...a, ...b];
-}
-//#endregion
-//#region surface/surface.ts
-/**
-* Top-level wired surface.
-*
-* Owns an internal `HUDCanvas`, a `SurfaceState` (gesture/hover/...) and
-* the host providers. On every `dispatch`, the state machine runs;
-* `draw` composes surface chrome + host-fed extras into a single canvas
-* paint.
-*/
-var Surface = class {
-	constructor(canvas, options) {
-		this.width = 0;
-		this.height = 0;
-		this.cursor_renderer = null;
-		this.opts = options;
-		this.style = mergeStyle(DEFAULT_STYLE, options.style);
-		this.colorOverride = options.color;
-		this.hudCanvas = new HUDCanvas(canvas, { color: this.colorOverride ?? this.style.chromeColor });
-		this.state = new SurfaceState();
-		if (options.readonly !== void 0) this.state.setReadonly(options.readonly);
-		if (options.pixelGrid) this.hudCanvas.setPixelGrid(options.pixelGrid);
-	}
-	/** Configure / disable the back-most pixel-grid layer. */
-	setPixelGrid(config) {
-		this.hudCanvas.setPixelGrid(config);
-	}
-	/**
-	* Update just the pixel grid's transform. Cheap to call per camera tick.
-	* No-op when no pixel-grid config is set.
-	*/
-	setPixelGridTransform(transform) {
-		this.hudCanvas.setPixelGridTransform(transform);
-	}
-	setSize(w, h) {
-		this.width = w;
-		this.height = h;
-		this.hudCanvas.setSize(w, h);
-	}
-	setTransform(t) {
-		this.state.setTransform(t);
-		this.hudCanvas.setTransform(t);
-	}
-	/**
-	* Push a new selection from the host.
-	*
-	* Accepts either:
-	* - `NodeId[]` — each id becomes its own single-member group, shape
-	*   resolved via `shapeOf(id)` by the chrome builder.
-	* - `SelectionGroup[]` — pre-computed groups with their union shape.
-	*
-	* See `SurfaceState.setSelection` for details.
-	*/
-	setSelection(input) {
-		this.state.setSelection(input);
-	}
-	setStyle(partial) {
-		this.style = mergeStyle(this.style, partial);
-		this.hudCanvas.setColor(this.colorOverride ?? this.style.chromeColor);
-	}
-	/**
-	* Set or clear the host color override. `null` clears the override and
-	* lets `style.chromeColor` win on the next paint.
-	*/
-	setColor(color) {
-		this.colorOverride = color ?? void 0;
-		this.hudCanvas.setColor(this.colorOverride ?? this.style.chromeColor);
-	}
-	setReadonly(v) {
-		this.state.setReadonly(v);
-	}
-	/**
-	* Set or clear a host-driven hover override.
-	*
-	* The surface tracks two hover sources:
-	* - **Pointer pick** — what scene content is under the cursor (updated
-	*   automatically on `pointer_move`).
-	* - **Host override** — what the host wants to show as hovered, e.g.
-	*   from a layers panel row mouseenter.
-	*
-	* The override (when non-null) wins. `hover()` returns the effective
-	* value; chrome renders the effective value. Pass `null` to clear and
-	* fall back to pointer pick.
-	*
-	* Returns the same response shape as `dispatch` so the host can react
-	* to whether anything actually changed.
-	*/
-	setHoverOverride(id) {
-		return this.state.setHoverOverride(id);
-	}
-	dispose() {}
-	dispatch(event) {
-		return this.state.dispatch(event, {
-			pick: this.opts.pick,
-			shapeOf: this.opts.shapeOf,
-			emitIntent: this.opts.onIntent
-		});
-	}
-	draw(extra) {
-		const { overlays, decoration } = buildChrome({
-			state: this.state,
-			shapeOf: this.opts.shapeOf,
-			style: this.style,
-			groups: this.opts.groups,
-			width: this.width,
-			height: this.height
-		});
-		const hidden = this.opts.visibility?.({ gesture: this.state.gesture })?.hidden;
-		const { screenRects } = fanOverlays(filterOverlaysByGroup(overlays, hidden), this.state.getTransform(), this.state.hitRegions());
-		this.hudCanvas.draw(filterHUDDrawByGroup(mergeDraws(decoration, extra, screenRects), { hidden }));
-	}
-	/** Convenience: clear the canvas (e.g. when the host stops the surface). */
-	clear() {
-		this.hudCanvas.draw(void 0);
-	}
-	gesture() {
-		return this.state.gesture;
-	}
-	/**
-	* The effective hover: host override (when set) wins over pointer pick.
-	* Use this for chrome decisions and host-side reads.
-	*/
-	hover() {
-		return this.state.getEffectiveHover();
-	}
-	cursor() {
-		return this.state.cursor;
-	}
-	/**
-	* Resolve the current cursor to a CSS `cursor:` value. Runs the
-	* installed renderer (or the built-in `cursorToCss` if none installed).
-	*
-	* Host wires it like:
-	*
-	*     const r = surface.dispatch(event);
-	*     if (r.cursorChanged) el.style.cursor = surface.cursorCss();
-	*
-	* Saves the host from re-importing `cursorToCss` after every dispatch
-	* and gives one place to change behavior when a renderer is swapped in.
-	*/
-	cursorCss() {
-		return (this.cursor_renderer ?? cursorToCss)(this.state.cursor);
-	}
-	/**
-	* Install (or clear) a custom cursor renderer.
-	*
-	* `null` restores the built-in `cursorToCss` behavior (native CSS
-	* keywords for every variant). Pass `cursors.defaultRenderer()` from
-	* `@grida/hud/cursors` for the bundled SVG cursor set.
-	*
-	* Re-callable mid-session; the next `cursorCss()` reads the new value.
-	*/
-	setCursorRenderer(fn) {
-		this.cursor_renderer = fn;
-	}
-	modifiers() {
-		return this.state.modifiers;
-	}
-};
-function filterOverlaysByGroup(overlays, hidden) {
-	const hidden_set = new Set(hidden ?? []);
-	if (hidden_set.size === 0) return overlays;
-	return overlays.filter((overlay) => {
-		return !overlay.group || !hidden_set.has(overlay.group);
-	});
-}
-//#endregion
-export { DEFAULT_PIXEL_GRID_STEPS as _, computeSelectionControlLayout as a, MIN_HIT_SIZE as c, marqueeToHUDDraw as d, measurementToHUDDraw as f, DEFAULT_PIXEL_GRID_COLOR as g, HUDCanvas as h, MIN_GUARANTEED_INTERACTIVE_DIM as i, NO_MODS as l, filterHUDDrawByGroup as m, BODY_FLIP_THRESHOLD as n, negotiateAxis as o, snapGuideToHUDDraw as p, HUDHitPriority as r, MIN_CHROME_VISIBLE_SIZE as s, Surface as t, lassoToHUDDraw as u, drawPixelGrid as v };